javascript 如何冻结视频MediaStreamTrack？

6tqwzwtp 于 2023-04-04 发布在 Java

关注(0)|答案(1)|浏览(123)

bounty将在3天后过期。回答此问题可获得+50声望奖励。A. Abramov希望引起更多人关注此问题。

我有一个MediaStreamTrack，它将来自用户相机的视频流传输到<video>标签上。
我想用一个静态图像来代替它。
我尝试更改enabled标志as specified in other questions（这会使图像变黑而不是冻结图像），调用stop()杀死它，或者使用ImageCapture.TakePhoto(...)生成图像，将其放入画布，并捕获画布源-这会失败，因为画布流与原始画布流不匹配，导致黑色图像。我试图用Object.defineProperty()覆盖其他属性，在调用removeTrack()后用另一个替换轨道，也没有工作。

问题：

您将如何“冻结”mediaStreamTrack，使其包含、发送和记录为静态图像？

（编者注：

这部分来自对一个（现已删除）答案的评论。它澄清了提问者的预期结果）*
你能给我举个例子，说明你是如何在将输出视频的流更改为画布流之前，从那个（网络摄像头）视频中获取画布的源代码的吗？
下面是我使用的代码：

var vid = getVideoElementFromPage();
var Stream = vid.captureStream();
var Track = Stream.getVideoTracks()[0];
var URLIdea = undefined;
new ImageCapture(Track).takePhoto().then((imCpt) => {
    URLIdea = URL.createObjectURL(imCpt);
    // Here, I've tried setting this URL to a canvas, capturing stream and changing the track,
    // or changing the video src to the URL directly. 
    // in both cases - black screen
});

JavaScript

来源：https://stackoverflow.com/questions/75870446/how-can-i-freeze-a-video-mediastreamtrack

1条答案

按热度按时间

92dk7w1h1#

要冻结视频MediaStreamTrack，您可以使用ImageCapture API从视频中捕获单个帧，然后从该帧创建新的MediaStreamTrack。以下是如何实现此目的的示例：
//获取video元素及其video track

const video = document.getElementById('my-video');
const videoTrack = video.srcObject.getVideoTracks()[0];

// Create an ImageCapture object and capture a photo
const imageCapture = new ImageCapture(videoTrack);
imageCapture.takePhoto().then(photoBlob => {
  // Create a new video track from the photo
  const photoUrl = URL.createObjectURL(photoBlob);
  const photoVideo = document.createElement('video');
  photoVideo.src = photoUrl;
  photoVideo.addEventListener('loadedmetadata', () => {
    const photoTrack = photoVideo.captureStream().getVideoTracks()[0];
    // Replace the original track with the new track
    video.srcObject.removeTrack(videoTrack);
    video.srcObject.addTrack(photoTrack);
  });
});

1.获取视频元素及其视频轨道。
2.从视频轨道创建ImageCapture对象。
3.使用takePhoto（）从视频中捕获单个帧。
4.创建一个新的video元素，并将其src属性设置为所捕获照片的URL。
5.当新视频元素已经加载其元数据时，从新视频元素的视频轨道创建新MediaStreamTrack。
6.从流中删除原始视频轨道并将新轨道添加到流中。
这将用静态图像替换原始视频流。

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 如何冻结视频MediaStreamTrack？

1条答案

相关问题

热门标签

最新问答