我正在构建一个Electron webRTC应用程序,我需要将MediaStream从一个窗口发送到另一个窗口。发送方窗口包含一个视频元素,该元素被复制到canvas元素上,使用captureStream()函数转换为MediaStream,并使用P2P连接发送到接收方窗口。
当两个窗口(发送者,接收者)都在屏幕上运行时,媒体传输工作正常。但是,我希望发送方窗口即使在最小化到任务栏时也能够发送媒体。目前,一旦发送方窗口最小化,接收方的视频就会冻结。我怀疑一旦窗口最小化,canvas元素就会停止捕获原始视频。
这就是我创建视频元素的画布副本的方法:
/**
* Create a copy of HTMLvideo in HTMLcanvas for
* Get reference of the video, width and height as parameters
* Return canvas object
*/
function copyVideo(video, width, height, frameRate) {
let canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
let ctx = canvas.getContext('2d');
setInterval(function() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
}, frameRate);
return canvas;
}
我的问题是,当浏览器窗口最小化时,我的画布究竟发生了什么?有没有办法在窗口最小化时继续运行drawImage?