Html5 video recording and upload?

html, html5-video, webrtc

Solution

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

Problem

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.

Original source