我做了一个简单的设置,获取网络摄像头/手机摄像头流,并传递它,在html 2d画布上绘制。
但是我一直不知道如何在延迟几秒钟的情况下显示流。有点像延迟镜。
我试着玩ctx.globalAlpha = 0.005;
,但这给了我一个重影效果,而不是“延迟”流。
有什么想法可以实现这一点吗?
- 下面的片段在这里不起作用,可能是因为安全问题,但这里有一支笔:
https://codepen.io/farisk/pen/LvmGGQ
var width = 0, height = 0;
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
var video = document.createElement('video'),
track;
video.setAttribute('autoplay',true);
window.vid = video;
function getWebcam(){
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
var videoTracks = stream.getVideoTracks();
var newStream = new MediaStream(stream.getVideoTracks());
video.srcObject = newStream;
video.play();
track = stream.getTracks()[0];
}, function(e) {
console.error('Rejected!', e);
});
}
getWebcam();
var rotation = 0,
loopFrame,
centerX,
centerY,
twoPI = Math.PI * 2;
function loop(){
loopFrame = requestAnimationFrame(loop);
// ctx.globalAlpha = 0.005;
ctx.drawImage(video, 0, 0, width, height);
ctx.restore();
}
function startLoop(){
loopFrame = requestAnimationFrame(loop);
}
video.addEventListener('loadedmetadata',function(){
width = canvas.width = video.videoWidth;
height = canvas.height = video.videoHeight;
centerX = width / 2;
centerY = height / 2;
startLoop();
});
canvas.addEventListener('click',function(){
if ( track ) {
if ( track.stop ) { track.stop(); }
track = null;
} else {
getWebcam();
}
});
video,
canvas {
max-width: 100%;
height: auto;
}
- 下面的片段在这里不起作用,可能是因为安全问题,但这里有一支笔:
2条答案
按热度按时间kmb7vmvb1#
您可以缓冲您的流,并播放您缓冲的内容。
要使用
MediaStream
实现这一点,您可以使用MediaRecorder API沿着MediaSource API。基本的想法是记录你的流,在每个新的块产生时,将其缓冲到
MediaSource
中。然后我们只需要等待我们想要的延迟,在开始播放之前暂停视频。和as a fiddle,因为StackSnippets不是很gUM友好。
vmdwslir2#
你可以考虑将视频数据存储在一个数组中,这可能意味着一开始会延迟播放n秒。
基本上在第1帧,您将视频馈送存储到一个数组中,并不绘制任何内容。这种情况一直发生到第1000帧(1秒)。此时开始基于数组的第一个元素绘制。
绘制该帧后,将其从阵列中删除并添加新帧。