海康大华天地伟业网络摄像头chrome浏览器web二次开发

海康大华天地伟业网络摄像头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加速

本项目预览介绍

项目效果：

1. 本项目采用视频框架为Ffmpeg+Node.js+jsmpeg
2. 本项目采用的开发框架为ssm
3. 主要实现摄像头实时预览
4. 摄像头在线检测
5. 视频框架下载地址（建议直接下载，因为框架包存在改动，直接下载安装，可直接运行项目）：
   Ffmpeg（点击下载），用来解码的，做视频逃不掉这个
   Node.js（点击下载），搭建webSocket服务器，以及运行一个jsmpeg的js文件
   jsmpeg（点击下载），运行主程序
   优点
6. 本项目适用于chrome浏览器，360浏览器，ie浏览器等多种浏览器web端浏览（测试过）
7. 本项目适用于海康摄像头，大华摄像头，天地伟业摄像头等多种存在rtsp流开发的网络摄像头（测试过）
   缺点
8. 本项目只适用于单个摄像头实时浏览，没有开发九宫格，有兴趣可以自己在本项目上进行二次开发！
   Ffmpeg+Node.js+jsmpeg网络视频服务器安装

主流摄像头的rtsp地址格式

rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream
说明：
username: 用户名。例如admin。
password: 密码。例如12345。
ip: 为设备IP。例如 192.0.0.64。
port: 端口号默认为554，若为默认可不填写。
codec：有h264、MPEG-4、mpeg4这几种。
channel: 通道号，起始为1。例如通道1，则为ch1。
subtype: 码流类型，主码流为main，辅码流为sub。

例如，请求海康摄像机通道1的主码流，Url如下
主码流：
rtsp://admin:[email protected]:554/h264/ch1/main/av_stream
rtsp://admin:[email protected]:554/MPEG-4/ch1/main/av_stream
子码流：
rtsp://admin:[email protected]/mpeg4/ch1/sub/av_stream
rtsp://admin:[email protected]/h264/ch1/sub/av_stream

大华
rtsp://[username]:[password]@[ip]:[port]/cam/realmonitor?[channel]&[subtype]
说明:
username: 用户名。例如admin。
password: 密码。例如admin。
ip: 为设备IP。例如 10.7.8.122。
port: 端口号默认为554，若为默认可不填写。
channel: 通道号，起始为1。例如通道2，则为channel=2。
subtype: 码流类型，主码流为0（即subtype=0），辅码流为1（即subtype=1）。

例如，请求某设备的通道2的辅码流，Url如下
rtsp://admin:[email protected]:554/cam/realmonitor?channel=2&subtype=1