删除曲目时如何清除 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

this fiddle 的代码，因为不允许 StackSnippet 的 iframe 调用 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

删除曲目时如何清除 html 视频元素

How to clear html video element when removing track

javascript

html5-video

getusermedia

mediastream