MediaStreamRecorder - 录制音频问题

时间:2013-10-13 09:52:15

标签: html5 api html5-audio

我刚刚翻找并组装了一个音频录像机,它将分别录制音频和视频流,并将它们上传到我们的服务器,然后它们就会加入。

但是,我的实现让音频在几秒钟后大多数时间下降了7秒14秒。

我正在使用RecordRTC javascript库,这里是链接:https://www.webrtc-experiment.com/RecordRTC.js

这是代码:         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));
    });
}

1 个答案:

答案 0 :(得分:0)

这是一个稍晚的回复,但可能会帮助未来的访客。

请在stopRecording回调函数中尝试 PostBlob(recordAudio.getBlob(),'HTML5UploadAudio',fileName);

recordAudio.stopRecording(function(url){
    PostBlob(recordAudio.getBlob(), 'HTML5UploadAudio', fileName);
    window.open(url);
});