navigator.mediaDevices.getUserMedia()
を使用してユーザーのオーディオとビデオをキャプチャし、MediaRecorder
そのondataavailable
ビデオとオーディオのブロブをローカルに保存して後でアップロードします。
現在、何らかの理由でondataavailable
が録音の途中で呼び出されなくなるという問題に対処しています。理由がわからず、何か問題が発生したというアラートが表示されません。まず、なぜこれが発生するのか、エラーをキャッチする方法を知っている人はいますか?
第二に、私は再現しようとしました。このようなことをすることによって。
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(camera) {
local_media_stream = camera;
camera.getVideoTracks()[0].onended = function() { console.log("VIDEO ENDED") }
camera.getAudioTracks()[0].onended = function() { console.log("Audio ENDED") }
camera.onended = function() { console.log("--- ENDED") }
camera.onremovetrack = (event) => { console.log(`${event.track.kind} track removed`); };
}).catch(function(error) {
alert('Unable to capture your camera. Please check logs.' + error);
console.error(error);
});
そして、ストリームを記録します
recorder = new MediaRecorder(local_media_stream, {
mimeType: encoding_options,
audioBitsPerSecond: 128000,
videoBitsPerSecond: bits_per_second,
});
recorder.ondataavailable = function(e) {
save_blob(e.data, blob_index)
blob_index++;
}
recorder.onstop = function(e) {
console.log("recorder stopped");
console.log(e)
}
recorder.onerror = function(error) {
console.log("recorder error");
alert(error)
throw error;
}
recorder.onstart = function() {
console.log('started');
};
recorder.onpause = function() {
console.log('paused');
};
recorder.onresume = function() {
console.log('resumed');
};
recorder.start(15000)
次に、ストリームを手動で強制終了して、発生している問題を再現できることを願っています。
local_media_stream.getVideoTracks()[0].stop()
Nowondataavailable
は呼び出されなくなりましたが、onended イベントは呼び出されませんでした。レコーディングはまだ進行中で、local_media_stream
はまだアクティブです。
オーディオも殺したら
local_media_stream.getAudioTracks()[0].stop()
現在local_media_stream
はアクティブではありませんが、イベントは呼び出されず、ストリームが停止し、レコーダーはまだ実行されていますが、呼び出されていませんondatavailable
。
私に何ができる?ローカル ストリームが正常に記録されていることを知りたいのですが、アラートが表示されない場合は、少なくとも記録が保存されていないことをユーザーに通知できます。