jjzjj

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

雨落随风 2024-02-06 原文

经常有兄弟伙在群里问怎么实现 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 推流服务器：

  1. 从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
  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
  1. 运行服务器 RTSPtoWeb.exe
    首次运行（包含测试运行）会弹出如图示窗口，由于测试环境为内网，为避免异常，勾选专用网络+公用网络

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

  1. 撰写 WebRtcPlayer.js ，实现通过 WebRTC 通信、读流。
  2. 在模板 Index.html 中接入弹窗播放视频的逻辑，见 Index.html
  3. 接入 untiy call js 逻辑，见 CallJS.jslib
  4. 如何配置自己的 RTSP ，见推流服务器 config.json

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

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

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

总结：

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

扩展阅读：

怎么使用 SDK 播放监控, 点这里~

版权所有 转载请注明出处

中低Unityhttpssectionjianshu

有关【Unity 3D】怎么在 WebGL 中低延迟播放 RTSP 监控的更多相关文章

  1. ruby - Ruby 中的隐式返回值是怎么回事？ - 2

    所以我开始关注ruby​​，很多东西看起来不错，但我对隐式return语句很反感。我理解默认情况下让所有内容返回self或nil但不是语句的最后一个值。对我来说，它看起来非常脆弱(尤其是)如果你正在使用一个不打算返回某些东西的方法(尤其是一个改变状态/破坏性方法的函数!)，其他人可能最终依赖于一个返回对方法的目的并不重要，并且有很大的改变机会。隐式返回有什么意义？有没有办法让事情变得更简单？总是有返回以防止隐含返回被认为是好的做法吗？我是不是太担心这个了？附言当人们想要从方法中返回特定的东西时，他们是否经常使用隐式返回，这不是让你组中的其他人更容易破坏彼此的代码吗？当然，记录一切并给出

  2. ruby - 怎么来的(a_method || :other) returns :other only when assigning to a var called a_method? - 2

    给定以下方法:defsome_method:valueend以下语句按我的预期工作:some_method||:other#=>:valuex=some_method||:other#=>:value但是下面语句的行为让我感到困惑:some_method=some_method||:other#=>:other它按预期创建了一个名为some_method的局部变量，随后对some_method的调用返回该局部变量的值。但为什么它分配:other而不是:value呢？我知道这可能不是一件明智的事情，并且可以看出它可能有多么模棱两可，但我认为应该在考虑作业之前评估作业的右侧...我已经在R

  3. ruby-on-rails - 我该怎么办 :remote location validation with CarrierWave? - 2

    我在我的Rails3示例应用程序上使用CarrierWave。我想验证远程位置上传，因此当用户提交无效URL(空白或非图像)时，我不会收到标准错误异常:CarrierWave::DownloadErrorinImageController#createtryingtodownloadafilewhichisnotservedoverHTTP这是我的模型:classPaintingtrue,:length=>{:minimum=>5,:maximum=>100}validates:image,:presence=>trueend这是我的Controller:classPaintingsC

  4. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  5. 电脑0x0000001A蓝屏错误怎么U盘重装系统教学 - 2

    　　电脑0x0000001A蓝屏错误怎么U盘重装系统教学分享。有用户电脑开机之后遇到了系统蓝屏的情况。系统蓝屏问题很多时候都是系统bug，只有通过重装系统来进行解决。那么蓝屏问题如何通过U盘重装新系统来解决呢？来看看以下的详细操作方法教学吧。　　准备工作：　　1、U盘一个（尽量使用8G以上的U盘）。　　2、一台正常联网可使用的电脑。　　3、ghost或ISO系统镜像文件（Win10系统下载_Win10专业版_windows10正式版下载-系统之家）。　　4、在本页面下载U盘启动盘制作工具：系统之家U盘启动工具。　　U盘启动盘制作步骤：　　注意：制作期间，U盘会被格式化，因此U盘中的重要文件请注

  6. Unity 热更新技术 | （三） Lua语言基本介绍及下载安装 - 2

    ?博客主页：https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创，首发于CSDN??学习专栏推荐：Unity系统学习专栏?游戏制作专栏推荐：游戏制作?Unity实战100例专栏推荐：Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正！?未来很长，值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  7. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit

  8. unity---接入Admob - 2

    目录1.AdmobSDK下载地址2.将下载好的unityPackagesdk导入到unity里​编辑 3.解析依赖到项目中

  9. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  10. [Vuforia]二.3D物体识别 - 2

    之前说过10之后的版本没有3dScan了，所以还是9.8的版本或者之前更早的版本。 3d物体扫描需要先下载扫描的APK进行扫面。首先要在手机上装一个扫描程序，扫描现实中的三维物体，然后上传高通官网，在下载成UnityPackage类型让Unity能够使用这个扫描程序可以从高通官网上进行下载，是一个安卓程序。点到Tools往下滑，找到VuforiaObjectScanner下载后解压数据线连接手机，将apk文件拷入手机安装然后刚才解压文件中的Media文件夹打开，两个PDF图打印第一张A4-ObjectScanningTarget.pdf，主要是用来辅助扫描的。好了，接下来就是扫描三维物体。将瓶

随机推荐