MediaStreamRecorder.js - Demos
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
| 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
How to link scripts?
You can install scripts using NPM:
npm install msr # or via "bower" bower install msrNow try node server.js and open https://localhost:9001/
Test on NPM
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>Record audio+video
<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
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.
Record audio/wav
<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>How to manually stop recordings?
mediaRecorder.stop();How to pause recordings?
mediaRecorder.pause();How to resume recordings?
mediaRecorder.resume();How to save recordings?
// invoke save-as dialog for all recorded blobs mediaRecorder.save(); // or pass external blob/file mediaRecorder.save(YourExternalBlob, 'FileName.webm');Upload to PHP Server
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" API Documentation
recorderType
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;audioChannels
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;bufferSize
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;sampleRate
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;video
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); };stop
This method allows you stop recording.
mediaRecorder.stop();pause
This method allows you pause recording.
mediaRecorder.pause();resume
This method allows you resume recording.
mediaRecorder.resume();save
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');canvas
Using this property, you can pass video resolutions:
mediaRecorder.canvas = { width: 1280, height: 720 };videoWidth and videoHeight
You can stretch video to specific width/height:
mediaRecorder.videoWidth = 1280; mediaRecorder.videoHeight = 720;clearOldRecordedFrames
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); };stop
This method allows you stop entire recording process.
mediaRecorder.stop();start
This method takes "interval" as the only argument and it starts recording process:
mediaRecorder.start(5 * 1000); // it takes millisecondsondataavailable
This event is fired according to your interval and "stop" method.
mediaRecorder.ondataavailable = function(blob) { POST_to_Server(blob); };onstop
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. };mimeType
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'; // GifRecorderbitsPerSecond
// currently supported only in Firefox videoRecorder.bitsPerSecond = 12800;quality
// only chrome---whilst using WhammyRecorder videoRecorder.quality = .8;speed
// only chrome---whilst using WhammyRecorder videoRecorder.speed = 100;Contributors
License
MediaStreamRecorder.js library is released under MIT licence.
