HTML5相机缓冲和延迟(延迟镜像）

HTML5 camera buffering and delay (delayed mirror)

本文关键字：延迟 镜像 相机 缓冲 HTML5      更新时间：2023-09-26

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

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

  • 第1阶段：可调节延迟的实时摄像机回放（又称延迟镜）

  • 阶段2：选择之前录制的直播流的部分，并提供回放选项（连续循环、慢动作、画中画等）

理想情况下，这应该在Android平板电脑上运行。

这是一个为教练和运动员提供即时视觉反馈的应用程序。

感谢您的反馈，非常感谢！：）

Tom

MDN关于使用网络摄像头拍照的教程提供了以简单方式实现此功能所需的大部分内容。

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

下面是我写的一个实现延迟镜像的例子。

这对几秒钟的视频来说很好。例如，我可以用它练习舞步。录制和播放较长的流，你可能会遇到记忆问题。

实际上有一些js-lib可以录制网络摄像头提要。查看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);

如果这不起作用，请在谷歌上搜索该主题以获取更多资源。

相关文章：