ruby-on-rails - rails + WebRTC 录音 + Carrierwave + 雾 + S3 + Ajax 错误

Question

我想从用户那里收集 HTML5 录音并将它们存储在 S3 中。我正在使用名为 MediaStreamRecorder.js 的 WebRTC 使用 javascript 资源进行浏览器内音频和视频录制收集录音。我已经添加了 Carrierwave 和 Fog，并验证我可以成功地将音频文件上传到 S3。我还成功地使用 MediaStreamRecorder.js 来收集音频 Blob 并在音频标签中播放它。我最初的想法是将 blob URL 直接添加为隐藏表单输入的值，并通过表单提交将音频发送到 Controller 和 Carrierwave，就像您可以使用“remote_file_url”提交指向远程文件的链接而不是上传本地文件。

那失败了。显然，无法以这种方式处理 blob URL。

我找到了 this blog post解释我如何通过 Javascript 直接向 Carrierwave 提交文件。我试图实现这一点，但失败了。我正在使用 Chrome。

我有一个名为“录音”的上传器:

class RecordingUploader < CarrierWave::Uploader::Base
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
end

我有一个模型“背诵”:

class Recitation < ActiveRecord::Base
    belongs_to :lesson
    mount_uploader :recording, RecordingUploader
end

这些路线反射(reflect)了 Recitation 嵌套在名为 Lesson 的模型中:

resources :lessons do
    resources :parts
    resources :recitations
end

我在 Recitation Controller 中的 new 和 create 方法:

def new
    @lesson = Lesson.find(params[:lesson_id])
    @recitation = Recitation.new
end

def create
    @lesson = Lesson.find(params[:lesson_id])
    @recitation = @lesson.recitations.new(recitation_params)
    if @recitation.save
      redirect_to thanks_path
    else
      flash[:error] = "There was a problem saving your recording."
      render :new
    end
end

最后我尝试通过 AJAX 将 blob 传递给 Controller ​​。

function onMediaSuccess(stream) {  
    mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'audio/ogg';
    mediaRecorder.ondataavailable = function(blob) {  
        var formData = new FormData();
        formData.append('recitation[recording]', blob);
        $.ajax({
            url: "/lessons/#{@lesson.id}/recitations",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'PUT'
        });
    };
}

在 JS 控制台中，我收到“404(未找到)”错误。问题似乎出在 jquery.js 中一些与 AJAX 相关的行中，但我猜。将不胜感激任何见解。

Answer 1

我认为您的问题与 AJAX 行中使用的网址有关:

 $.ajax({
        url: "/lessons/#{@lesson.id}/recitations",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        type: 'PUT'
    });

您需要指定要更新的朗诵的 ID。尝试以下操作，看看它是否有效:

$.ajax({
    url: "/lessons/#{@lesson.id}/recitations/#{@recitation.id}",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'PUT'
});