Upload a video file as blob to AWS S3 using JavaScript or Angular CLI

Question

I'm working on recording and storing video data from Mediarecorder API. JavaScript below:

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

It works perfectly on cameraCapture and Recording.

If you'll inspect the element, the video src or 'Copy Video Address' in browser, its a blob URI.

I'm trying to figure out where this video is stored in browser but for now my need is, I want to store this video in AWS S3 somehow.

I tried a simple demo using multer-s3 (node) and presigned URL( Angular CLI ) for a simple video file.

I'm Finding it difficult to relate JavaScript SDK tutorial on AWS docs and achieve this.

I followed this post

I need to know,

1. How to upload the video file(through blob URI) or someother means if any, to Amazon S3. The video URL is like this "blob: http://localhost:4000/3342d635-9026-4036- a012-0e184cec44c9"

2. Where is this video stored in the browser, I saw this , still lacking clarity

Answer 1

If you wanna save video on your computer you can use next function:

 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();

Or if wanna save file on server try this, but you need have 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

Please find the below code. It worked for me. Get the blob once recording stopped and convert that into file and upload it to 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")
               }
         })
    })
  }