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

【问题标题】：Show webcam / camera stream with delay - webrtc延迟显示网络摄像头/摄像头流 - webrtc
【发布时间】：2019-04-19 04:05:38
【问题描述】：

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

但我一直无法弄清楚如何延迟几秒钟来显示流。有点像延迟镜。

我尝试使用ctx.globalAlpha = 0.005; 播放，但这给了我重影效果而不是“延迟”流。

知道如何实现吗？

下面的 sn-p 在这里不起作用可能显然是因为安全问题，但这里有一支笔：

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;
}

下面的 sn-p 在这里不起作用可能显然是因为安全问题，但这里有一支笔：

https://codepen.io/farisk/pen/LvmGGQ

【问题讨论】：

标签： javascript camera webrtc webcam getusermedia

【解决方案1】：

您可能需要考虑将获得的视频数据存储在一个数组中。这可能意味着首先将播放延迟 n 秒。

基本上在第 1 帧，您将视频源存储到一个数组中，并且什么也不画。这一直发生到第 1000 帧（1 秒）。此时开始根据数组的第一个元素进行绘制。

绘制完该框架后，将其从数组中移除并添加新框架。

【讨论】：