Upload HTML5 MediaRecorder's recorded video to AWS S3 in realtime - html

Question

I want to record video and upload it in AWS S3 in realtime.
Things that I have done so far.
As soon as user clicks on Record Audio/Video button following code snippets gets called :
navigator.getUserMedia({ audio: true,video: true }, function (stream) {
mediaRecorder = new MediaRecorder(stream, {mimeType: 'video/webm'});
mediaRecorder.onstop = handleStop;
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
}
On Stop record Audio/Video button I'm uploading video to 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 :");
}
});
Everything works perfectly fine. Video gets uploaded successfully when clicked on stop recording.
Video size vary from 100MB to 3GB
Now the problem is while the video is getting uploaded if the user close the browser then the upload fails.
So is there a way to upload video to S3 in realtime ?? i.e during recording phase it should get uploaded.
Or is there any other way to upload it ? before user closes the browser.

Answer 1

Now the problem is while the video is getting uploaded if the user closes the browser then the upload fails.
So is there a way to upload video to S3 in real time?
You're using the wrong technology to achieve this, if you need to make sure the recording is uploaded/recorded serverside simultaneously then you should be looking at WebRTC (Web Real-Time Communications).
Media recorder will very nearly always be of a higher (lossless) quality, the users upload speed will often not keep up so it'll increasingly be buffered for upload even if start uploading chunks immediately. WebRTC on the other hand (should) adjust the quality of the stream uploaded to match the network conditions encountered (lossy).
For an out of the box solution try something like OpenTok or Twilio, both make this pretty straightforward.