RecordRTC:Ondataavailable 调用了两次.只有第一个文件是正确的，其他文件已损坏或太小 [英] RecordRTC: Ondataavailable called twice. Only first file is proper, others are corrupted or too small

问题描述

我想以2秒的间隔记录本地和远程流并用Ajax上传到服务器.但问题是，ondataavailable 方法被调用了两次，所以同一个视频被上传到服务器两次.第一个视频是可播放且正确的，而其余视频要么已损坏，要么非常小(不到一秒).所有视频的大小几乎相同！

I want to record local and remote stream at the interval of 2 seconds and upload it to the server with Ajax. But the problem is, the method ondataavailable is called twice so the same video is uploaded to the server twice. The first video is playable and proper, while the rest of the videos are either corrupted or very small (less than one second). The size of all the videos is almost the same!

我也尝试过 MediaRecorder API，但问题是一样的.我已经尝试了 5 秒的间隔，但仍然没有运气！

I've tried with MediaRecorder API also but the problem is the same. I've tried with 5 seconds of the interval but still no luck!

这是我获取本地流的方式:

This is how I get the local stream:

navigator.mediaDevices.getUserMedia({
    video: false,
    audio: true
}).then(function (myStream) {
    localStream = myStream;

    localStream.getTracks().forEach(function (track) {
        yourConn.addTrack(track, localStream);
    });
}).catch(function (error) {
    streamAdded = false;
    console.warn('Could not detect microphone');
    return false;
});

这就是我进行录音的方式:

This is how I perform recording:

yourConn.ontrack = function (e) {
   remoteVideo.srcObject = e.streams[0];

   let recorder = RecordRTC([localStream, e.streams[0]], {
      mimeType: 'video/webm;codecs=h264',
      type: 'video',
      timeSlice: 5000,
      ondataavailable: function(blob) {
        uploadBlob(blob);
      },
   });

   recorder.startRecording();
}

uploadBlob 函数:

uploadBlob function:

var formData = new FormData();
formData.append('recorded_file', mp4File);

$.ajax({
    url: myURL,
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function (response) {
        console.log(response);
    }
});

如何在没有任何问题的情况下录制两个流?

How can I record both the streams without any issues?

推荐答案

我已经通过停止和重启方法解决了这个问题.当我得到第一个 blob 时，我将停止记录器，然后上传它并再次启动记录器.这样每次我都能得到完整的视频.

I've solved this issue by Stop and Restart method. I'm stoping the recorder when I get the first blob, then I upload it and start the recorder again. So that every time I get a complete video.

function initRecorder(remoteStream) {
    recorder = RecordRTC([stream, remoteStream], {
       type: 'video',
    });

    recorder.startRecording();
}

// in ontrack method:

initRecorder(remoteStream);  // initially start recording

let recordingInterval = setInterval(function () {
    if (!callInfo.isCallActive) clearInterval(recordingInterval);

    recorder.stopRecording(function () {
        let blob = recorder.getBlob();
        if(callInfo.isCallActive) {
            initRecorder(remoteStream);  // restart recording
        }
        if (blob.size) { // prevent empty blobs
            uploadBlob(blob, roomId);
        }
    });
}, 5000);

这篇关于RecordRTC:Ondataavailable 调用了两次.只有第一个文件是正确的，其他文件已损坏或太小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！