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

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

javascript

Javascript 删除曲目时如何清除html视频元素,javascript,html5-video,getusermedia,mediastream,Javascript,Html5 Video,Getusermedia,Mediastream,下面的代码基本上满足了我的要求： video=document.querySelector（'video'）； video.srcObject=new MediaStream（）； navigator.mediaDevices.getUserMedia（{video:true}）。然后（stream=>{ stream.getTracks（）.forEach（track=>{ video.srcObject.addTrack（track）； }); }); 设置超时（（）=>{ video.sr

下面的代码基本上满足了我的要求：

video=document.querySelector（'video'）；
video.srcObject=new MediaStream（）；
navigator.mediaDevices.getUserMedia（{video:true}）。然后（stream=>{
stream.getTracks（）.forEach（track=>{
video.srcObject.addTrack（track）；
});
});
设置超时（（）=>{
video.srcObject.getVideoTracks（）.forEach（track=>{
跟踪。停止（）
video.srcObject.removeTrack（track）；
});
}, 5000);

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

（请注意，我只删除了视频曲目，因此可能仍在播放音频曲目。）

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

您的代码正在从媒体流中删除所有曲目，而不仅仅是视频曲目。要仅删除视频，请执行以下操作

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

注意

getTracks

是如何被

getVideoTracks

替换的

但即使如此，视频曲目的最后一帧可能仍然很好地保留在

元素中。要摆脱它，但保留音频曲目，最好从音频曲目创建一个新的媒体流，并将其设置为

的新对象：

因为StackSnippet的iframe不允许调用getUserMedia的代码

（异步（）=>{
const video=document.querySelector（'video'）；
const stream=wait navigator.mediaDevices.getUserMedia（{video:true，audio:true}）；
video.srcObject=流；
video.play（）；
btn.onclick=e=>{
stream.getVideoTracks（）.forEach（vidTrack=>vidTrack.stop（））；
const new_stream=新媒体流（stream.getAudioTracks（））；
video.srcObject=新的\u流；
删除（）；
}
})();

仅保留音频

如果您想用纯色（例如黑色边框）替换它，那么您可以将CanvasCaptureStreamTrack与音频曲目一起传递，并在源代码上绘制该纯色：

您的代码将从媒体流中删除所有曲目，而不仅仅是视频曲目。要仅删除视频，请执行以下操作

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

注意

getTracks