经常有兄弟伙在群里问怎么实现 WebGL 播放 rtsp 监控，真就是隔行如隔山，如果有个网页前端，咱们 Unity 开发哪至于这么苦啊！
闲话少述，本文这就教大家如何在 WebGL 中播放 RTSP 监控。

前言：

刚开始接触 WebGL 中播放监控的需求，大家都是希望 AVPRO、UMP 能出奇迹，但是遗憾暂时不支持。其实吧，这玩意人家网页前端浏览器接监控能接出花来：

作为 Unity 开发，方案一就不做讨论，方案二就列举几个推流服务器，也不方便强行解释。
https://github.com/ZLMediaKit/ZLMediaKit
https://github.com/daniulive/SmarterStreaming
https://github.com/aler9/rtsp-simple-server
https://github.com/648540858/wvp-GB28181-pro //GB28181 应该值得深耕监控的同学关注
https://github.com/deepch/RTSPtoWebRTC
等等…

我使用了第二个方案中提到的 RTSPtoWebRTC，不为别的，怎么简单怎么来啊！
下面我们简单的谈谈如何依附 实现 RTSP 的网页播放(行文时发现人家推荐 RTSPtoWeb，试试就试试)。

效果：
图中控制台程序是 RTSPtoWeb 推流服务器
实现：

1. 下载、编译 RTSPtoWeb 推流服务器：

2. 安装 Go 开发环境 - 菜鸟教程
2.1. 下载&安装合适的版本

笔者选择的版本

2.2 设置 golang 国内代理（Windows）： 
go env -w GOPROXY=https://goproxy.cn,direct

2.3 设置 GO111MODULE （模组、包管理模块）

go env -w GO111MODULE=on
  1. 测试运行
    按住 shift 键，对着项目所在文件夹右键，选择：“在此处打开 powershell 窗口”
    执行以下指令
go run .
// 如果上面的指令不行，执行下面这个
go run *.go

你会看到下面的界面就表示推流服务器已经开启了：


此时，通过 
http://127.0.0.1:8083
即可访问推流服务器内置的测试页面了：

由于笔者没有网络相机，所以使用网络上流行的那个 rtsp 测试流，如果你也没有网络相机，可以拿来一试，但这种视频可能表现的很不流畅： 
rtsp://wowzaec2demo.streamlock.net:554/vod/mp4:BigBuckBunny_115k.mov
  1. 编译
    承接上一步，运行以下指令即可自动编译成 exe 运行文件
go build .
// 下面指令可选
go clean

RTSPtoWeb.exe

2. 修改 WebGL Template 接入相关逻辑：

3. 实现 Unity 点击弹窗播放监控

使用 PhysicsRaycastor + IpointerClickHandler 实现监控模型交互，见

Tips : 这个推流服务器目前只支持 H264 编码格式的视频，如果自己的 RTSP 能在 VLC 播放但是在笔者的示例中不能播放，务必通过 VLC 以下菜单确认编码格式。

总结：
  • 为方便交流，仓库托管到
  • 如果测试视频不能播放，那可能是已经失效了，自己配置测试视频流哈。
  • 笔者实测播放海康威视的监控延迟比 VLC 要低很多。
  • 继续感叹隔行如隔山，搜 “webgl 播放 监控” ，啥也没有。搜 “WebRTC RTSP (选填：知乎、CSDN)”就打开知识的大门，害~
扩展阅读：