在客户端,用户使用RecordRTC录制短视频。当用户按下上载时,我将使用来获取视频的blob数据recorder.getBlob(),并将其上载到我的服务器(使用Rails和回形针处理文件上载)。
blob
recorder.getBlob()
首先,我想将<input type='file'>字段值更改为blob数据。事实证明,为了确保浏览器的安全性,我无法使用javascript对其进行更改。
<input type='file'>
然后,我尝试使用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档案上,我将得到以下内容,无法处理:
log
Processing by RecordsController#create as */* Parameters: { "video"=>"data:video/webm;base64,GkXfo0AgQoaBAUL3gQFC8o..." }
如果我正常使用提交form,则参数将如下所示:
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>> }
我该如何解决这个问题?
非常感谢。
最后,问题的原因是blob从传回的档案recorder.getBlob()不是实际的blob。请参阅muaz- khan的答案。
我在RecordRTC中添加了以下几行,以获取真实内容blob并执行相同的AJAX提交。现在一切正常。
getBlob: function () { return blobURL2; }, + getRealBlob: function() { + return blobURL; + },