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

发布时间:2020-04-25 04:48:54   来源:文档文库   
字号:

网络摄像机+VLC+Node.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=0Html5 并不支持rtsp,所以使用vlc进行转码,rtsphttp,这样就可以直接播放。

使用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=:80/cam}" --sout-all --sout-keep

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

HTML5

//

127.0.

0.1:8800/cam"width="600"height="450"autoplay="autoplay"controls="controls" loop="loop">

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{vcodec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate=44100}:

http{mux=ogg,dst="+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

//

192.168.

8.87:8800/cam"width="600"height="450"autoplay="autoplay"controls="controls" loop="loop">

Your browser does not support the video tag.

//

192.168.

8.87:8801/cam"width="600"height="450"autoplay="autoplay"controls="controls" loop="loop">

Your browser does not support the video tag.

运行node app,打开html即可

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

本文来源:https://www.2haoxitong.net/k/doc/6b1a1830f042336c1eb91a37f111f18583d00c24.html

《Html5 video标签访问网络摄像机实时监控.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档

文档为doc格式