HTML5相机缓冲和延迟(延迟镜)

Question

我还不太熟悉HTML5，但我一直在寻找一个项目来深入研究它。

以下功能是否可以使用HTML5和摄像头访问？

• Stage1:可调延迟的实时摄像机重放(也称延迟镜)
• 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);

如果这不起作用，请使用谷歌主题获取更多的资源。

Answer 2

MDN 关于用摄像头拍照的教程提供了以简单方式实现这一功能所需的大部分部分。

• 请求视频媒体流并将其连接到视频元素。
• 将视频元素绘制到画布上。
• 将画布复制到数据URL或原始图像数据。
• 延迟之后，在另一个画布或img元素中显示它。

下面是我编写的实现延迟镜像的示例。

这是好的几秒钟的视频。例如，我可以用它来练习舞蹈动作。录制和播放较长的流，您可能会遇到内存问题。