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

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

• javascript
• angular
• amazon-s3
• webrtc
• recordrtc

• You can't upload it from a browser. You need to send it to your server first, which holds your S3 credentials and can safely connect to it and send it files. – Jeremy Thille Commented Jul 20, 2018 at 14:38
• @JeremyThille Oh I see, I'm working on a video call app, client requirement is to do this recording and upload in front end possibly. I was researching for my POC. I thought of emitting an upload event upon video call/recording pletion that would push the blob to S3. "javasampleapproach./aws/…". So if i have to go via server or however, how do I do that with this blob URI, I did see many posts still unclear. – dee Commented Jul 20, 2018 at 14:56
• @JeremyThille is wrong. You should be able to do it without uploading to your server first, that just wastes your CPU and bandwidth. You can do this by the server producing a presigned url. – Callam Delaney Commented Apr 18, 2020 at 14:33

2 Answers 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")
               }
         })
    })
  }

If you wanna save video on your puter 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);