以前视频项目开发中,需要实现在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’ }); 将当前画布中执行的过程录制下来。