51工具盒子RTSP：实时流传输协议，多用于监控视频传输；
市面上主流的监控机均采用此协议进行视频传输，可以理解为 "C/S" 架构，需要有专门的客户端来播放监控视频。
如果想在 DataEase 仪表版中播放监控机的监控视频，需要将 RTSP 协议的视频转换为 FLV 或 HTTP 的播放地址；
本文将介绍通过 RTSPtoWebRTC 将 RTSP 视频流转为 WebRTC，并在 DataEase 的仪表板中播放实时监控视频。
1 实现原理 {#1-%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86}
如图所示：
（1）部署 RTSP 转 WebtoRTC 的服务： RTSPtoWebRTC ；
（2）将监控服务端提供的 RTSP视频流配置到 RTSPtoWebRTC 服务中，该服务会将 RTSP 转为 WebRTC；
（3）将 WebRTC 页面中的 HTTP URL 添加到 DataEase 的仪表板中的网页组件；
（4）在仪表板就可以查看到监控服务端的视频了，如果有多路视频，将多路视频的 URL 添加为多个网页组件即可。
效果图：
2 安装 Go 环境 {#2-%E5%AE%89%E8%A3%85-go-%E7%8E%AF%E5%A2%83}
#下载、解压
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-%E9%85%8D%E7%BD%AE-rtsptowebrtc}
3.1 下载 RTSPtoWebRTC {#3.1-%E4%B8%8B%E8%BD%BD-rtsptowebrtc}
#下载 RTSPtoWebRTC
yum install -y git
git clone https://github.com/deepch/RTSPtoWebRTC
cd RTSPtoWebRTC/
3.2 编辑 config.json {#3.2-%E7%BC%96%E8%BE%91-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 {#3.3-%E8%BF%90%E8%A1%8C-rtsptowebrtc}
GO111MODULE=on go run *.go
4 浏览器访问查看效果 {#4-%E6%B5%8F%E8%A7%88%E5%99%A8%E8%AE%BF%E9%97%AE%E6%9F%A5%E7%9C%8B%E6%95%88%E6%9E%9C}
#192.168.1.124 为 RTSPtoWebRTC 的服务器IP
#8083 为 RTSPtoWebRTC 的 http 访问端口
登录 RTSPtoWebRTC 的页面，通过选择 监控设备名"Phone_1"、"Phone_2" 可以播放两路设备的监控视频。
5 嵌入到 DataEase 中 {#5-%E5%B5%8C%E5%85%A5%E5%88%B0-dataease-%E4%B8%AD}
在 DataEase 的仪表板中，使用网页组件，填写 RTSPtoWebRTC 页面中的 URL，
如果有多路视频，可以将每个视频作为一个网页组件嵌入到 DataEase 的仪表板中；
如下图所示：插入第二个网页组件
预览一下效果：
在上图的预览图中发现，每个网页组件中都有标题、选项按钮等信息，略显混乱，
可以修改 服务端的配置文件做调整： /opt/RTSPtoWebRTC/web/templates/player.tmpl 。
如下图所示：将1、2、3 位置的配置删除，将 4 位置的 "width:600px" 改为 "width:100%"
调整后的效果：
