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

时间:2017-11-07 10:12:35

标签: html5 amazon-web-services amazon-s3 mediarecorder mediarecorder-api

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

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

用户点击跟踪代码段后的“录制音频/视频”按钮时,会立即调用:

 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?即在录制阶段,它应该上传。 或者还有其他方式上传它吗?在用户关闭浏览器之前

1 个答案:

答案 0 :(得分:0)

  

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

     

那么有没有一种将视频实时上传到S3的方法?

您使用了错误的技术来实现这一目标,如果您需要确保同时同时在服务器端上传/录制了录音,那么您应该使用WebRTC(网络实时通信)。

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

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