我目前正在开发一个组件,使您可以制作网络摄像头视频并将其直接上传到Amazon s3。为此,我使用RecordRTC库和Amazon S3存储。我发现了一个奇怪的问题,不确定是否与RecordRTC Blob或与Amazon配置有关。当文件大小超过1MB时,Amazon服务器将挂起,并在20秒后返回超时错误。谁能帮我解决这个问题?这是我的记录器组件代码(p()与console.log()相同):
navigator.record_function = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.record_function) {
navigator.record_function(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
$("#stop_recording").click(function () {
stream.stop();
});
// init recorders
audio_recorder = RecordRTC(stream, {type: "audio", bufferSize: 16384});
video_recorder = RecordRTC(stream, videoOptions);
}, errBack);
}
$("#start_recording").click(function () {
// record the audio and video
video_recorder.startRecording();
audio_recorder.startRecording();
});
对于上载器组件:
// Populate the Post paramters.
fd.append('key', "users/" + Main.current_user.id + "/test.webm");
fd.append('AWSAccessKeyId', msg.access_key_id);
fd.append('acl', 'private');
fd.append('policy', msg.policy);
fd.append('signature', msg.signature);
fd.append('Content-Type', '$Content-Type');
fd.append('x-amz-server-side-encryption', 'AES256');
fd.append('success_action_status', '201');
fd.append('name', 'test.webm');
fd.append('Filename', 'test.webm');
fd.append("file", file);
xhr.open('POST', 'https://' + msg.bucket + '.s3.amazonaws.com', true);
xhr.upload.addEventListener('progress', function (e) {
p(e);
}, false);
xhr.onreadystatechange = function () {
p(xhr.readyState);
};
xhr.send(fd);
$("#stop_recording").click(function () {
// stop recorders
audio_recorder.stopRecording(function () {
var audio_blob = audio_recorder.getBlob();
p(audio_blob);
// VideoUploader.upload_user_audio(audio_blob);
}
);
video_recorder.stopRecording(function () {
var video_blob = video_recorder.getBlob();
p(video_blob);
VideoUploader.upload_user_video(video_blob);
});
});
超时错误消息是:
Your socket connection to the server was not read from or written to within the timeout period. Idle connections will be closed.
感谢您能获得的任何帮助,我真的在这里迷路了。
提前致谢。
最佳答案
我设法找到了一个非常...奇怪的解决方案。看来问题出在RecordRTC保存blob对象的方式上,这使得无法在Mac上的Firefox 35中上载。我在RecordRTC中找不到导致问题的代码,Blob似乎正确生成,但是对我有用的解决方法是通过Filereader将Blob再次编码为新的Blob。
video_recorder.stopRecording(function () {
var video_blob = video_recorder.getBlob();
var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function (ex) {
arrayBuffer = this.result;
video_blob = new Blob([arrayBuffer], {type: "video/webm"});
VideoUploader.upload_user_video(video_blob)
};
fileReader.readAsArrayBuffer(video_blob);
});
至于为什么发生这种情况,我不知道,但是使用相同技术的其他项目也会受到影响http://videobooth.herokuapp.com/(在相同的浏览器中出现相同的问题,上载挂起)。也许这些信息对于RecordRTC的工作人员可能有用,因为我认为可以将这种解决方法做成一个补丁。
该解决方案已在Mac Firefox 35和Mac Chrome 40上进行了测试。