I am building an application for ASP.Net MVC 5, in which I need to record a live video and audio stream from the webcam/microphone. I have decided to use your web app based solution, RecordRTC. I have used the demo from, your github as a starting point, and modified it for my specifications.
The problem I am having is that I am unable to determine how to reduce the size of the webm that is being created. Right now it is about 1.7MB a second, my goal is for it to be 4-10MB a minute.
Also the file that is created from this does not possess time metadata, meaning I cannot use the seek-bar to go to a specific time. i.e. it says 3 secs have elapsed 0 remain, and still runs.
Any help would be appreciated.
NOTE: I am aware that support for the below code will only work in Firefox. I will simply wait for Chrome to add support, and therefore have removed the workaround you have in the demo for Chrome..
< script >
//script 1
document.createElement('article')< /script>
<script>
//script 2
function PostBlob(blob, fileType, fileName) {
/ / FormData
var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);
// progress-bar
var hr = document.createElement('hr');
container.appendChild(hr);
var strong = document.createElement('strong');
strong.id = 'percentage';
strong.innerHTML = fileType + ' upload progress: ';
container.appendChild(strong);
var progress = document.createElement('progress');
container.appendChild(progress);
// POST the Blob using XHR2
xhr('/Video/PostRecordedAudioVideo', formData, progress, percentage, function(fName) {
container.appendChild(document.createElement('hr'));
var mediaElement = document.createElement(fileType);
var source = document.createElement('source');
source.src = location.href + 'Files/' + fName.replace(/"/g, '');
if (fileType == 'video') source.type = 'video/webm; codecs="vp8, vorbis"';
if (fileType == 'audio') source.type = 'audio/ogg';
mediaElement.appendChild(source);
mediaElement.controls = true;
container.appendChild(mediaElement);
mediaElement.play();
progress.parentNode.removeChild(progress);
strong.parentNode.removeChild(strong);
hr.parentNode.removeChild(hr);
});
}
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;
navigator.getUserMedia({
audio: {
mandatory: {
googEchoCancellation: false,
googAutoGainControl: false,
googNoiseSuppression: false,
googHighpassFilter: false,
sampleRate: true
},
optional: []
},
video: true
}, function(stream) {
preview.src = window.URL.createObjectURL(stream);
preview.play();
//var legalBufferValues = [256, 512, 1024, 2048, 4096, 8192, 16384];
// sample-rates in at least the range 22050 to 96000.
recordAudio = RecordRTC(stream, {
onAudioProcessStarted: function() {}
});
recordAudio.startRecording();
stop.disabled = false;
}, function(error) {
alert(JSON.stringify(error, null, '\t'));
});
};
var fileName;
stop.onclick = function() {
record.disabled = false;
stop.disabled = true;
preview.src = '';
fileName = Math.round(Math.random() * 99999999) + 99999999 + ".webm";
recordAudio.stopRecording(function(url) {
preview.src = url;
PostBlob(blob, 'video', fileName);
});
};
function xhr(url, data, progress, percentage, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
};
if (url.indexOf('/Video/DeleteFile') == -1) {
request.upload.onloadstart = function() {
percentage.innerHTML = 'Upload started...';
};
request.upload.onprogress = function(event) {
progress.max = event.total;
progress.value = event.loaded;
percentage.innerHTML = 'Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%";
};
request.upload.onload = function() {
percentage.innerHTML = 'Saved!';
};
}
request.open('POST', url);
request.send(data);
}; < /script>
<!-- language: lang-html -->
@{ ViewBag.Title = "Video Record"; }
<--Script 1 goes here-->
<!-- script used for audio/video/gif recording -->
@Scripts.Render("~/bundles/RTCRecording")
<article>
<section class="experiment">
<p style="text-align:center;">
<video id="preview" controls style="border: 1px solid rgb(15, 158, 238);"></video>
</p>
<hr />
<button id="record">Record</button>
<button id="stop" disabled>Stop</button>
<div id="container" style="padding:1em 2em;"></div>
</section>
<--Script 2 goes here-->
</article>