以前视频项目开发中,需要实现在video 视频上截图,录影后将文件上传到阿里云服务器上。截图功能相对来说比较容易实现,使用canvas 的 drawImage 方法将video 控件的区域绘制下来即可。录影相对来说比较麻烦,目前用webRTC 简单实现。
https://www.webrtc-experiment.com/RecordRTC/simple-demos/

功能简单介绍:使用videojs来播放海康NVR 的Dash视频流,需要针对实时画面进行截取,或者录制10s的视频片段然后上传至阿里云上。
截图:截取图片后可以进行涂鸦编辑,并能清除,撤销。

视频录制,截图涂鸦功能

视频录制,截图涂鸦功能

录影这里通过 html2canvas 将视频区域绘制到canvas 上,然后再通过requestAnimationFrame方法进行持续执行当前绘制方法,注意结束定时器的条件。最后通过 RecordRTC(self.canvasEl, { type: ‘canvas’ }); 将当前画布中执行的过程录制下来。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2023-04-04
  • 2021-11-13
  • 2021-08-30
猜你喜欢
  • 2022-01-11
  • 2021-11-29
  • 2022-12-23
  • 2021-12-29
  • 2021-07-17
  • 2021-10-27
  • 2021-12-16
相关资源
相似解决方案