logo

前段时间,因为项目需要,需要在网页端现实监控实时画面,但是摄像头的控件只支持IE浏览器,所以抛弃了摄像头本身的控件,选择自己去实现。

大致的思路就是通过推流拉流的形式实现,中间开一个服务器来支持,想着想着就感觉是写一个简单的直播demo。

1.服务器

没有安装http-server的话,得先安装一个。

1
yarn add http-server

有安装http-server的话,直接运行就好了

1
http-server

这样就开启了一个服务器。

2.jsmpeg

下载jsmpeg,进入文件夹,运行websocket-relay.js文件
可以理解为 node websocket-relay.js 密钥 推流端口 拉流端口

1
node websocket-relay.js cj123456 8081 8082

3.ffmpeg

下载ffmpeg,同时设置好他的环境变量,这里不会设置环境变量的话,可以自行谷歌“ffmpeg 环境变量”
视频转换 ffmpeg -i “视频地址” -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 推流地址(这里的地址就是127.0.0.1,端口号上上面服务器监听的,后面的是jsmepg设置的密钥)

1
ffmpeg -i "rtsp://admin:cj123456@192.168.60.2/h264/ch1/main/av_stream" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/cj123456

ffmpeg的具体参数可以在官网查看

传送门 ffmpeg

4.现实监控画面

简单的例子,我们可以打开jsmpeg中的一个demo。

修改地址

1
2
3
var url = 'ws://'+document.location.hostname+':8082/'; 
改为
var url = 'ws://127.0.0.1:8082/';

就可以显示实时的监控画面了。但是这也只是一个简单的实现,当监控的画面多了以后,按照这样的思路,我们需要开很多的进程,同时,监听的端口不一样,页面所对应的监控画面的端口也不一样,这样就需要用node去实现监听,动态改变端口,实现一个页面显示多个监控画面。

5.视频地址

不同的视频监控设备的视频编码不同,地址也不一样的。比如我用的海康威视设备。

1
rtsp://username:password@<ipaddress>/<videotype>/ch<number>/<streamtype>

传送门 海康威视视频地址参数

写在最后

还有个知识点v-bind=”$attrs”,在对二次封装的时候特别好用,可以不用写很多的props了,同样的还有v-on=”$listeners” 。永远的神,以后的二次封装,我可能不会写props了,除非必要!!!!