Html5 video标签访问网络摄像机实时监控

网络摄像机+VLC+Nod e.js+HTML5

网络摄像机大部分都需要安装插件才能看，对于我们这些搞B/S的来说比较麻烦，最近项目中要用到摄像机实时监控，所以查询了些资料。公司采用的大华的东西，将设备全部接入一个局域网中，设置好ip

摄像机1 (192.168.8.110)

摄像机2 (192.168.8.180)

硬盘录像机NVR (192.168.8.108)

百度了一下大华（包含NVR/摄像机）RTSP地址：

rtsp://user:pwd@ip:port/cam/ realmonitor?channel=1&subtype=0

channel通道，NVR分通道。

subtype码流，0代表主码流（高清1080P），1代表辅码流(704*576(D1)).

直接访问摄像机：

摄像机1:rtsp://admin:admin@192.168.8.110:554/cam/realmonitor?channel=1&subtype=0

摄像机2:rtsp://admin:admin@192.168.8.110:554/cam/realmonitor?channel=1&subtype=0

访问NVR:

摄像机1:rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=1&subtype=0

摄像机2:rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=2&subtype=0

Html5

使用vlc命令，在cmd命令下使用（注意下面是一行命令）

vlc -I dummy -vvv

"rtsp://admin:admin@192.168.8.110:554/cam/realmonitor?channel=1&subtype=1"

--sout="#transcode{vcodec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate= 44100}:http{mux=ogg,dst=:8080/cam}" --sout-all --sout-keep

多行0%-100%，基本上就是成功了

HTML5

Your browser does not support the video tag.

chrome打开页面就可以看到了

Node.js+HTML5

采用Node.js启动vlc，这里是多个摄像头

app.js

var child_process = require('child_process');

function openCam(rtsp,path){

var server=child_process.spawn("C:\\Program Files

(x86)\\VideoLAN\\VLC\\vlc.exe",["-I","dummy","-vvv",rtsp,"--sout=#transcode{vco dec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate=44100}:http{mux=ogg,ds t="+path+"}","--sout-all","--sout-keep"]);

//dummy 可以修改为 --no-dummy-quiet，隐藏vlc命令窗口

server.on('exit', function (code, signal) {

console.log('service exit');

});

}

openCam('rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=1&subtype =1',':8800/cam');//摄像机110

openCam('rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=2&subtype =1',':8801/cam');//摄像机180

目前只能一个摄像机一个端口，端口复用暂时不知道怎么弄。

HTML

Your browser does not support the video tag.

Your browser does not support the video tag.

运行node app，打开html即可

经过测试PC chrome、安卓UC都能打开。

（注：专业文档是经验性极强的领域，无法思考和涵盖全面，素材和资料部分来自网络，供参考。可复制、编制，期待你的好评与关注）