我目前正在开发一个API，它将videoTrack作为输入并返回处理后的videoTrack。我已经设法在画布上绘制处理过的视频，并希望使用canvas.captureStream()从中捕获视频流。
事实证明，只有当我将画布加载到DOMdocument.body.appendChild(myTempCanvas)并保持它显示时，我才能捕获非空白流，如果我隐藏画布myTempCanvas.style.display="none"，流变为空白。
那么有什么方法可以捕获流并保持画布隐藏吗?
示例:如果取消canvas.style.display = "none";行注释，那么output_video也变为空白。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
</head>
<body>
<div class="container">
<video autoplay class="input_video" ></video>
<canvas class="output_canvas"></canvas>
<video autoplay class="output_video" ></video>
</div>
<script>
const video = document.getElementsByClassName("input_video")[0];
const canvas = document.getElementsByClassName("output_canvas")[0];
const output_video = document.getElementsByClassName("output_video")[0];
let imageCapture = null;
let tmpStream = null;
navigator.mediaDevices.getUserMedia({
video: true
})
.then((stream) => {
imageCapture = new ImageCapture(stream.getVideoTracks()[0]);
window.requestAnimationFrame(frameloop);
tmpStream = canvas.captureStream(20);
// canvas.style.display = "none";
output_video.srcObject = tmpStream;
})
function frameloop() {
imageCapture.grabFrame()
.then(imageBitmap => {
drawCanvas(canvas, imageBitmap);
window.requestAnimationFrame(frameloop);
})
}
/* Utils */
function drawCanvas(canvas, img) {
canvas.width = getComputedStyle(canvas).width.split('px')[0];
canvas.height = getComputedStyle(canvas).height.split('px')[0];
let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
let x = (canvas.width - img.width * ratio) / 2;
let y = (canvas.height - img.height * ratio) / 2;
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
x, y, img.width * ratio, img.height * ratio);
}
</script>
</body>
</html>
</script>
</body>
</html>
在drawCanvas函数中，您将画布宽度和高度设置为其计算的CSS宽度和高度。
当你通过display:none隐藏画布时，或者当它没有附加在文档中时，这些值将是"0px"，因为画布不在CSSOM中。
宽度或高度为零的画布无法产生任何输出。
设置画布宽度或高度是一个非常缓慢的操作，在Chrome中，这将分配一个完整的新图像位图，每次你这样做，添加到所有画布上下文的默认值的重置。
所以永远不要在所有帧中设置画布的宽度或高度，只有当它确实发生变化时，不要将其设置为<canvas>元素的计算大小，将其设置为输入图像的大小，然后设置相应的CSS大小。