How to capture the video to the server using getusermedia

Question

In my application, I want the user to record his video. Then the video should be downloaded to the Server disk. But it is downloading to the client browser. How can i save the 2 or 3 min video to the server. I have used getusermedia for this. I have written code like:

(function(exports) {
exports.URL = exports.URL || exports.webkitURL;
exports.requestAnimationFrame = exports.requestAnimationFrame ||
    exports.webkitRequestAnimationFrame || exports.mozRequestAnimationFrame ||
    exports.msRequestAnimationFrame || exports.oRequestAnimationFrame;

exports.cancelAnimationFrame = exports.cancelAnimationFrame ||
    exports.webkitCancelAnimationFrame || exports.mozCancelAnimationFrame ||
    exports.msCancelAnimationFrame || exports.oCancelAnimationFrame;

navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
    navigator.msGetUserMedia;

var ORIGINAL_DOC_TITLE = document.title;
var video = $('video');
var canvas = document.createElement('canvas'); 
var rafId = null;
var startTime = null;
var endTime = null;    

function $(selector) {
    return document.querySelector(selector) || null;
}

function toggleActivateRecordButton() {
    var b = $('#record-me');
    b.textContent = b.disabled ? 'Record' : 'Recording...';
    b.classList.toggle('recording');
    b.disabled = !b.disabled;
}

function turnOnCamera(e) {
    e.target.disabled = true;
    $('#record-me').disabled = false;

    video.controls = false;

    var finishVideoSetup_ = function() {

        setTimeout(function() {
            video.width = 320;
            video.height = 240;           
            canvas.width = video.width;
            canvas.height = video.height;
        }, 1000);
    };       

    navigator.getUserMedia({video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        finishVideoSetup_();
    }, function(e) {           
        video.src = 'Chrome_ImF.mp4';
        finishVideoSetup_();
    });

    if (navigator.getUserMedia) {
        navigator.getUserMedia({ audio: true }, onRecordSucces, onFail);
    } else {
        console.log('navigator.getUserMedia not to present');
    }


};

function record() {
    var elapsedTime = $('#elasped-time');
    var ctx = canvas.getContext('2d');
    var CANVAS_HEIGHT = canvas.height;
    var CANVAS_WIDTH = canvas.width;
    frames = []; // clear existing frames;
    startTime = Date.now();
    toggleActivateRecordButton();
    $('#stop-me').disabled = false;
    function drawVideoFrame_(time) {
        rafId = requestAnimationFrame(drawVideoFrame_);
        ctx.drawImage(video, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        document.title = 'Recording...' + Math.round((Date.now() - startTime) / 1000) + 's';  
        var url = canvas.toDataURL('image/webp', 1); 
        frames.push(url);
    };
    rafId = requestAnimationFrame(drawVideoFrame_);
    startRecording();
};

function stop() {
    cancelAnimationFrame(rafId);
    endTime = Date.now();
    $('#stop-me').disabled = true;
    document.title = ORIGINAL_DOC_TITLE;
    toggleActivateRecordButton();    
    embedVideoPreview();
};


function embedVideoPreview(opt_url) {
    var url = opt_url || null;
    var video = $('#video-preview video') || null;
    var downloadLink = $('#video-preview a[download]') || null;

    if (!video) {
        video = document.createElement('video');
        video.autoplay = true;
        video.controls = true;       
        video.style.width = canvas.width + 'px';
        video.style.height = canvas.height + 'px';
        $('#video-preview').appendChild(video);

        downloadLink = document.createElement('a');
        downloadLink.download = 'capture.webm';
        downloadLink.textContent = '[ download video ]';
        downloadLink.title = 'Download your .webm video';
        var p = document.createElement('p');
        p.appendChild(downloadLink);

        $('#video-preview').appendChild(p);

    } else {
        window.URL.revokeObjectURL(video.src);
    }



    if (!url) {
        webmBlob = Whammy.fromImageArray(frames, 1000 / 60);
        url = window.URL.createObjectURL(webmBlob);

    video.src = url;
    downloadLink.href = url;
}

function initEvents() {
    $('#camera-me').addEventListener('click', turnOnCamera);
    $('#record-me').addEventListener('click', record);
    $('#stop-me').addEventListener('click', stop);
}

initEvents();

exports.$ = $;

})(window);

When i am clicking on the download link it is downloaded to the user browser. But i want to send the data to server and save it in the server disk. I have tried to pass the webmblob data to the controller and retrieve. But it is not accessing. I have written code like

 $.ajax({
     url: '/Home/VideoData',
     type: 'POST',
     dataType: 'blob',
     cache: false,
     data: {
           data: webmblob
           },
     contentType: "application/json; charset=utf-8",
     error: function (xhr, status, error) {
     },
     success: function () {

     },
   });

In the controller i have defined like

  public ActionResult VideoData(string data)
  {
      return Json("success", JsonRequestBehavior.AllowGet);
  }

But the data coming to the controller like [object blob]. Sorry for my English. Hope you understand my question. How can i convert it to the video. Any help is surely appreciated.

Answer 1

The Media Recorder API is now supported by both Chrome (49+) and Firefox (30+) and it relies on getUserMedia() to access the webcam.

The video data is stored locally in a JavaScript video/webm Blob object and can be:

• played back in a <video> element
• downloaded to the client computer as a .webm file
• uploaded (POSTed) to a webserver for storage and conversion

This article covers the spec in detail and here's a live demo + GitHub project. Spec is avb. at w3c

Answer 2

MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams . It allows web apps to create a file from a live audio/video session.

<video autoplay></video>

<script language="javascript" type="text/javascript">
function onVideoFail(e) {
    console.log('webcam fail!', e);
  };

function hasGetUserMedia() {
  // Note: Opera is unprefixed.
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  // Good to go!
} else {
  alert('getUserMedia() is not supported in your browser');
}

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || 
                         navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || 
                           navigator.msGetUserMedia;

var video = document.querySelector('video');
var streamRecorder;
var webcamstream;

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    webcamstream = stream;
//  streamrecorder = webcamstream.record();
  }, onVideoFail);
} else {
    alert ('failed');
}

function startRecording() {
    streamRecorder = webcamstream.record();
    setTimeout(stopRecording, 10000);
}
function stopRecording() {
    streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {

    var data = {};
    data.video = videoblob;
    data.metadata = 'test metadata';
    data.action = "upload_video";
    jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
    alert ('video uploaded');
}

</script>

<div id="webcamcontrols">
    <button class="recordbutton" onclick="startRecording();">RECORD</button>
</div>

Spec:

http://www.w3.org/TR/mediastream-recording/

you can get recorder media file, send it to the server.