MediaStreamRecorder - Recording Audio Issue - html

Question

I've just rummaged through and put together an audio-video recorder that will record audio and video streams separately and upload them to my server where they'll get joined.
BUT, my implementation has the audio dropping off after a few seconds mostly 7 seconds and 14 seconds.
I'm using RecordRTC javascript library and here's the link: https://www.webrtc-experiment.com/RecordRTC.js
And here's the code:
var record = document.getElementById('replyfallback_record');
var stop = document.getElementById('replyfallback_cancel');
var audio = document.querySelector('audio');
var recordVideo = document.getElementById('record-video');
var preview = document.getElementById('replyfallback_video');
var recordAudio, recordVideo, progress;
$('#replyfallback_record').click(function(){
switch($('#replyfallback_record').text()){
case "Record":
//setup some variables
var video_constraints = {
mandatory: { },
optional: []
};
//trigger navigator.getUserMedia
navigator.getUserMedia({
audio: true,
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, {
type: 'audio',
bufferSize: 16384,
sampleRate: 45000
});
/*recordVideo = RecordRTC(stream, {
type: 'video'
});*/
recordAudio.startRecording();
//recordVideo.startRecording();
$('#replyfallback_record').text("Stop & Submit");
});
break;
case "Stop & Submit":
$('#replyfallback_record').attr('disable','disable');
fileName = uid();
recordAudio.stopRecording(function(url){
window.open(url);
});
PostBlob(recordAudio.getBlob(), 'HTML5UploadAudio', fileName);
//recordVideo.stopRecording();
//PostBlob(recordVideo.getBlob(), 'HTML5UploadVideo', fileName);
preview.src = '';
$('#replyfallback_record').text("submitting...");
break;
}
});
//basic ajax request object function
function xhr(url, data, progress, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
};
request.onprogress = function(e) {
if(!progress) return;
if (e.lengthComputable) {
progress = (e.loaded / e.total) * 100;
}
$('#replyfallback_record').text("submitting..."+progress);
if(progress == 100){
progress = 0;
}
};
request.open('POST', url);
request.send(data);
}
function PostBlob(blob, fileType, fileName) {
// FormData
var formData = new FormData();
formData.append('filename', fileName);
formData.append('blob', blob);
formData.append("function",fileType);
if(fileType=="HTML5UploadVideo"){
formData.append("CN_UL_title",$('#replyfallback_title').val());
formData.append("CN_UL_description",$('#replyfallback_desc').val());
formData.append("CN_UL_category","1");
}
// POST the Blob
xhr(SITE.api, formData, progress, function(data) {
$('#replyfallback_record').text("Record");
alert(data+" | "+getReadableFileSizeString(recordAudio.getBlob().size));
});
}

Answer 1

It is a little late reply, but may be help future visitor.
Please try PostBlob(recordAudio.getBlob(), 'HTML5UploadAudio', fileName); inside stopRecording callback function.
recordAudio.stopRecording(function(url){
PostBlob(recordAudio.getBlob(), 'HTML5UploadAudio', fileName);
window.open(url);
});