CanvasCaptureMediaStreamTrack 的额外 属性

Extra property of CanvasCaptureMediaStreamTrack

我有一个 canvas,我想要它的流并通过 webrtc 将它发送给另一个用户。我可以得到它的流并在视频标签中显示它。

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

正如您在跟踪对象中看到的那样,有一个名为 canvas 的 属性。它会导致我的代码出错,因为我使用的库需要 MediaStreamTrack 而不是包含 canvas 属性 的 MediaStreamTrack。 有没有办法摆脱那个 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 一起使用,它仍然使用已弃用的 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,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);