MediaStreamRecorder - Recording Audio Issue

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));
    });
}

What Happened To The Experts Here? Please do respond, in need. — Saurabh Datta

rkj rkj · Accepted Answer · 2013-10-28T06:13:55

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);
});

MediaStreamRecorder - Recording Audio Issue

1 Answers