海康大华天地伟业网络摄像头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主要实现摄像头实时预览摄像头在线检测视频框架下载地址（建议直接下载，因为框架包存在改动，直接下载安装，可直接运行项目）：

Ffmpeg（点击下载），用来解码的，做视频逃不掉这个

Node.js（点击下载），搭建webSocket服务器，以及运行一个jsmpeg的js文件

jsmpeg（点击下载），运行主程序

优点本项目适用于chrome浏览器，360浏览器，ie浏览器等多种浏览器web端浏览（测试过）本项目适用于海康摄像头，大华摄像头，天地伟业摄像头等多种存在rtsp流开发的网络摄像头（测试过）

缺点本项目只适用于单个摄像头实时浏览，没有开发九宫格，有兴趣可以自己在本项目上进行二次开发！

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:12345@192.0.0.64:554/h264/ch1/main/av_stream

rtsp://admin:12345@192.0.0.64:554/MPEG-4/ch1/main/av_stream

子码流：

rtsp://admin:12345@192.0.0.64/mpeg4/ch1/sub/av_stream

rtsp://admin:12345@192.0.0.64/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:admin@10.12.4.84:554/cam/realmonitor?channel=2&subtype=1