@vikasietum_tecknology/record-rtc
Version:
record-rtc is a library based on recordrtc library. In this forked version of the original library we have optimized the memory management. The video recording is stored in IndexDB in chunks.
351 lines (302 loc) • 12.8 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>Audio+Video Recording using MRecordRTC</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://www.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://www.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://www.webrtc-experiment.com/DetectRTC.js"></script>
<script src="https://www.webrtc-experiment.com/gif-recorder.js"></script>
<script src="https://www.webrtc-experiment.com/getMediaElement.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
Audio+Video Recording using MRecordRTC
</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>
<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 (WebAssembly also supports audio-encoding however not implemented in WebAssemblyRecorder YET)
video: true // or WhammyRecorder or MediaStreamRecorder or WebAssemblyRecorder or CanvasRecorder
};
if (DetectRTC.browser.name === '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');
video.autoplay = true;
video.srcObject = stream;
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).srcObject = null;
document.querySelector(type).src = url;
document.querySelector(type).play();
// fixing firefox playback issue
if (!!navigator.mozGetUserMedia) {
document.querySelector(type).onended = function() {
document.querySelector(type).srcObject = null;
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://www.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://www.webrtc-experiment.com/commits.js" async></script>
</body>
</html>