Javascript 延迟显示网络摄像头/摄像头流-webrtc

我做了一个简单的设置，获取网络摄像头/手机摄像头流并将其传递，在HTML2D画布上绘制

但是我一直很难弄清楚如何在几秒钟的延迟内显示流。有点像延迟反射镜

我试着玩

ctx.globalAlpha=0.005但这给了我一个重影效果，而不是“延迟”流

你知道如何做到这一点吗


下面的代码片段在这里不起作用，可能是因为安全问题，但这里有一支笔：



var宽度=0，高度=0；
var canvas=document.createElement（'canvas'），
ctx=canvas.getContext（'2d'）；
document.body.appendChild（画布）；
var video=document.createElement（'video'），
轨道；
video.setAttribute（'autoplay'，true）；
window.vid=视频；
函数getWebcam（）{
navigator.mediaDevices.getUserMedia（{video:true}）。然后（函数（流）{
var videoTracks=stream.getVideoTracks（）；
var newStream=newmediastream（stream.getVideoTracks（））；
video.srcObject=newStream；
video.play（）；
track=stream.getTracks（）[0]；
}，功能（e）{
console.error（'Rejected！'，e）；
});
}
getWebcam（）；
变量旋转=0，
环框，
centerX，
中心，
twoPI=Math.PI*2；
函数循环（）{
loopFrame=requestAnimationFrame（循环）；
//ctx.globalAlpha=0.005；
ctx.drawImage（视频，0，0，宽度，高度）；
ctx.restore（）；
}
函数startoop（）{
loopFrame=requestAnimationFrame（循环）；
}
video.addEventListener（'loadedmetadata'，function（）{
宽度=画布。宽度=视频。视频宽度；
高度=画布高度=视频高度；
centerX=宽度/2；
中心Y=高度/2；
startoop（）；
});
canvas.addEventListener（'click'，function（）{
如果（轨道）{
如果（track.stop）{track.stop（）；}
track=null；
}否则{
getWebcam（）；
}
});

视频，
帆布{
最大宽度：100%；
高度：自动；
} /代码> 您可能需要考虑将您获得的视频数据存储在一系列数组中。这可能意味着首先将播放延迟n秒

基本上在第1帧，您将视频提要存储到一个数组中，而不绘制任何内容。这一直发生到第1000帧（1秒）。此时，基于阵列的第一个元素开始绘制

一旦绘制该框架，将其从数组中移除并添加新的框架。
 < P>您可能需要考虑将您获得的视频数据存储在一系列数组中。这可能意味着首先将播放延迟n秒

基本上在第1帧，您将视频提要存储到一个数组中，而不绘制任何内容。这一直发生到第1000帧（1秒）。此时，基于阵列的第一个元素开始绘制

绘制该帧后，将其从阵列中删除并添加新帧