A cross-browser implementation to record audio/video streams:
- MediaStreamRecorder can record both audio and video in single WebM file on Firefox.
- MediaStreamRecorder can record audio as WAV and video as either WebM or animated gif on Chrome.
MediaStreamRecorder is useful in scenarios where you're planning to submit/upload recorded blobs in realtime to the server! You can get blobs after specific time-intervals.
=
There is a similar project: RecordRTC! Demo — Documentation
=
<script src="//www.webrtc-experiment.com/MediaStreamRecorder.js"> </script>var mediaConstraints = {
audio: true, // don't forget audio!
video: true // don't forget video!
};
navigator.mozGetUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
function onMediaSuccess(stream) {
var mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'video/webm';
mediaRecorder.ondataavailable = function (blob) {
// POST/PUT "Blob" using FormData/XHR2
window.open(URL.createObjectURL(blob));
};
mediaRecorder.start(3000);
}
function onMediaError(e) {
console.error('media error', e);
}=
mediaRecorder.stop();=
<script src="//www.webrtc-experiment.com/MediaStreamRecorder.js"> </script>var mediaConstraints = {
audio: true
};
navigator.mozGetUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
function onMediaSuccess(stream) {
var mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'audio/ogg';
mediaRecorder.ondataavailable = function (blob) {
// POST/PUT "Blob" using FormData/XHR2
window.open(URL.createObjectURL(blob));
};
mediaRecorder.start(3000);
}
function onMediaError(e) {
console.error('media error', e);
}=
<script src="//www.webrtc-experiment.com/MediaStreamRecorder.js"> </script>var mediaConstraints = {
video: true
};
navigator.mozGetUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
function onMediaSuccess(stream) {
var mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'video/webm';
// for gif recording
// mediaRecorder.mimeType = 'image/gif';
mediaRecorder.videoWidth = 320;
mediaRecorder.videoHeight = 240;
mediaRecorder.ondataavailable = function (blob) {
// POST/PUT "Blob" using FormData/XHR2
window.open(URL.createObjectURL(blob));
};
mediaRecorder.start(3000);
}
function onMediaError(e) {
console.error('media error', e);
}=
PHP code:
<?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);
}
}
?>JavaScript Code:
var fileType = 'video'; // or "audio"
var fileName = 'ABCDEF.webm'; // or "wav" or "ogg"
var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);
xhr('save.php', formData, function (fileURL) {
window.open(fileURL);
});
function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
callback(location.href + request.responseText);
}
};
request.open('POST', url);
request.send(data);
}=
| Browser | Support |
|---|---|
| Firefox | Stable / Aurora / Nightly |
| Google Chrome | Stable / Canary / Beta / Dev |
| Android | Chrome Beta |
=
Demos using MediaStreamRecorder.js library
| Experiment Name | Demo | Source Code |
|---|---|---|
| Audio Recording | Demo | Source |
| Video/Gif Recording | Demo | Source |
=
=
MediaStreamRecorder.js library is released under MIT licence.