CanvasCaptureMediaStreamTrack 的额外属性

如何解决CanvasCaptureMediaStreamTrack 的额外属性

我有一个画布，我想要它的流并通过 webrtc 将它发送给另一个用户。我可以获取它的流并在视频标签中显示。

var canvas = document.createElement("CANVAS");
var stream = canvas.captureStream(25);
var track = stream.getVideoTracks()[0];
console.log(track);

正如您在 track Object 中看到的，有一个名为 canvas 的属性。它会导致我的代码出错，因为我使用的库需要 MediaStreamTrack 而不是包含 MediaStreamTrack 属性的 canvas。 有没有办法摆脱那个 canvas 属性？

我已经尝试删除该属性，但没有成功。而且我在下面的代码中使用了这个，但仍然不起作用。

var canvas = document.createElement("CANVAS");
var stream = canvas.captureStream(25);
var track = stream.getVideoTracks()[0];

var {canvas,...rest} = track;

console.log(canvas);
console.log(rest);

我认为 CanvasCaptureMediaStreamTrack 是一个只读变量。 我能做什么？

解决方法

更新你的库可能会很好，因为如果它因为添加的属性而失败，那么当新的属性被添加到这个界面时，它会在未来的某个时间再次失败。

您可以使用 undefined 覆盖此属性并将其设置为 Object.defineProperty：

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const stream = canvas.captureStream(25);
const track = stream.getVideoTracks()[0];
Object.defineProperty( track,"canvas",{ value: undefined } );

console.log( track.canvas,"canvas" in track ); // undefined true

您可以在 CanvasCaptureMediaStreamTrack 原型上删除此属性（从而将其从所有实例中删除）：

if( window.CanvasCaptureMediaStreamTrack ) {
  delete CanvasCaptureMediaStreamTrack.prototype.canvas
}
else { // Firefox has this property on `stream`
  delete CanvasCaptureMediaStream.prototype.canvas;
}
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const stream = canvas.captureStream(25);
const track = stream.getVideoTracks()[0];

console.log( track.canvas,"canvas" in track ); // undefined false

你甚至可以传递一个代理，

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const stream = canvas.captureStream(25);
const track = stream.getVideoTracks()[0];
const prox = new Proxy( track,{
  get( target,key ) {
    if( key === "canvas" ) {
      return undefined;
    }
    return target[ key ];
  }
});
console.log( prox.canvas,"canvas" in prox,prox.kind ); // undefined false video

但实际上，你不得不诉诸于这个只是非常难闻的气味。一方面，我非常怀疑您的库能否与当前的 Firefox 一起使用，该 Firefox 仍然使用已弃用的 CanvasCaptureMediaStream 接口而不是 CanvasCaptureMediaStreamTrack 接口。

如果您确实需要将 CanvasCaptureMediaStreamTrack 转换为裸 MediaStreamTrack，那么您可以根据需要使浏览器工作两次：

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const stream = canvas.captureStream(25);
// we need to draw something on the canvas
// for the <video> to start reading our MediaStream
ctx.fillRect(10,10,10);

const video = document.createElement("video");
video.muted = true;
video.srcObject = stream;
video.play().then(() => {
  const video_stream = video.captureStream ? video.captureStream() :
    video.mozCaptureStream();
  const track = video_stream.getVideoTracks()[0]
  console.log( track.toString(),track ); // [object MediaStreamTrack],{...}
}).catch(console.error);