将 HTML5 MediaRecorder 录制视频实时上传到 AWS S3答案

【问题标题】：Upload HTML5 MediaRecorder's recorded video to AWS S3 in realtime将 HTML5 MediaRecorder 录制视频实时上传到 AWS S3
【发布时间】：2018-04-19 16:40:04
【问题描述】：

我想录制视频并实时上传到 AWS S3。

到目前为止我所做的事情。

只要用户点击录制音频/视频按钮，下面的代码 sn-ps 就会被调用：

 navigator.getUserMedia({ audio: true,video: true }, function (stream) {

  mediaRecorder = new MediaRecorder(stream, {mimeType: 'video/webm'});
  mediaRecorder.onstop = handleStop;
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(); 
}

在停止录制音频/视频按钮上，我正在将视频上传到 AWS S3：

AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId:  // . Enter your identity pool
            RoleArn: // . Enter RoleArn

    });

    AWS.config.credentials.get(function(err) {
        if (err) alert(err);
        console.log(AWS.config.credentials);
    });

    var bucketName = ''; // Enter your bucket name
    var bucket = new AWS.S3({
        params: {
            Bucket: bucketName
        }
    });
          mediaRecorder.stop();
          var blob = new Blob(recordedBlobs, {type: 'video/webm' });
          var file = new File([blob],   'testVideo.webm');
          var objKey = 'testing/' + file.name;
          var params = {
                Key: objKey,
                ContentType: file.type,
                Body: file,
                ACL: 'public-read'
            };

            bucket.putObject(params, function(err, data) {
                if (err) {

                    console.log(" Error while  UPLOADING Video :");
                } else {
                    console.log(" Success UPLOADING Video :");
                }
            });

一切正常。点击停止录制，视频上传成功。

视频大小从 100MB 到 3GB

不等

现在的问题是，如果用户关闭浏览器，则在上传视频时上传失败。

那么有没有办法将视频实时上传到 S3？即在录制阶段它应该被上传。或者有没有其他方法可以上传？在用户关闭浏览器之前。

【问题讨论】：

标签： html amazon-web-services amazon-s3 mediarecorder mediarecorder-api

【解决方案1】：

现在的问题是，在上传视频时，如果用户关闭浏览器，则上传失败。

那么有没有办法将视频实时上传到S3？

您使用了错误的技术来实现这一点，如果您需要确保记录在服务器端同时上传/记录，那么您应该查看 WebRTC（Web 实时通信）。

媒体记录器几乎总是具有更高（无损）的质量，用户上传速度通常不会跟上，因此即使立即开始上传块，它也会越来越多地被缓冲以供上传。另一方面，WebRTC（应该）调整上传流的质量以匹配遇到的网络条件（有损）。

对于开箱即用的解决方案，请尝试 OpenTok 或 Twilio 之类的解决方案，这两种解决方案都非常简单。

【讨论】：