Блог

Главная - Вопросы по программированию - Показывать поток веб-камеры / камеры с задержкой — webrtc

Показывать поток веб-камеры / камеры с задержкой — webrtc

#javascript #camera #webrtc #webcam #getusermedia

#javascript #камера #webrtc #Вебкам #getusermedia

Вопрос:

Я сделал простую настройку, получив поток веб-камеры / камеры телефона и передав его дальше, рисуя на html 2d canvas.

Но у меня возникли проблемы с выяснением, как показывать поток с задержкой в несколько секунд. Вроде как зеркало задержки.

Я пытался играть, 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;
}
  • Приведенный ниже фрагмент здесь не работает, вероятно, из-за проблем с безопасностью, но вот ручка:

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

Ответ №1:

Возможно, вы захотите сохранить полученные видеоданные в виде массива. Сначала это может означать задержку воспроизведения на n секунд.

В основном на кадре 1 вы сохраняете видеопоток в массив и ничего не рисуете. Это происходило до 1000 кадра (1 секунда). В этот момент начните рисовать на основе первого элемента массива.

Как только вы нарисуете этот кадр, удалите его из массива и добавьте новый кадр.

Метки: