5

ローカルとリモートのストリームを2秒間隔で記録し、Ajaxでサーバーにアップロードしたい。しかし問題は、メソッド ondataavailable が 2 回呼び出されるため、同じビデオがサーバーに 2 回アップロードされることです。最初のビデオは再生可能で適切ですが、残りのビデオは破損しているか非常に小さい (1 秒未満) です。すべてのビデオのサイズはほぼ同じです。

MediaRecorder API も試しましたが、問題は同じです。間隔を 5 秒にしてみましたが、まだうまくいきません!

これは、ローカル ストリームを取得する方法です。

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

これは私が録音を行う方法です：

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 関数:

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

問題なく両方のストリームを記録するにはどうすればよいですか?

4

2 に答える 2

2

(この回答はMediaRecorderをカバーしていますが、 RecordRTC JS ライブラリにも当てはまると思います。)

引数は、記録をチャンクtimeSlice: 5000にスライスし、5 秒ごとに呼び出し ます。ただし、これらのチャンクは個別に再生できません。有効なメディア コンテナー ファイルを作成するには、次のように結合する必要 があります。dataavailable

const data = [];
recorder.ondataavailable = e => data.push(e.data);
recorder.onstop = () => uploadBlob(new Blob(data, {type: data[0].type}));

最後にすべてをアップロードすることが実際的でない場合は、代わりにサーバー上の BLOB に参加することを試みることができます。

于 2019-09-04T23:31:34.060 に答える