如何在删除音轨时清除html视频元素

Question

下面的代码几乎满足了我的要求：

video = document.querySelector('video');
video.srcObject = new MediaStream();
navigator.mediaDevices.getUserMedia({video: true}).then(stream => {
stream.getTracks().forEach(track => {
video.srcObject.addTrack(track);
});
});
setTimeout(() => {
video.srcObject.getVideoTracks().forEach(track => {
track.stop()
video.srcObject.removeTrack(track);
});
}, 5000);

它启动相机并在屏幕上显示结果。5秒钟后，相机再次停止。但是，摄像机的最后一个图像在视频中仍保留为冻结帧。如何清除视频元素？

(注意，我只删除了视频曲目，所以可能仍有音频曲目在播放。(

编辑：我把问题的音频部分搞砸了。在真正的代码中，有音轨应该继续播放，我只是忘了将它们添加到示例中。

Answer 1

您的代码正在从MediaStream中删除所有曲目，而不仅仅是视频曲目。要只删除视频，你需要做

video.srcObject.getVideoTracks().forEach(track => {
track.stop()
video.srcObject.removeTrack(track);
});

请注意getTracks是如何替换为getVideoTracks的。

但即便如此，来自视频轨道的最后一帧也很可能仍然停留在<video>元素中。要消除它，但保留音轨，您最好从音轨创建一个新的MediaStream，并将其设置为<video>:的新srcObject

自StackSnippet的iframe以来，此fiddle的代码不允许调用getUserMedia。

(async ()=>{
const video = document.querySelector('video');
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true } );
video.srcObject = stream;
video.play();
btn.onclick = e => {
stream.getVideoTracks().forEach( vidTrack => vidTrack.stop() );
const new_stream = new MediaStream(stream.getAudioTracks());
video.srcObject = new_stream;
btn.remove();
}
})();

<button id="btn">keep only audio</button>
<video controls autoplay></video>

如果你想用纯色(例如黑框(代替它，那么你可以将CanvasCaptureStreamTrack与音轨一起传递，并在源<canvas>:fiddle 上绘制该纯色