Question

我正在从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>

它可完美地用于cameraCapture和Recording。

如果您要在浏览器中检查元素，视频src或“复制视频地址”，则其为blob URI。

我试图弄清楚该视频在浏览器中的存储位置，但目前，我需要将该视频存储在AWS S3中。

我尝试了一个简单的演示，其中使用multer-s3（节点）和预先签名的URL（Angular CLI）来制作简单的视频文件。

我发现很难将AWS SDK上的JavaScript SDK教程与之相关联。

我遵循了这个post

我需要知道

如何通过blob URI或其他方式将视频文件上传到亚马逊S3。视频网址就像这样的“斑点：http://localhost:4000/3342d635-9026-4036- a012-0e184cec44c9“
该视频存储在浏览器中的什么位置，我看到this仍然缺少清晰度

Answer 1

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

function saveVideo () {
  var video = document.getElementById('video');
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = video.src;
  a.download = 'video.webm';
  a.click();
}

saveVideo();

或者如果要在服务器上保存文件，请尝试此操作，但是您需要使用node.js：

var blob = 'link on your blob file';
var fileReader = new FileReader();
fileReader.onload = function () {
  var filePath = 'video.webm'
  var buffer = Buffer.from(this.result);

  fs.writeFile(filePath, buffer, 'binary', function (err) {
    if (err) {
      console.error("err", err);
    console.log("file saved!");
  });
};
fileReader.oneror = function (err) {
    if (err) throw err;
};
fileReader.readAsArrayBuffer(blob);

Answer 2

请找到以下代码。它对我有用。记录停止后获取 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")
               }
         })
    })
  }

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

2 个答案: