海康大华天地伟业网络摄像头chrome浏览器二次开发
海康大华天地伟业网络摄像头chrome浏览器web二次开发
由于工作的原因需要开发海康和大华,还有天地伟业的摄像头,而且必须是本地部署开发,每个厂家网页版摄像头接口都不一样,而且在本地浏览器播放实时画面的问题,大多数都是基于ie浏览器,所以原生开发包不太适用多种浏览器,存在缺陷!由于摄像头是rtsp格式的,h5原生不支持这种格式,网上查了很多教程大多是使用rtsp转rtmp,不过rtmp需要falsh的支持,但是在chrome已经默认禁用、包括未来也会逐渐淘汰,所有最终这种方案被淘汰。
于是我想应该把rtsp转化成一种类似http协议的方式,能够直接被h5识别,于是我google,百度就不用说了,查了半天全是没有的东西。终于我找到了一种叫jsmpeg的插件,它主要是通过webSocket发送MPEG,前端通过js解析MPEG不断绘制canvas,包括音频。最终测试的结果就是一个1920*1080分辨率的画面延时大概的1.0s左右,超出我的预料,性能居然这么高。后台观察发现浏览器使用了GPU加速
本项目预览介绍
项目效果:
- 本项目采用视频框架为Ffmpeg+Node.js+jsmpeg
- 本项目采用的开发框架为ssm
- 主要实现摄像头实时预览
- 摄像头在线检测
- 视频框架下载地址