Demos using MediaStreamRecorder.js library
| Experiment Name | Demo | Source Code |
|---|---|---|
| Audio Recording | Demo | Source |
| Video Recording | Demo | Source |
| Gif Recording | Demo | Source |
| MultiStreamRecorder Demo | Demo | Source |
A cross-browser implementation to record
- Camera
- Microphone
- Screen (full screen, apps' screens, tab, HTML elements)
- Canvas 2D as well as 3D animations (gaming/etc.)
You can record above four options altogether (in single container).
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.
| Browser | Support | Features |
|---|---|---|
| Firefox | Stable / Aurora / Nightly | Audio+Video (Both local/remote) |
| Google Chrome | Stable / Canary / Beta / Dev | Audio+Video (Both local/remote) |
| Opera | Stable / NEXT | Audio+Video (Both local/remote) |
| Android | Chrome / Firefox / Opera | Audio+Video (Both local/remote) |
| Microsoft Edge | Normal Build | Only Audio - No Video - No Canvas - No Screen |
| Safari 11 | preview | Only Audio - No Video - No Canvas - No Screen |
There is a similar project: RecordRTC! Demo - Documentation
You can install scripts using NPM:
npm install msr
# or via "bower"
bower install msrNow try node server.js and open https://localhost:9001/
var MediaStreamRecorder = require('msr');
console.log('require-msr', MediaStreamRecorder);
console.log('\n\n-------\n\n');
var recorder = new MediaStreamRecorder({});
console.log('MediaStreamRecorder', recorder);
console.log('\n\n-------\n\n');
var multiStreamRecorder = new MediaStreamRecorder.MultiStreamRecorder([]);
console.log('MultiStreamRecorder', multiStreamRecorder);- Live NPM test: https://tonicdev.com/npm/msr
Or try npm-test.js:
cd node_modules
cd msr
node npm-test.js
Then link single/standalone "MediaStreamRecorder.js" file:
<script src="./node_modules/msr/MediaStreamRecorder.js"> </script>
<!-- or bower -->
<script src="./bower_components/msr/MediaStreamRecorder.js"></script>
<!-- CDN -->
<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<!-- WWW -->
<script src="https://www.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<!-- or link specific release -->
<script src="https://github.com/streamproc/MediaStreamRecorder/releases/download/1.3.4/MediaStreamRecorder.js"></script><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 mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'video/webm';
mediaRecorder.ondataavailable = function (blob) {
// POST/PUT "Blob" using FormData/XHR2
var blobURL = URL.createObjectURL(blob);
document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
};
mediaRecorder.start(3000);
}
function onMediaError(e) {
console.error('media error', e);
}
</script>Record multiple videos in single WebM file.
var arrayOfStreams = [yourVideo, screen, remoteVideo1, remoteVideo2];
var multiStreamRecorder = new MultiStreamRecorder( arrayOfStreams );You can add additional streams at runtime:
multiStreamRecorder.addStream( anotherStream );Currently, you can only record 4-maximum videos in single WebM container.
<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script>
var mediaConstraints = {
audio: true
};
navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
function onMediaSuccess(stream) {
var mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'audio/wav'; // check this line for audio/wav
mediaRecorder.ondataavailable = function (blob) {
// POST/PUT "Blob" using FormData/XHR2
var blobURL = URL.createObjectURL(blob);
document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
};
mediaRecorder.start(3000);
}
function onMediaError(e) {
console.error('media error', e);
}
</script>mediaRecorder.stop();mediaRecorder.pause();mediaRecorder.resume();// invoke save-as dialog for all recorded blobs
mediaRecorder.save();
// or pass external blob/file
mediaRecorder.save(YourExternalBlob, 'FileName.webm');Your HTML file:
mediaRecorder.ondataavailable = function(blob) {
// upload each blob to PHP server
uploadToPHPServer(blob);
};
function uploadToPHPServer(blob) {
var file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', {
type: 'video/webm'
});
// create FormData
var formData = new FormData();
formData.append('video-filename', file.name);
formData.append('video-blob', file);
makeXMLHttpRequest('https://path-to-your-server/save.php', formData, function() {
var downloadURL = 'https://path-to-your-server/uploads/' + file.name;
console.log('File uploaded to this path:', downloadURL);
});
}
function makeXMLHttpRequest(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback();
}
};
request.open('POST', url);
request.send(data);
}Save.php file:
<?php
// via: https://github.com/muaz-khan/RecordRTC/blob/master/RecordRTC-to-PHP/save.php
header("Access-Control-Allow-Origin: *");
function selfInvoker()
{
if (!isset($_POST['audio-filename']) && !isset($_POST['video-filename'])) {
echo 'PermissionDeniedError';
return;
}
$fileName = '';
$tempName = '';
if (isset($_POST['audio-filename'])) {
$fileName = $_POST['audio-filename'];
$tempName = $_FILES['audio-blob']['tmp_name'];
} else {
$fileName = $_POST['video-filename'];
$tempName = $_FILES['video-blob']['tmp_name'];
}
if (empty($fileName) || empty($tempName)) {
echo 'PermissionDeniedError';
return;
}
$filePath = 'uploads/' . $fileName;
// make sure that one can upload only allowed audio/video files
$allowed = array(
'webm',
'wav',
'mp4',
'mp3',
'ogg'
);
$extension = pathinfo($filePath, PATHINFO_EXTENSION);
if (!$extension || empty($extension) || !in_array($extension, $allowed)) {
echo 'PermissionDeniedError';
continue;
}
if (!move_uploaded_file($tempName, $filePath)) {
echo ('Problem saving file.');
return;
}
echo ($filePath);
}
selfInvoker();
?>Regarding PHP upload issues:
Don't forget to create uploads directory here:
https://path-to-your-server/uploads/ ----- inside same directory as "save.php"
You can force StereoAudioRecorder or WhammyRecorder or similar recorders on Firefox or Edge; even on Chrome and Opera.
All browsers will be using your specified recorder:
// force WebAudio API on all browsers
// it allows you record remote audio-streams in Firefox
// it also works in Microsoft Edge
mediaRecorder.recorderType = StereoAudioRecorder;
// force webp based webm encoder on all browsers
mediaRecorder.recorderType = WhammyRecorder;
// force MediaRecorder API on all browsers
// Chrome Canary/Dev already implemented MediaRecorder API however it is still behind a flag.
// so this property allows you force MediaRecorder in Chrome.
mediaRecorder.recorderType = MediaRecorderWrapper;
// force GifRecorder in all browsers. Both WhammyRecorder and MediaRecorder API will be ignored.
mediaRecorder.recorderType = GifRecorder;To choose between Stereo or Mono audio.
It is an integer value that accepts either 1 or 2. "1" means record only left-channel and skip right-one. The default value is "2".
mediaRecorder.audioChannels = 1;Note: It requires following recorderType:
mediaRecorder.recorderType = StereoAudioRecorder;You can set following audio-bufferSize values: 0, 256, 512, 1024, 2048, 4096, 8192, and 16384. "0" means: let chrome decide the device's default bufferSize. Default value is "2048".
mediaRecorder.bufferSize = 0;Default "sampleRate" value is "44100". Currently you can't modify sample-rate in windows that's why this property isn't yet exposed to public API.
It accepts values only in range: 22050 to 96000
// set sampleRate for NON-windows systems
mediaRecorder.sampleRate = 96000;It is recommended to pass your HTMLVideoElement to get most accurate result.
videoRecorder.video = yourHTMLVideoElement;
videoRecorder.onStartedDrawingNonBlankFrames = function() {
// record audio here to fix sync issues
videoRecorder.clearOldRecordedFrames(); // clear all blank frames
audioRecorder.start(interval);
};This method allows you stop recording.
mediaRecorder.stop();This method allows you pause recording.
mediaRecorder.pause();This method allows you resume recording.
mediaRecorder.resume();This method allows you save recording to disk (via save-as dialog).
// invoke save-as dialog for all recorded blobs
mediaRecorder.save();
// or pass external blob/file
mediaRecorder.save(YourExternalBlob, 'FileName.webm');Using this property, you can pass video resolutions:
mediaRecorder.canvas = {
width: 1280,
height: 720
};You can stretch video to specific width/height:
mediaRecorder.videoWidth = 1280;
mediaRecorder.videoHeight = 720;This method allows you clear current video-frames. You can use it to remove blank-frames.
videoRecorder.video = yourHTMLVideoElement;
videoRecorder.onStartedDrawingNonBlankFrames = function() {
videoRecorder.clearOldRecordedFrames(); // clear all blank frames
audioRecorder.start(interval);
};This method allows you stop entire recording process.
mediaRecorder.stop();This method takes "interval" as the only argument and it starts recording process:
mediaRecorder.start(5 * 1000); // it takes millisecondsThis event is fired according to your interval and "stop" method.
mediaRecorder.ondataavailable = function(blob) {
POST_to_Server(blob);
};This event is fired when recording is stopped, either by invoking "stop" method or in case of any unexpected error:
mediaRecorder.onstop = function() {
// recording has been stopped.
};This property allows you set output media type:
// video:
videoRecorder.mimeType = 'video/webm';
videoRecorder.mimeType = 'video/mp4';
// audio:
audioRecorder.mimeType = 'audio/webm'; // MediaRecorderWrapper
audioRecorder.mimeType = 'audio/ogg'; // MediaRecorderWrapper
audioRecorder.mimeType = 'audio/wav'; // StereoAudioRecorder
audioRecorder.mimeType = 'audio/pcm'; // StereoAudioRecorder
// gif:
gifRecorder.mimeType = 'image/gif'; // GifRecorder// currently supported only in Firefox
videoRecorder.bitsPerSecond = 12800;// only chrome---whilst using WhammyRecorder
videoRecorder.quality = .8;// only chrome---whilst using WhammyRecorder
videoRecorder.speed = 100;MediaStreamRecorder.js library is released under MIT licence.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
