Cross browser audio/video/screen recording via webRTC – MediaStreamRecorder

MediaStreamRecorder.js is a cross-browser implementation to record audio & video streams via WebRTC. The lib allows you to submit/upload recorded blobs in realtime to your server.

Record audio+video in Chrome

<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>


<script>


var mediaConstraints = {

    audio: true,

    video: true


};

 
navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

 

function onMediaSuccess(stream) {

    var multiStreamRecorder = new MultiStreamRecorder(stream);

    multiStreamRecorder.video = yourVideoElement; // to get maximum accuracy

    multiStreamRecorder.audioChannels = 1;

    multiStreamRecorder.ondataavailable = function (blobs) {

        // blobs.audio

        // blobs.video

    };

    multiStreamRecorder.start(3 * 1000);

}
 

function onMediaError(e) {

    console.error('media error', e);

}

</script>

Uploading and receiving via PHP

<?php

foreach(array('video', 'audio') as $type) {

    if (isset($_FILES["${type}-blob"])) {

 
        $fileName = $_POST["${type}-filename"];

        $uploadDirectory = "uploads/$fileName";

 
        if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) {

            echo("problem moving uploaded file");

        }

 
        echo($uploadDirectory);

    }

}
?>

API documentation / GitHub