知识库

Loading

0 评论 / 0 点赞 / 8 阅读  扩展类 最后更新: 2022-09-23 作者: 飞致云 总字数: 1794

RTSP:实时流传输协议,多用于监控视频传输;

市面上主流的监控机均采用此协议进行视频传输,可以理解为 “C/S” 架构,需要有专门的客户端来播放监控视频。

如果想在 DataEase 仪表版中播放监控机的监控视频,需要将 RTSP 协议的视频转换为 FLV 或 HTTP 的播放地址;

本文将介绍通过 RTSPtoWebRTC 将 RTSP 视频流转为 WebRTC,并在 DataEase 的仪表板中播放实时监控视频。

1 实现原理

如图所示:

(1)部署 RTSP 转 WebtoRTC 的服务: RTSPtoWebRTC

(2)将监控服务端提供的 RTSP视频流配置到 RTSPtoWebRTC 服务中,该服务会将 RTSP 转为 WebRTC;

(3)将 WebRTC 页面中的 HTTP URL 添加到 DataEase 的仪表板中的网页组件;

(4)在仪表板就可以查看到监控服务端的视频了,如果有多路视频,将多路视频的 URL 添加为多个网页组件即可。

image-1663913721276

效果图:

image-1663913727741

2 安装 Go 环境

#下载、解压
wget https://dl.google.com/go/go1.19.1.linux-amd64.tar.gz
tar -zxvf go1.19.1.linux-amd64.tar.gz 
mv go /usr/local/

#配置环境变量
cat > /etc/profile << EOF
export GOROOT=/usr/local/go
export PATH=\$PATH:\$GOROOT/bin
export GOPROXY=https://goproxy.io
EOF

source /etc/profile

3 配置 RTSPtoWebRTC

3.1 下载 RTSPtoWebRTC

#下载 RTSPtoWebRTC
yum install -y git
git clone https://github.com/deepch/RTSPtoWebRTC
cd RTSPtoWebRTC/

3.2 编辑 config.json

vim config.json

{
  "server": {
    "http_port": ":8083",
    "ice_servers": ["stun:stun.l.google.com:19302"]
  },
  "streams": {

#Phone_1 为 第一路视频设备名
    "Phone_1": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://admin:admin@192.168.1.120:8554/live"

#admin:admin 代表rtsp视频的用户名和密码
    },

#Phone_2 为 第二路视频设备名
    "Phone_2": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://admin:admin@192.168.1.147:8554/live"
    }
  }
}

3.3 运行 RTSPtoWebRTC

GO111MODULE=on go run *.go

4 浏览器访问查看效果

http://192.168.1.124:8083

#192.168.1.124 为 RTSPtoWebRTC 的服务器IP

#8083 为 RTSPtoWebRTC 的 http 访问端口

登录 RTSPtoWebRTC 的页面,通过选择 监控设备名“Phone_1”、“Phone_2” 可以播放两路设备的监控视频。

image-1663913815361

image-1663913821688

5 嵌入到 DataEase 中

在 DataEase 的仪表板中,使用网页组件,填写 RTSPtoWebRTC 页面中的 URL,
image-1663913832488

如果有多路视频,可以将每个视频作为一个网页组件嵌入到 DataEase 的仪表板中;
如下图所示:插入第二个网页组件

image-1663913838623

预览一下效果:
image-1663913846100

在上图的预览图中发现,每个网页组件中都有标题、选项按钮等信息,略显混乱,

可以修改 服务端的配置文件做调整: /opt/RTSPtoWebRTC/web/templates/player.tmpl 。

如下图所示:将1、2、3 位置的配置删除,将 4 位置的 “width:600px” 改为 “width:100%”

image-1663913853393

调整后的效果:
image-1663913858756

文章目录
其他资源