All Projects → streamproc → Mediastreamrecorder

streamproc / Mediastreamrecorder

Licence: mit
Cross browser audio/video/screen recording. It supports Chrome, Firefox, Opera and Microsoft Edge. It even works on Android browsers. It follows latest MediaRecorder API standards and provides similar APIs.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to Mediastreamrecorder

Rtcmulticonnection
RTCMultiConnection is a WebRTC JavaScript library for peer-to-peer applications (screen sharing, audio/video conferencing, file sharing, media streaming etc.)
Stars: ✭ 2,187 (-8.15%)
Mutual labels:  webrtc, webrtc-demos, webrtc-experiments
foxrtc
media sdk based on webrtc
Stars: ✭ 36 (-98.49%)
Mutual labels:  webrtc, webrtc-demos, webrtc-experiments
Recordrtc
RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
Stars: ✭ 5,008 (+110.33%)
Mutual labels:  webrtc, mediarecorder, mediastreamrecorder
Webrtc Experiment
WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
Stars: ✭ 10,335 (+334.06%)
Mutual labels:  webrtc, webrtc-demos, webrtc-experiments
Webrtc android
webrtc VideoCall VideoConference 视频通话 视频会议
Stars: ✭ 764 (-67.91%)
Mutual labels:  webrtc, webrtc-demos
Webrtc
A reference gradle project that let you explore WebRTC Android in Android Studio.
Stars: ✭ 562 (-76.4%)
Mutual labels:  webrtc, webrtc-demos
Cuckoo
🎥 Cuckoo - A free anonymous video-calling web application built with WebRTC and React that provides peer-to-peer video and audio communication in a web browser with no plugins or extensions required.
Stars: ✭ 195 (-91.81%)
Mutual labels:  webrtc, webrtc-demos
Learning Webrtc
Codes and notes while learning webrtc
Stars: ✭ 98 (-95.88%)
Mutual labels:  webrtc, webrtc-demos
webrtc-hotwire-rails
A video chat app demonstration using Hotwire and Ruby on Rails
Stars: ✭ 38 (-98.4%)
Mutual labels:  webrtc, webrtc-demos
Analysisavp
音视频学习,相关文件格式/协议分析。h264 nalu aac adts flv
Stars: ✭ 38 (-98.4%)
Mutual labels:  webrtc, webrtc-demos
Translator
Translator.js is a JavaScript library built top on Google Speech-Recognition & Translation API to transcript and translate voice and text. It supports many locales and brings globalization in WebRTC! https://www.webrtc-experiment.com/Translator/
Stars: ✭ 103 (-95.67%)
Mutual labels:  webrtc, webrtc-demos
Detectrtc
DetectRTC is a tiny JavaScript library that can be used to detect WebRTC features e.g. system having speakers, microphone or webcam, screen capturing is supported, number of audio/video devices etc. https://www.webrtc-experiment.com/DetectRTC/
Stars: ✭ 509 (-78.62%)
Mutual labels:  webrtc, webrtc-demos
Samples
WebRTC Web demos and samples
Stars: ✭ 11,318 (+375.35%)
Mutual labels:  webrtc, webrtc-demos
Webrtc Text Chat Tutorial
WebRTC Chat Tutorial for Scaledrone Realtime Messaging Service
Stars: ✭ 24 (-98.99%)
Mutual labels:  webrtc, webrtc-demos
Starrtc Web Demo
一对一voip视频聊天,直播连麦,多人视频会议,在线会议web演示:
Stars: ✭ 281 (-88.2%)
Mutual labels:  webrtc, webrtc-demos
Webrtc Demo
webrtc 演示示例
Stars: ✭ 74 (-96.89%)
Mutual labels:  webrtc, webrtc-demos
Webrtc Data Channel Demo
WebRTC Data Channel demo
Stars: ✭ 116 (-95.13%)
Mutual labels:  webrtc, webrtc-demos
Workerman Webrtc
php webrtc demo based on workerman
Stars: ✭ 161 (-93.24%)
Mutual labels:  webrtc, webrtc-demos
singo
Simple WebRTC Signaling Server written in Go
Stars: ✭ 57 (-97.61%)
Mutual labels:  webrtc, webrtc-demos
React Webrtc
Video chat using webRTC and react
Stars: ✭ 168 (-92.94%)
Mutual labels:  webrtc, webrtc-demos

MediaStreamRecorder.js - Demos

npm downloads Build Status: Linux

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

  1. Camera
  2. Microphone
  3. Screen (full screen, apps' screens, tab, HTML elements)
  4. 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 msr

Now 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);

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 milliseconds

ondataavailable

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'; // GifRecorder

bitsPerSecond

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

  1. Muaz Khan
  2. neizerth
  3. andersaloof

License

MediaStreamRecorder.js library is released under MIT licence.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].