@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.
232 lines (185 loc) • 6.93 kB
HTML
<!--
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// RecordRTC - github.com/muaz-khan/RecordRTC
// RecordRTC over
// Socket.io - https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-over-Socketio
-->
<html>
<head>
<meta charset="utf-8" />
<title>RecordRTC over Socket.io</title>
<script>
if (location.href.indexOf('file:') == 0) {
document.write('<h1 style="color:red;">Please load this HTML file on HTTP or HTTPS.</h1>');
}
</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<script src="/node_modules/recordrtc/RecordRTC.js">
</script>
<script src="/socket.io/socket.io.js">
</script>
<style>
html {
background-color: #f7f7f7;
}
body {
background-color: white;
border: 1px solid rgb(15, 158, 238);
margin: 1% 35%;
text-align: center;
}
hr {
border: 0;
border-top: 1px solid rgb(15, 158, 238);
}
a {
color: #2844FA;
text-decoration: none;
}
a:hover,
a:focus {
color: #1B29A4;
}
a:active {
color: #000;
}
</style>
</head>
<body>
<h1><a href="https://github.com/muaz-khan/RecordRTC">RecordRTC</a> <a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-over-Socketio">over Socket.io</a>
</h1>
<p>
<video id="camera-preview" style="border: 1px solid rgb(15, 158, 238); width: 94%;"></video>
</p>
<div style="display:none;">
<label id="percentage">Ffmpeg Progress 0%</label>
<progress id="progress-bar" value="0" max="100"></progress>
<br />
</div>
<div>
<button id="start-recording" disabled>Start Recording</button>
<button id="stop-recording" disabled>Stop Recording</button>
</div>
<script>
if (false /* for Microsoft Edge */) {
var cameraPreview = document.getElementById('camera-preview');
cameraPreview.parentNode.innerHTML = '<audio id="camera-preview" controls style="border: 1px solid rgb(15, 158, 238); width: 94%;"></audio> ';
}
var socketio = io();
var mediaStream = null;
socketio.on('connect', function() {
startRecording.disabled = false;
});
var startRecording = document.getElementById('start-recording');
var stopRecording = document.getElementById('stop-recording');
var cameraPreview = document.getElementById('camera-preview');
var progressBar = document.querySelector('#progress-bar');
var percentage = document.querySelector('#percentage');
var recordAudio, recordVideo;
startRecording.onclick = function() {
startRecording.disabled = true;
navigator.getUserMedia({
audio: true,
video: true
}, function(stream) {
mediaStream = stream;
recordAudio = RecordRTC(stream, {
type: 'audio',
recorderType: StereoAudioRecorder,
onAudioProcessStarted: function() {
recordVideo.startRecording();
cameraPreview.src = window.URL.createObjectURL(stream);
cameraPreview.play();
cameraPreview.muted = true;
cameraPreview.controls = false;
}
});
var videoOnlyStream = new MediaStream();
stream.getVideoTracks().forEach(function(track) {
videoOnlyStream.addTrack(track);
});
recordVideo = RecordRTC(videoOnlyStream, {
type: 'video',
recorderType: !!navigator.mozGetUserMedia ? MediaStreamRecorder : WhammyRecorder
});
recordAudio.startRecording();
stopRecording.disabled = false;
}, function(error) {
alert(JSON.stringify(error));
});
};
stopRecording.onclick = function() {
startRecording.disabled = false;
stopRecording.disabled = true;
// stop audio recorder
recordAudio.stopRecording(function() {
// stop video recorder
recordVideo.stopRecording(function() {
// get audio data-URL
recordAudio.getDataURL(function(audioDataURL) {
// get video data-URL
recordVideo.getDataURL(function(videoDataURL) {
var files = {
audio: {
type: recordAudio.getBlob().type || 'audio/wav',
dataURL: audioDataURL
},
video: {
type: recordVideo.getBlob().type || 'video/webm',
dataURL: videoDataURL
}
};
socketio.emit('message', files);
if (mediaStream) mediaStream.stop();
});
});
cameraPreview.src = '';
cameraPreview.poster = 'ajax-loader.gif';
});
});
// if firefox or if you want to record only audio
// stop audio recorder
recordAudio.stopRecording(function() {
// get audio data-URL
recordAudio.getDataURL(function(audioDataURL) {
var files = {
audio: {
type: recordAudio.getBlob().type || 'audio/wav',
dataURL: audioDataURL
}
};
socketio.emit('message', files);
if (mediaStream) mediaStream.stop();
});
cameraPreview.src = '';
cameraPreview.poster = 'ajax-loader.gif';
});
};
socketio.on('merged', function(fileName) {
var href = (location.href.split('/').pop().length ? location.href.replace(location.href.split('/').pop(), '') : location.href);
href = href + '/uploads/' + fileName;
console.log('got file ' + href);
cameraPreview.src = href
cameraPreview.play();
cameraPreview.muted = false;
cameraPreview.controls = true;
});
socketio.on('ffmpeg-output', function(result) {
if (parseInt(result) >= 100) {
progressBar.parentNode.style.display = 'none';
return;
}
progressBar.parentNode.style.display = 'block';
progressBar.value = result;
percentage.innerHTML = 'Ffmpeg Progress ' + result + "%";
});
socketio.on('ffmpeg-error', function(error) {
alert(error);
});
</script>
</body>
</html>