@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.
211 lines (167 loc) • 7.58 kB
HTML
<!--
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Experiments - github.com/muaz-khan/RecordRTC
-->
<html>
<head>
<meta charset="utf-8" />
<title>RecordRTC to Node.js</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">
<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; }
audio, video {
border: 1px solid rgb(15, 158, 238); width: 94%;
}
button[disabled], input[disabled] { background: rgba(216, 205, 205, 0.2); border: 1px solid rgb(233, 224, 224);}
</style>
</head>
<body>
<h1>RecordRTC to Node.js</h1>
<p>
<video></video>
</p><hr />
<div>
<label id="percentage">0%</label>
<progress id="progress-bar" value=0></progress><br />
</div>
<hr />
<div>
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled="">Stop Recording</button>
</div>
<script src="/node_modules/recordrtc/RecordRTC.js"> </script>
<script>
// fetching DOM references
var btnStartRecording = document.querySelector('#btn-start-recording');
var btnStopRecording = document.querySelector('#btn-stop-recording');
var videoElement = document.querySelector('video');
var progressBar = document.querySelector('#progress-bar');
var percentage = document.querySelector('#percentage');
var recorder;
// reusable helpers
// this function submits recorded blob to nodejs server
function postFiles() {
var blob = recorder.getBlob();
// getting unique identifier for the file name
var fileName = generateRandomString() + '.webm';
var file = new File([blob], fileName, {
type: 'video/webm'
});
videoElement.src = '';
videoElement.poster = '/ajax-loader.gif';
xhr('/uploadFile', file, function(responseText) {
var fileURL = JSON.parse(responseText).fileURL;
console.info('fileURL', fileURL);
videoElement.src = fileURL;
videoElement.play();
videoElement.muted = false;
videoElement.controls = true;
document.querySelector('#footer-h2').innerHTML = '<a href="' + videoElement.src + '">' + videoElement.src + '</a>';
});
if(mediaStream) mediaStream.stop();
}
// XHR2/FormData
function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
};
request.upload.onprogress = function(event) {
progressBar.max = event.total;
progressBar.value = event.loaded;
progressBar.innerHTML = 'Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%";
};
request.upload.onload = function() {
percentage.style.display = 'none';
progressBar.style.display = 'none';
};
request.open('POST', url);
var formData = new FormData();
formData.append('file', data);
request.send(formData);
}
// generating random string
function generateRandomString() {
if (window.crypto) {
var a = window.crypto.getRandomValues(new Uint32Array(3)),
token = '';
for (var i = 0, l = a.length; i < l; i++) token += a[i].toString(36);
return token;
} else {
return (Math.random() * new Date().getTime()).toString(36).replace( /\./g , '');
}
}
var mediaStream = null;
// reusable getUserMedia
function captureUserMedia(success_callback) {
var session = {
audio: true,
video: true
};
navigator.getUserMedia(session, success_callback, function(error) {
alert('Unable to capture your camera. Please check console logs.');
console.error(error);
});
}
// UI events handling
btnStartRecording.onclick = function() {
btnStartRecording.disabled = true;
captureUserMedia(function(stream) {
mediaStream = stream;
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
videoElement.muted = true;
videoElement.controls = false;
recorder = RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
// enable stop-recording button
btnStopRecording.disabled = false;
});
};
btnStopRecording.onclick = function() {
btnStartRecording.disabled = false;
btnStopRecording.disabled = true;
recorder.stopRecording(postFiles);
};
window.onbeforeunload = function() {
startRecording.disabled = false;
};
</script>
<footer style="width:100%;position: fixed; right: 0; text-align: center;color:red;">
<h2 id="footer-h2"></h2>
Questions?? <a href="mailto:muazkh@gmail.com">muazkh@gmail.com</a>
<br><br>
Open-Sourced here:<br>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-Nodejs">https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-Nodejs</a>
</footer>
</body>
</html>