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