使用JavaScript或Angular CLI将视频文件作为blob上载到AWS S3

我正在从Mediarecorder API录制和存储视频数据。JavaScript如下：

<button id="start-recording">Start Recording</button>
<button id="stop-recording" disabled>Stop Recording</button>

<video controls autoplay></video>

<script>

let videoStream;
let recorder;
let isRecording = false
let blobsArray = [];

navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true
    })
 .then(function (stream) {
    videoStream = stream;
    document.getElementById('video').setAttribute('src', window.URL.createObjectURL(stream));
})


function videoDataHandler (event) {
    var blob = event.data;
    document.getElementById('blob-video').setAttribute('src', window.URL.createObjectURL(blob));
};


var createMediaPlayer = function () {
    window.recorder = new MediaRecorder(videoStream, {
        mimeType: 'video/webm'
    });
    window.recorder.ondataavailable = videoDataHandler;
};


var recordButton = document.getElementById('record');
recordButton.addEventListener('click', function (e) {
    isRecording = true;
    createMediaPlayer();
    window.recorder.start();
});

var stopButton = document.getElementById('stop');
stopButton.addEventListener('click', function (e) {
    isRecording = false;
    window.recorder.stop();
});

</script>

开始录制
停止录音
让视频流；
让录音机；
让isRecording=false
设blobsArray=[]；
navigator.mediaDevices.getUserMedia({
音频：是的，
视频：真的
})
.then（函数（流）{
视频流=视频流；
document.getElementById（'video'）.setAttribute（'src'，window.URL.createObjectURL（stream））；
})
函数videoDataHandler（事件）{
var blob=event.data；
document.getElementById（'blob-video'）.setAttribute（'src'，window.URL.createObjectURL（blob））；
};
var createMediaPlayer=函数（）{
window.recorder=新媒体记录器（视频流{
mimeType:“视频/webm”
});
window.recorder.ondataavailable=videoDataHandler；
};
var recordButton=document.getElementById（'record'）；
recordButton.addEventListener（'click'，函数（e）{
isRecording=true；
createMediaPlayer（）；
window.recorder.start（）；
});
var stopButton=document.getElementById（'stop'）；
stopButton.addEventListener（'click'，函数（e）{
isRecording=false；
window.recorder.stop（）；
});

它可以完美地用于摄像和录音

如果您要检查该元素，则在浏览器中检查video src或“Copy video Address”，它是一个blob URI

我试图找出这个视频在浏览器中的存储位置，但现在我需要的是，我想以某种方式将这个视频存储在AWS S3中

我使用multer-s3（node）和预签名URL（angularcli）尝试了一个简单的演示，用于一个简单的视频文件

我发现很难将JavaScript SDK教程与AWS文档联系起来并实现这一点

我跟着这个

我需要知道

如何将视频文件（通过blob URI）或其他方式（如果有的话）上载到 亚马逊S3。 视频URL类似于以下“blob: a012-0e184cec44c9“

我看到，这段视频存储在浏览器中的什么地方，仍然缺少 清晰

---

如果要在计算机上保存视频，可以使用下一个功能：

函数saveVideo（）{
var video=document.getElementById（'video'）；
var a=document.createElement（“a”）；
文件.正文.附件（a）；
a、 style=“显示：无”；
a、 href=video.src；
a、 下载='video.webm'；
a、 单击（）；
}
saveVideo（）请查找以下代码。这对我有用。一旦停止录制，获取blob并将其转换为文件并上传到S3

 let blob = recorder.getBlob()
 let file = new File([this.modelBlob], 'filename', { type: 'video/webm',    lastModified: Date.now() })
await this.uploadFilesToS3('webm','videos',file,'myfile')

 async uploadFilesToS3(extension,path,file,fileName) {
    return new Promise(async (resolve, reject) => {
      const bucket = new S3(
        {
          accessKeyId: "**your accesskey**",
          secretAccessKey: "**your s3SecretAccessKey**",
          region: "**your awsRegion **"
        }
      );
      const params = {
        Bucket: environment.bucketName,
        Key: path+ "/" + fileName+ extension,
        Body: file
      };
      bucket.upload(params,async(err,data)=>{
             if(data){
                  console.log("Video uploaded")
               }
               if(err){
                  console.log("Video uploaded failed")
               }
         })
    })
  }


你不能从浏览器上传它。您需要先将其发送到您的服务器，该服务器保存您的S3凭据，并且可以安全地连接到它并发送文件。@JeremyThille哦，我明白了，我正在开发一个视频通话应用程序，客户端的要求是尽可能在前端进行录制和上传。我在研究我的POC。我想在视频通话/录制完成时发出一个上传事件，将blob推送到S3。"".  所以，如果我必须通过服务器，或者无论如何，我该如何使用这个blob URI，我确实看到许多帖子仍然不清楚。@JeremyThille是错的。您应该能够做到这一点，而无需先上传到服务器，这只会浪费您的CPU和带宽。您可以通过服务器生成一个预先签名的url来实现这一点。呃，您混合了浏览器和节点API。不可能有任何方法可以直接将blob从ondataavailable方法流式传输到存储，而不是等待完整的文件？