javascript - RecordRTC视频上传AmazonS3超时报错

Question

我目前正在开发一个组件，允许您制作网络摄像头视频并将它们直接上传到 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();
    });

对于 uploader 组件:

// 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.

我很感激我能得到的任何帮助，我真的迷失在这里了。提前致谢。

Answer 1

我设法为这个问题找到了一个非常...奇怪的解决方案。看来问题出在 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 上进行测试。