HTML5 相機緩沖和延遲（延遲鏡像）

Question

我對 HTML5 還不是很熟悉，但一直在尋找一個項目來深入研究它。

使用 HTML5 和相機訪問是否可以實現以下功能？

• 階段 1：具有可調延遲的實時攝像機重播（又名延遲鏡像）

• Stage2：選擇之前錄制的直播流的部分並提供重播選項（連續循環、慢動作、畫入畫面等）

理想情況下，這應該在 Android 平板電腦上運行。

這是一種為教練和運動員提供即時視覺反饋的應用程序。

感謝您的任何反饋，非常感謝！ :)

湯姆

Answer 1

實際上，有一些js庫可以記錄網絡攝像頭。 簽出RecordRTC 。 這是一些可能有效的示例代碼（我尚未測試）。

navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function gotVideoStream(localMediaStream) {
  var video = document.querySelector("video");
  var recordRTC = RecordRTC(mediaStream); 
  recordRTC.startRecording(); 
  recordRTC.stopRecording(function(videoURL) { 
      var playbackVideo = document.getElemenById('playback-vid');
      playbackVideo.src = videoURL; // set src for playback
      playbackVideo.playbackRate = .5; // slow down playback
  });

  // set src for live preview
  video.src = window.URL.createObjectURL(localMediaStream);
  video.play();
}

function errorCallback(error){
  console.log("navigator.getUserMedia error: ", error);
}

// get things rolling
navigator.getUserMedia({video: true}, gotVideoStream, error);

如果這不起作用，請向Google尋求更多資源。

Answer 2

關於使用網絡攝像頭拍照的 MDN 教程提供了以簡單方式實現此功能所需的大部分內容。

• 請求視頻媒體流並將其連接到視頻元素。
• 將視頻元素繪制到畫布上。
• 將畫布復制到數據 URL 或原始圖像數據。
• 延遲后將其顯示在另一個畫布或 img 元素中。

這是我編寫的一個實現延遲鏡像的示例。

這對於幾秒鍾的視頻來說很好。 例如，我可以用它練習舞蹈動作。 錄制和播放較長的流，您可能會遇到內存問題。