2

在客户端，用户使用RecordRTC录制短视频。当用户按下上传时，我将blob使用 获取视频的数据recorder.getBlob()，并将其上传到我的服务器（使用 Rails 和回形针处理文件上传）。

起初，我想将<input type='file'>字段值更改为blob数据。事实证明，为了浏览器的安全性，我无法使用 javascript 更改它。

然后，我尝试使用 AJAX：

$("#ajax-submit").on("click", function() {
    var data = new FormData();

    data.append("record[video]", recorder.getBlob(), (new Date()).getTime() + ".webm");

    var oReq = new XMLHttpRequest();
    oReq.open("POST", "/records/");
    oReq.send(data);
    oReq.onload = function(oEvent) {
        if (oReq.status == 200) {
            console.log("Uploaded");
        } else {
            console.log("Error " + oReq.status + " occurred uploading your file.");
        }
    };
});

但是，它不起作用。在log文件中，我将得到以下无法处理的信息：

Processing by RecordsController#create as */*
Parameters: {
  "video"=>"data:video/webm;base64,GkXfo0AgQoaBAUL3gQFC8o..."
}

如果我使用 正常提交form，我的参数将如下所示：

Processing by RecordsController#create as HTML
Parameters: {
    "video"=>#<ActionDispatch::Http::UploadedFile:0x3b476e0 @original_filename="testing.mp4", @content_type="video/mp4", @headers="Content-Disposition: form-data; name=\"record[video]\"; filename=\"testing.mp4\"\r\nContent-Type: video/mp4\r\n", @tempfile=#<File:a_path>>
}

我该如何解决这个问题？

非常感谢。

4

2 回答 2

2

最后，问题的原因是blob返回的文件recorder.getBlob()不是实际的blob. 请参阅muaz-khan的答案。

我在 RecordRTC 中添加了以下行来获取真实的blob并执行相同的 AJAX 提交。现在一切正常。

         getBlob: function () {
             return blobURL2;
         },
+        getRealBlob: function() {
+            return blobURL;
+        },
于 2013-06-12T06:44:13.430 回答
2

我在我的一个项目中处理了同样的问题。情况是 API 必须将 blob 数据转换为移动设备发送的图像文件。我假设要在您的控制器文件中上传操作。

def upload
  #extract the video data from params
  video = params[:video]

  # define the save path for the video. I am using public directory for the moment. 
  save_path = Rails.root.join("public/videos/#{video.original_filename}")

  # Open and write the file to file system.
  File.open(save_path, 'wb') do |f|
    f.write params[:video].read
  end

  render :nothing => true
end
于 2013-06-11T16:52:59.693 回答