如何冻结视频 MediaStreamTrack？

Question

我有一个 MediaStreamTrack，它将用户相机中的视频流式传输到 Google Meets 中的

<video>

标签上。

作为 chrome 扩展程序运行，我想将其替换为只是静态图像的曲目。

我已经尝试更改

enabled

标志如其他问题中指定（将其变为黑色而不是冻结图像），调用 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
});

Answer 1

要将 MediaStreamTrack“冻结”为静态图像，您可以创建一个以画布为源的新 MediaStreamTrack，然后用新轨道替换原始轨道。这是一个例子：

// Get the video element and its MediaStreamTrack
const video = document.getElementById('video');
const track = video.srcObject.getVideoTracks()[0];

// Create a new canvas element and context
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');

// Draw the current frame of the video onto the canvas
ctx.drawImage(video, 0, 0);

// Create a new MediaStreamTrack with the canvas as its source
const stream = canvas.captureStream();
const newTrack = stream.getVideoTracks()[0];

// Replace the original track with the new track
const newStream = new MediaStream([newTrack]);
video.srcObject = newStream;

// Stop the original track to release the camera resources
track. Stop();

注意 这种做法只是冻结视频的当前帧，不会随着视频的变化继续更新图像。如果您想将视频冻结在特定帧并随着视频的进行继续显示该帧，您需要修改代码以定期使用所需帧更新画布。

Answer 2

如果

video.srcObject = newStream

 对您不起作用并且 

srcObject

 属性仍然是旧流，则可能是您的代码中某处存在对旧流的另一个引用，从而阻止它被垃圾收集。在这种情况下，您可以尝试释放对旧流的所有引用，然后再将新流设置为

srcObject

。这是如何执行此操作的示例：

// Get the video element and its MediaStreamTrack
const video = document.getElementById('video');
const oldStream = video.srcObject;
const track = oldStream.getVideoTracks()[0];

// Stop the original track to release the camera resources
track.stop();

// Create a new canvas element and context
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');

// Draw the current frame of the video onto the canvas
ctx.drawImage(video, 0, 0);

// Create a new MediaStreamTrack with the canvas as its source
const stream = canvas.captureStream();
const newTrack = stream.getVideoTracks()[0];

// Replace the original stream with the new stream
video.srcObject = stream;

// Release the old stream by setting its srcObject to null
oldStream.getTracks().forEach(track => track.stop());
video.srcObject = null;