@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.
182 lines (153 loc) • 5.43 kB
HTML
<!--
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Documentation - github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
-->
<html lang="en">
<head>
<title>RecordRTC / PHP / FFmpeg</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">
<style>
body,
html {
background: black;
color: white;
text-align: center;
}
button,
a {
background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #fff), color-stop(100%, #eaeaea));
background: -webkit-linear-gradient(top, #fff, #eaeaea);
background: -moz-linear-gradient(top, #fff, #eaeaea);
background: -o-linear-gradient(top, #fff, #eaeaea);
background: linear-gradient(top, #fff, #eaeaea);
border: 1px solid white;
border-radius: 5px;
color: #4f4f4f;
padding: 8px 15px;
text-decoration: none;
text-transform: capitalize;
}
button:hover,
a:hover,
button:active,
a:active,
button:focus,
a:focus {
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
background: #303030;
border-color: white;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
color: white;
}
button[disabled] {
background: transparent;
border-color: rgb(83, 81, 81);
color: rgb(139, 133, 133);
}
</style>
<!-- script used for audio/video/gif recording -->
<script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>
</head>
<body style="text-align: center;">
<h1>
RecordRTC / PHP / FFmpeg
</h1>
<section class="experiment">
<p style="text-align: center;">
<video id="preview" controls style="border: 1px solid rgb(15, 158, 238); height: 240px; max-width: 100%; vertical-align: top; width: 320px;"></video>
</p>
<button id="record">Record</button>
<button id="stop" disabled>Stop</button>
<div id="container" style="padding: 1em 2em;"></div>
</section>
<script>
function PostBlob(audioBlob, videoBlob, fileName) {
var formData = new FormData();
formData.append('filename', fileName);
formData.append('audio-blob', audioBlob);
formData.append('video-blob', videoBlob);
xhr('save.php', formData, function(ffmpeg_output) {
document.querySelector('h1').innerHTML = ffmpeg_output.replace(/\\n/g, '<br />');
preview.src = 'uploads/' + fileName + '-merged.webm';
preview.play();
preview.muted = false;
});
}
var record = document.getElementById('record');
var stop = document.getElementById('stop');
var audio = document.querySelector('audio');
var recordVideo = document.getElementById('record-video');
var preview = document.getElementById('preview');
var container = document.getElementById('container');
var recordAudio, recordVideo;
record.onclick = function() {
record.disabled = true;
!window.stream && navigator.getUserMedia({
audio: true,
video: true
}, function(stream) {
window.stream = stream;
onstream();
}, function(error) {
alert(JSON.stringify(error, null, '\t'));
});
window.stream && onstream();
function onstream() {
preview.src = window.URL.createObjectURL(stream);
preview.play();
preview.muted = true;
recordAudio = RecordRTC(stream, {
type: 'audio',
recorderType: StereoAudioRecorder,
// bufferSize: 16384,
onAudioProcessStarted: function() {
recordVideo.startRecording();
}
});
var videoOnlyStream = new MediaStream();
videoOnlyStream.addTrack(stream.getVideoTracks()[0]);
recordVideo = RecordRTC(videoOnlyStream, {
type: 'video',
// recorderType: MediaStreamRecorder || WhammyRecorder
});
recordAudio.startRecording();
stop.disabled = false;
}
};
var fileName;
stop.onclick = function() {
document.querySelector('h1').innerHTML = 'Getting Blobs...';
record.disabled = false;
stop.disabled = true;
preview.src = '';
preview.poster = 'ajax-loader.gif';
fileName = Math.round(Math.random() * 99999999) + 99999999;
recordAudio.stopRecording(function() {
document.querySelector('h1').innerHTML = 'Got audio-blob. Getting video-blob...';
recordVideo.stopRecording(function() {
document.querySelector('h1').innerHTML = 'Uploading to server...';
PostBlob(recordAudio.getBlob(), recordVideo.getBlob(), fileName);
});
});
};
function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
};
request.open('POST', url);
request.send(data);
}
</script>
</body>
</html>