recordrtc
Version:
RecordRTC is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.
401 lines (342 loc) • 15.3 kB
HTML
<!--
> Muaz Khan - www.MuazKhan.com
> MIT License - www.WebRTC-Experiment.com/licence
> Documentation - github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC
-->
<html lang="en">
<head>
<title>MRecordRTC: WebRTC audio+video recording ® Muaz Khan</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
<style>
audio {
vertical-align: bottom;
width: 10em;
}
video {
max-width: 100%;
vertical-align: top;
}
input {
border: 1px solid #d9d9d9;
border-radius: 1px;
font-size: 2em;
margin: .2em;
width: 30%;
}
p,
.inner {
padding: 1em;
}
li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
}
label {
display: inline-block;
width: 8em;
}
</style>
<script>
document.createElement('article');
document.createElement('footer');
</script>
<!-- script used for audio/video/gif recording -->
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/gif-recorder.js"></script>
<script src="https://cdn.webrtc-experiment.com/getMediaElement.js"></script>
<!-- for Edige/FF/Chrome/Opera/etc. getUserMedia support -->
<script src="https://cdn.webrtc-experiment.com/gumadapter.js"></script>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC">MRecordRTC</a>: <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC</a> audio+video recording ®
<a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>
</h1>
<p>
<a href="https://www.webrtc-experiment.com/">HOME</a>
<span> © </span>
<a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
<a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
<a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
<a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
<a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
</p>
</header>
<div class="github-stargazers"></div>
<section class="experiment">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="get">Get</button>
<button id="save" disabled>Save</button>
<div id="videos-container"></div>
<audio id="audio"></audio>
</section>
<section class="experiment">
<h2 class="header">
RecordRTC <a href="https://github.com/muaz-khan/RecordRTC">Sources Codes</a> / <a href="https://github.com/muaz-khan/RecordRTC/wiki">Wiki Pages</a>
</h2>
<ol>
<li>
<a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC Main Demo</a> (Records screen/video/audio in all browsers!)
</li>
<li>
<a href="https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/">Canvas Recording!</a> (Web-Page Recording)
</li>
<li>
<a href="https://www.webrtc-experiment.com/RecordRTC/MRecordRTC/">MRecordRTC and writeToDisk/getFromDisk!</a>
</li>
<li>
<a href="https://www.webrtc-experiment.com/RecordRTC/AudioVideo-on-Firefox.html">Audio+Video Recording on Firefox</a>
</li>
<li>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/PHP-and-FFmpeg">
RecordRTC / PHP / FFmpeg
</a> (Syncing/Merging audio/video in single file!)
</li>
<li>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-Nodejs">RecordRTC-to-Nodejs</a> (used ffmpeg to merge wav/webm in single WebM container)
</li>
<li>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-PHP">RecordRTC-to-PHP</a> (audio/video recording and uploading to server)
</li>
<li>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-ASPNETMVC">RecordRTC-to-ASP.NET MVC</a> (audio/video recording and uploading to server)
</li>
<li>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-over-Socketio">RecordRTC-to-Socket.io</a> (used ffmpeg to merge wav/webm in single WebM container)
</li>
<li><a href="https://www.webrtc-experiment.com/ffmpeg/">RecordRTC and ffmpeg-asm.js</a> (ffmpeg inside the browser!)</li>
</ol>
</section>
<script>
function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
}
var videosContainer = document.getElementById('videos-container');
var mRecordRTC = new MRecordRTC();
mRecordRTC.mediaType = {
audio: true, // or StereoAudioRecorder or MediaStreamRecorder
video: true // or WhammyRecorder or MediaStreamRecorder
};
if (webrtcDetectedBrowser === 'edge') {
// Microsoft Edge currently supports only audio and gif recording
mRecordRTC.mediaType = {
audio: StereoAudioRecorder
};
}
// mRecordRTC.bufferSize = 16384;
document.querySelector('#start').onclick = function() {
this.disabled = true;
captureUserMedia({
audio: true,
video: true
}, function(stream) {
var video = document.createElement('video');
if (webrtcDetectedBrowser === 'edge') {
video.srcObject = stream;
} else {
video.src = URL.createObjectURL(stream);
}
video.play();
var mediaElement = getMediaElement(video, {
buttons: [],
showOnMouseEnter: false,
enableTooltip: false,
onMuted: function() {
document.querySelector('#audio').muted = true;
},
onUnMuted: function() {
document.querySelector('#audio').muted = false;
document.querySelector('#audio').play();
}
});
videosContainer.appendChild(mediaElement);
mRecordRTC.addStream(stream);
mRecordRTC.startRecording();
}, function(error) {
alert(JSON.stringify(error));
});
};
document.querySelector('#stop').onclick = function() {
this.disabled = true;
mRecordRTC.stopRecording(function(url, type) {
document.querySelector(type).src = url;
document.querySelector(type).play();
// fixing firefox playback issue
if (!!navigator.mozGetUserMedia) {
document.querySelector(type).onended = function() {
document.querySelector(type).src = URL.createObjectURL(mRecordRTC.getBlob()[type]);
document.querySelector(type).play();
};
}
mRecordRTC.writeToDisk();
save.disabled = false;
});
};
document.getElementById('save').onclick = function() {
this.disabled = true;
mRecordRTC.save();
};
document.querySelector('#get').onclick = function() {
this.disabled = true;
!!navigator.webkitGetUserMedia && MRecordRTC.getFromDisk('all', function(dataURL, type) {
if (!dataURL) return;
if (type == 'audio') {
document.querySelector('#audio').src = dataURL;
}
if (type == 'video') {
var video = document.createElement('video');
video.src = dataURL;
var mediaElement = getMediaElement(video, {
buttons: ['mute-video'],
showOnMouseEnter: false,
enableTooltip: false,
onMuted: function() {
document.querySelector('#audio').muted = true;
},
onUnMuted: function() {
document.querySelector('#audio').muted = false;
document.querySelector('#audio').play();
}
});
videosContainer.appendChild(mediaElement);
document.querySelector('#audio').play();
mediaElement.media.play();
}
if (type == 'gif') {
var gifImage = document.createElement('img');
gifImage.src = dataURL;
videosContainer.appendChild(gifImage);
}
});
!!navigator.mozGetUserMedia && MRecordRTC.getFromDisk('video', function(dataURL) {
if (!dataURL) return;
var video = document.createElement('video');
video.src = dataURL;
var mediaElement = getMediaElement(video, {
buttons: ['mute-video'],
showOnMouseEnter: false,
enableTooltip: false,
onMuted: function() {
mediaElement.muted = true;
},
onUnMuted: function() {
mediaElement.muted = false;
mediaElement.play();
}
});
videosContainer.appendChild(mediaElement);
mediaElement.media.play();
});
};
window.addEventListener('beforeunload', function() {
document.querySelector('#start').disabled = false;
document.querySelector('#stop').disabled = false;
document.querySelector('#get').disabled = false;
}, false);
</script>
<section class="experiment">
<h2 class="header">Using MRecordRTC...</h2>
<p style="margin-top: 0;">
You can record audio in wav/ogg file format; and video in either webm format or as animated GIF image.</p>
</section>
<section class="experiment">
<h2 class="header">
How to use <a href="https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC">MRecordRTC</a>?</h2>
<pre>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
</pre>
</section>
<section class="experiment">
<pre>
var recorder = new MRecordRTC();
recorder.addStream(MediaStream);
recorder.mediaType = {
audio: true,
video: true,
gif: true
};
// mimeType is optional and should be set only in advance cases.
recorder.mimeType = {
audio: 'audio/wav',
video: 'video/webm',
gif: 'image/gif'
};
recorder.startRecording();
recorder.stopRecording(function(url, type) {
document.querySelector(type).src = url;
});
recorder.getBlob(function(blobs) {
blobs.audio --- audio blob
blobs.video --- video blob
blobs.gif --- gif blob
});
// or
var blobs = recorder.getBlob();
var audioBlob = blobs.audio;
var videoBlob = blobs.video;
var gifBlob = blobs.gif;
// invoke save-as dialog
// for all recorded blobs
recorder.save();
recorder.writeToDisk();
// get all blobs from disk
MRecordRTC.getFromDisk('all', function(dataURL, type) {
type == 'audio'
type == 'video'
type == 'gif'
});
// or get just single blob
MRecordRTC.getFromDisk('audio', function(dataURL) {
// only audio blob is returned from disk!
});
</pre>
</section>
<section class="experiment">
<p style="margin-top: 0;">
MRecordRTC is MIT licensed on Github! <a href="https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC">Documentation</a>
</p>
</section>
<section class="experiment own-widgets">
<h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RecordRTC/issues" target="_blank">RecordRTC Issues</a>
</h2>
<div id="github-issues"></div>
</section>
<section class="experiment">
<h2 class="header" id="feedback">Feedback</h2>
<div>
<textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
</div>
<button id="send-message" style="font-size: 1em;">Send Message</button>
<small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
</section>
<section class="experiment own-widgets latest-commits">
<h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RecordRTC/commits/master" target="_blank">Latest Updates</a>
</h2>
<div id="github-commits"></div>
</section>
</article>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC" class="fork-left"></a>
<footer>
<p>
<a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a> © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
<a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
</p>
</footer>
<!-- commits.js is useless for you! -->
<script>
window.useThisGithubPath = 'muaz-khan/RecordRTC';
</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</body>
</html>