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>

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

<?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

2 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Mark

7 years ago

Great example! Do you have one that includes the screen capture code as well?

Thanks.

Author

Alex

Reply to Mark

Hi Mark,
you can find an example here:
https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/video-plus-screen-recording.html

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

Record audio+video in Chrome

Uploading and receiving via PHP

Alexander

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

Record audio+video in Chrome

Uploading and receiving via PHP

Related Content

Using Web RTC in your web application

Destination Youtube: Sync WooCommerce Products & Youtube Videos

Easy Webinars with Nextcloud Talk

Alexander