Html5 video recording and upload?

Question

I need to create an app that can record video using a webcam or mobile camera (it needs to be cross platform).

So far I have written a small proof of concept using webrtc getusermedia. It can record the video and playback but I am not sure how to get the file to upload back to the server.

Here is a link to this sample http://jsfiddle.net/3FfUP/

And the javascript code:

(function ($) {
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
var onFailSoHard = function(e) {
    console.log('Reeeejected!', e);
};
$('#capture-button').click (function () {
    console.log ("capture click!");
    if (navigator.getUserMedia) {
        // Not showing vendor prefixes.
        navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);

            // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
            // See crbug.com/110938.
            video.onloadedmetadata = function(e) {
                // Ready to go. Do some stuff.
            };
        }, onFailSoHard);
    } else {
        video.src = 'somevideo.webm'; // fallback.
    }
});
$('#stop-button').click (function (e) {
    video.pause ();
    localMediaStream.stop ();
});
})(jQuery);

How can I get what is recorded in this sample as a file so that it can be uploaded to the server.

Eric Bidelman describes a method for recording .webm from getUserMedia: http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia. recorder.js (or even RecorderJS) might also be useful. — Sam Dutton, Feb 21 '13 at 12:16
There is a W3C working draft proposal for recording API at [http://lists.w3.org/Archives/Public/public-media-capture/2012Dec/att-0159/RecordingProposal.html](http://lists.w3.org/Archives/Public/public-media-capture/2012Dec/att-0159/RecordingProposal.html) However, neither [Firefox](http://www.webrtc.org/firefox#TOC-Recording-API) nor Chrome have implemented it yet. It looks promising though. — ghendricks, May 24 '13 at 16:17

score 7 · Answer 1 · answered Aug 06 '13 at 00:50

Hi sorry if this is kinda late, but here is how i managed to make the file upload to a server, I really don't have an idea if this is the best way to achieve this but i hope it helps to give you a clue.Following the tutorial Eric Bidelman wrote (as Sam Dutton commented) what you get is a blob, so I made a XMLHttpRequest to get the video and set the response type as blob, afterwards I created a FormData in which I appended the response, this will allow the blob to be sent to the server.Here is how my function looks like.

function sendXHR(){
    //Envia bien blob, no interpretado
    var xhr = new XMLHttpRequest();
    var video=$("#myexportingvideo");
    xhr.open('GET', video.src , true);
    xhr.responseType = 'blob';
    xhr.onload = function(e) {
    if (this.status == 200) {
        // Note: .response instead of .responseText
        var blob = new Blob([this.response], {type: 'video/webm'});
        console.log(blob.size/1024);
        console.log(blob.type);
        form = new FormData(),
        request = new XMLHttpRequest();
        form.append("myblob",blob,"Capture.webm");
        form.append("myname",$("#name_test").value);
        request.open("POST","./UploadServlet",true);
        request.send(form);
       }
    };
    xhr.send();
}

This seems like it should work, but I get a 404 status when trying to fetch the BLOB. My question and code can be viewed here: http://stackoverflow.com/questions/27707322/xmlhttprequest-status-of-404-with-blob-url — RickyAYoder, Dec 31 '14 at 23:20

score 2 · Answer 2 · answered Feb 20 '13 at 11:21

2

You can record video and audio separately. You can get files (WAV/WebM) and upload them on demand. webkitMediaStream takes two objects 1) audioTracks and 2) videoTracks. You may be able to combine both audio/video recorded streams!

answered Feb 20 '13 at 11:21

Muaz Khan

7,138
9
41
77

score 1 · Answer 3 · answered Jan 05 '17 at 21:56

I know I'm a few years late to the party, but here is a snippet that's capable of capturing video and uploading it to the included node.js server as a webm file. I've tested in Chrome and Firefox.

https://gist.github.com/rissem/d51b1997457a7f6dc4cf05064f5fe984

score -3 · Answer 4 · answered Dec 22 '14 at 18:02

-3

The only cross platform web video recorder is the HDFVR webcam video recorder software.

It uses Flash (records using Flash codecs + streams to a media server) on the desktop and the HTML Media Capture API (record using OS + upload to webserver) on mobile to record video from pretty much any desktop or mobile browser.

You can link it to a ffmpeg installation to convert everything to a cross platform format like MP4 (iOS records to a .mov container that doesn't play on Android) and it also has a JS API.

answered Dec 22 '14 at 18:02

octavn

3,154
32
49

Can I use it without installing media server as i need only to record and save video to server ? – Kamal Kumar Apr 28 '16 at 05:09
`The only cross platform...` is obviously untrue(at least now) when HTML5 supports it. http://www.w3.org/TR/mediastream-recording/. – 0xc0de Sep 21 '16 at 18:29
Media Recorder API does not yet work on IE, Edge & Safari https://addpipe.com/blog/mediarecorder-api/ – octavn Sep 22 '16 at 07:59

Html5 video recording and upload?

4 Answers4

Linked