【Unity 3D】怎么在 WebGL 中播放 RTSP 监控

maltadirk

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

前言：

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

方案一：监控厂商不是有网页版的终端嘛，网页前端直接能够拆解出来，你要啥给你拆解啥，最后以 <div>    或者 <iframe>    标签整到你的Unity 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

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


使用 PhysicsRaycastor + IpointerClickHandler 实现监控模型交互，见 SecurityCamera.cs
扩展阅读

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流媒体解决方案？ - 知乎

总结：

为方便交流，仓库托管到 Github继续感叹隔行如隔山，搜 “webgl 播放 监控” ，啥也没有。搜 “WebRTC RTSP (选填：知乎、CSDN)”就打开知识的大门，害~

版权所有 转载请注明出处