以前视频项目开发中,需要实现在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’ }); 将当前画布中执行的过程录制下来。
本文介绍如何在视频项目中实现视频截图及录影功能,利用canvas和webRTC技术,完成视频流的截取与录制,并上传至阿里云服务器。详细解释了使用videojs播放海康NVR Dash视频流,以及通过html2canvas和RecordRTC实现画面截取与录制的方法。
2132

被折叠的 条评论
为什么被折叠?



