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

Posted 2023-02-19

【中文标题】rails + WebRTC 录音 + Carrierwave + 雾 + S3 + Ajax 错误

【英文标题】：rails + WebRTC audio recording + Carrierwave + fog + S3 + Ajax error

【发布时间】：2014-11-11 23:20:07

【问题描述】：

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

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

我发现 this blog post 解释了如何通过 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（未找到）”错误。问题似乎出在 jquery.js 中一些与 AJAX 相关的行中，但我猜。希望有任何见解。

【参考方案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'
);