经常有兄弟伙在群里问怎么实现 WebGL 播放 rtsp 监控，真就是隔行如隔山，如果有个网页前端，咱们 Unity 开发哪至于这么苦啊！
闲话少述，本文这就教大家如何在 WebGL 中播放 RTSP 监控。
前言：
刚开始接触 WebGL 中播放监控的需求，大家都是希望 AVPRO、UMP 能出奇迹，但是遗憾暂时不支持。其实吧，这玩意人家网页前端浏览器接监控能接出花来：
方案一：监控厂商不是有网页版的终端嘛，网页前端直接能够拆解出来，你要啥给你拆解啥，最后以 <div> 或者 <iframe> 标签整到你的Unity webgl 容器之上。但是好像他们提供的网页终端平台只能在ie这种老式浏览器，而老式浏览器它不能很好的支持webgl……
方案二： 使用成熟的基于 webrtc 的第三方推流服务器，向浏览器推流，浏览器直接使用 <video> 标签播放。
作为 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，不为别的，怎么简单怎么来啊！
下面我们简单的谈谈如何依附 RTSPtoWeb 实现 RTSP 的网页播放(行文时发现人家推荐 RTSPtoWeb，试试就试试)。
效果：
图中控制台程序是 RTSPtoWeb 推流服务器
实现：
1. 下载、编译 RTSPtoWeb 推流服务器：
- 从Github 把整个项目下载下来
2. 安装 Go 开发环境 - 菜鸟教程
2.1. 下载&安装合适的版本
笔者选择的版本
2.2 设置 golang 国内代理（Windows）：
go env -w GOPROXY=https://goproxy.cn,direct
2.3 设置 GO111MODULE （模组、包管理模块）
go env -w GO111MODULE=on
- 测试运行
按住 shift 键，对着项目所在文件夹右键，选择：“在此处打开 powershell 窗口”
执行以下指令
go run .
// 如果上面的指令不行，执行下面这个
go run *.go
你会看到下面的界面就表示推流服务器已经开启了：
此时，通过
http://127.0.0.1:8083即可访问推流服务器内置的测试页面了：
由于笔者没有网络相机，所以使用网络上流行的那个 rtsp 测试流，如果你也没有网络相机，可以拿来一试，但这种视频可能表现的很不流畅：
rtsp://wowzaec2demo.streamlock.net:554/vod/mp4:BigBuckBunny_115k.mov
- 编译
承接上一步，运行以下指令即可自动编译成 exe 运行文件
go build .
// 下面指令可选
go clean
- 运行服务器
RTSPtoWeb.exe
首次运行（包含测试运行）会弹出如图示窗口，由于测试环境为内网，为避免异常，勾选专用网络+公用网络
2. 修改 WebGL Template 接入相关逻辑：
- 撰写 WebRtcPlayer.js ，实现通过 WebRTC 通信、读流。
- 在模板 Index.html 中接入弹窗播放视频的逻辑，见 Index.html
- 接入 untiy call js 逻辑，见 CallJS.jslib
- 如何配置自己的 RTSP ，见推流服务器 config.json
3. 实现 Unity 点击弹窗播放监控
使用 PhysicsRaycastor + IpointerClickHandler 实现监控模型交互，见 SecurityCamera.cs
Tips : 这个推流服务器目前只支持 H264 编码格式的视频，如果自己的 RTSP 能在 VLC 播放但是在笔者的示例中不能播放，务必通过 VLC 以下菜单确认编码格式。
总结：
- 为方便交流，仓库托管到 Github
- 如果测试视频不能播放，那可能是已经失效了，自己配置测试视频流哈。
- 笔者实测播放海康威视的监控延迟比 VLC 要低很多。
- 继续感叹隔行如隔山，搜 “webgl 播放 监控” ，啥也没有。搜 “WebRTC RTSP (选填：知乎、CSDN)”就打开知识的大门，害~
扩展阅读：
- vdalex25/WebRtcPlayer: example player for RTSPtoWebRTC project - RTSP Player 参考
- deepch/RTSPtoWeb: RTSP Stream to WebBrowser - 本文使用的 RTSP 推流服务器
- greggman/better-unity-webgl-template - 本示例使用的 WebGL 模板。
- go语言：环境变量GOPROXY和GO111MODULE设置
- 视频服务器(2) RTSPtoWebRTC
- 基于 WebRTC 的 RTSP 视频实时预览 - 知乎
- 浏览器播放rtsp流媒体解决方案？ - 知乎
版权所有 转载请注明出处
网友评论