Video+Audio in a Single file

[harshadura]

This is a great job indeed. Is it possible to output the recorded audio+video stream in a single file rather in two files? Thanks

[zhuochun]

It is incapable to record both audio and video streams in a single file now.

• Audio is recorded using Web Audio APIs.
• Video is recorded using Canvas2D.

You have to merge both files at server using FFmpeg or other tools.

[harshadura]

This would be a great feature @zhuochun , do you have any ideas to develop this feature in future ?

[zhuochun]

There is a MediaRecorder API. Now only available in Firefox Aurora/Nightly. Maybe that could achieve this.

[harshadura]

Hi @zhuochun, where are those webm and wav files gets saved. Do i need to develop those stuff to get saved the Files or is it already developed ?

Thanks!

[zhuochun]

The files exist in memory as blob files.

If you want to upload them to server, you can use formData:

var data = new FormData();

data.append("video", videoBlob, (new Date()).getTime() + ".webm");
data.append("audio", audioBlob, (new Date()).getTime() + ".wav");

// then post it using `XMLHttpRequest`

If you want to allow user download it after recording directly, you need to use FileReader, the code would look like this:

var reader = new FileReader();
reader.onload = function(e) {
    directDownloadLink(e.target.result);
};
reader.readAsDataURL(videoBlob);

function directDownloadLink(dataURL) {
    var hyperlink = document.createElement('a');
    hyperlink.href = dataURL;
    hyperlink.target = '_blank';
    hyperlink.download =  (new Date()).getTime() + ".webm";

    var evt = new window.MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true
    });

    hyperlink.dispatchEvent(evt);

    (window.URL || window.webkitURL).revokeObjectURL(hyperlink.href);
}

[muaz-khan]

Try virtual URL instead; to handle stuff like Aw, Snap:

var virtualURL = (window.URL || window.webkitURL).createObjectURL(videoBlob);
directDownloadLink( virtualURL );

[harshadura]

Thanks @zhuochun and @muaz-khan