根据MDN：
The HTMLMediaElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement界面添加到HTMLElement属性
支持基本媒体相关功能所需的方法和方法
对于音频和视频来说是通用的。
HTMLMediaElement.captureStream() https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/captureStream。它可以与两者一起使用<video> and <canvas>元素来捕获它们的流。
相反，可以添加一个视频流 as srcObject to a <video>元素，然后它显示它。是否有可能<canvas>元素也？
是否有可能添加流 as source到一个html<canvas>元素？
不，任何 Canvas API 中都没有任何内容能够使用 MediaStream。
画布 API 仅适用于原始像素，并且不包含任何类型的解码器。您必须使用能够执行此解码的 javascript 对象（例如 ImageBitmap）或 HTMLElements。
因此，对于 MediaStream，目前唯一能够解码其视频内容的对象将是 HTMLVideoElement，您将能够轻松在画布上绘画 https://stackoverflow.com/questions/4429440/html5-display-video-inside-canvas.
2021年更新
The 网络编解码器 API https://w3c.github.io/webcodecs最近取得了很大的进步，并且变得越来越成熟，现在值得作为一种解决方案被提及。
这个API提供了一个新的接口，称为视频帧 https://w3c.github.io/webcodecs/#videoframe这将soon https://github.com/whatwg/html/pull/6589成为其中的一部分画布图像源 https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesourcetype，意思，我们可以直接使用drawImage, texImage2D以及到处都有这样的画布图像源可以使用。
The 媒体捕捉转换 https://github.com/w3c/mediacapture-transformW3C 小组开发了一个媒体流轨道处理器 https://w3c.github.io/mediacapture-transform/#track-processor它确实从视频 MediaStreamTrack 返回此类 VideoFrame。
因此，我们现在有一种更直接的方法将 MediaStream 渲染到画布，目前仅适用于 Chrome 浏览器#enable-experimental-web-platform-features旗帜上...
if( window.MediaStreamTrackProcessor ) {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const track = getCanvasTrack(); // MediaStream.getVideoTracks()[0]
const processor = new MediaStreamTrackProcessor( track );
const reader = processor.readable.getReader();
readChunk();
function readChunk() {
reader.read().then( ({ done, value }) => {
// the MediaStream video can have dynamic size
if( canvas.width !== value.displayWidth || canvas.height !== value.displayHeight ) {
canvas.width = value.displayWidth;
canvas.height = value.displayHeight;
}
ctx.clearRect( 0, 0, canvas.width, canvas.height );
// value is a VideoFrame
ctx.drawImage( value, 0, 0 );
value.close(); // close the VideoFrame when we're done with it
if( !done ) {
readChunk();
}
});
}
}
else {
console.error("Your browser doesn't support this API yet");
}
// We can't use getUserMedia in StackSnippets
// So here we use a simple canvas as source
// for our MediaStream.
function getCanvasTrack() {
// just some noise...
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const img = new ImageData(300, 150);
const data = new Uint32Array(img.data.buffer);
const track = canvas.captureStream().getVideoTracks()[0];
anim();
return track;
function anim() {
for( let i=0; i<data.length;i++ ) {
data[i] = Math.random() * 0xFFFFFF + 0xFF000000;
}
ctx.putImageData(img, 0, 0);
if( track.readyState === "live" ) {
requestAnimationFrame(anim);
}
}
}
<canvas></canvas>
As a 故障项目 https://simple-mediastream-to-canvas.glitch.me/ (source https://glitch.com/edit/#!/simple-mediastream-to-canvas?path=script.js）使用相机作为源。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
