rails + WebRTC录音+ Carrierwave + fog + S3 + Ajax错误

Question

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

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

我发现这篇博客文章解释了我如何通过Javascript直接向Carrierwave提交文件.我试图实现这个但失败了.我正在使用Chrome.

我有一个名为"Recording"的上传器:

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

路线反映Recitation嵌套在名为Lesson的模型中:

resources :lessons do
    resources :parts
    resources :recitations
end

我在Recitation控制器中的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传递给控制器​​.

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(Not Found)"错误.问题似乎出现在jquery.js中的一些AJAX相关行中,但我猜.非常感谢任何见解.

Answer 1

我认为您的问题与 AJAX 行中使用的 url 有关：

 $.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'
});