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);
我有一个 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);