Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码)

这篇具有很好参考价值的文章主要介绍了Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

之前我介绍了替代Universal?Media?PlayerUMP播放石云监控视频流(ezopen)的功能,效果还是很明显的,笔者的测试是差不多3-5秒就能打开监控画面,不过稍微遗憾的是,之前的功能是iframe打开石云提供的播放网页的形式,功能基本只有画质切换,声音开关等;具体可以移步查看(https://blog.csdn.net/qq_33789001/article/details/132025298)。本文的功能还是在3D WebView for Windows and macOS (Web Browser)?插件的基础上使用EZUIKit的插件实现了云台控制(支持云台的设备)功能。

效果

WebGL的支持:
Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码),Unity3D,快速播放视频流,Unity3d源码,Unity播放监控,UnityWebGL监控播放,Unity快速播放直播流

云台支持:

Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码),Unity3D,快速播放视频流,Unity3d源码,Unity播放监控,UnityWebGL监控播放,Unity快速播放直播流

功能实现

笔者所用的插件:
LitJson 用于生成/解析网络请求的json。
DOTweenPro 用于制作简单的窗口弹出、关闭动画;
3D WebView for Windows and macOS (Web Browser) 用于打开网页(使用说明(https://blog.csdn.net/qq_33789001/article/details/126180804))的插件(看需求使用Embedded Browser也可以),需要WebGL 平台的还需要2D WebView for WebGL (Web Browser IFrame)插件。
获取accessToken,管理员账号根据appKey和secret获取accessToken;获取监控视频流等基础功能 就不再次赘述了,可以参考前言中的文章。

这里打开本地网页的方式函数:

string url = "streaming-assets://CamLocalWebPlay/WebPlayCamVideo.html?url=" + path + "&token=" + YsAccessTokenMgr.instance.AT;
canvasWebView.WebView.LoadUrl(url);

streaming-assets:// 表示文件的路径在Unity3d的StreamingAssets文件夹下。

方式一 本地iframe

视频嵌入式播放方式,详细说明请看:https://open.ys7.com/bbs/article/20。所以就是本地的网页,这里我直接先粘出代码:

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>本地网页监控播放</title>

    <style>
        html, body, iframe {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        #wrap {
            width: 100%;
            height: 100%;
        }

        iframe {
            border: none;
        }

    </style>
  <body onload="document.documentElement.webkitRequestFullScreen();">
      <div id="wrap">
          <iframe id="videoframe">
          </iframe>
      </div>
    <script>
        function getUrlParam(key) {
            const search = window.location.search.substring(1);
            const paramsArray = search.split("&");
            let value = null;
            paramsArray.forEach((param) => {
                const [paramKey, paramValue] = param.split("=");
                if (key === paramKey) {
                    value = paramValue;
                }
            });
            return value;
        }
        var iframe = document.getElementById("videoframe");
        iframe.src = "https://open.ys7.com/ezopen/h5/iframe_se?url=" + getUrlParam("url") 
            + "&autoplay=1&audio=0&accessToken=" + getUrlParam("token") ;
    </script>
  </body>
</html>

这里根据输入的url 和token生成iframe_se的参数,即可正常播放。

方式一 本地EZUIKit

EZUIKit插件算是官方给出的插件,降低接入难度,适配自定义UI,适配主流框架;低延时预览,云存储回放,SD卡回放。功能API丰富,如:播放控制,音频控制,视频截图,实时获取视频OSDTime,视频录制,设备对讲,电子放大,全屏等。
其使用方式也比较简单:
创建DOM

  <div id="video-container"></div>

直播播放

var player = new EZUIKit.EZUIKitPlayer({
  id: 'video-container', // 视频容器ID
  accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
  url: 'ezopen://open.ys7.com/G39444019/1.live',
  width: 600,
  height: 400,
})

回放播放

    var player = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      width: 600,
      height: 400,
      accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
      url: 'ezopen://open.ys7.com/G39444019/1.rec'
})

使用它需要先把代码仓库git下来,并将EZUIKit-JavaScript-npm/demos/base-demo/ezuikit_static/文件夹放入功能中
引入脚本:

 <script src="./ezuikit.js"></script>

编写一个很简单的网页仅包含一个元素

<div id="video-container"></div>  

并且通过EZUIKit.EZUIKitPlayer函数进行初始化:

var player = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
      url: 'ezopen://open.ys7.com/203751922/1.live',
    })

这里关键的就是需要传入url和accessToken的值,这个之前通过萤石的后台已经获取。

可以设置模板:

Template // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;
theme-可配置主题;

笔者尝试过后,发现只有standard-标准版和theme-可配置主题有效,其它为白屏效果。
standard-标准版:
Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码),Unity3D,快速播放视频流,Unity3d源码,Unity播放监控,UnityWebGL监控播放,Unity快速播放直播流

theme-可配置主题:
Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码),Unity3D,快速播放视频流,Unity3d源码,Unity播放监控,UnityWebGL监控播放,Unity快速播放直播流

点击云台控制按钮可以调出云台的控制面板:

Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码),Unity3D,快速播放视频流,Unity3d源码,Unity播放监控,UnityWebGL监控播放,Unity快速播放直播流

也可以自定义按钮来控制播放:

结束播放: player.stop() 开启声音: player.openSound()
关闭声音: player.closeSound()
开始录像: player.startSave()
结束录像: player.stopSave()
视频截图: player.capturePicture()
全屏(自动适配移动端pc端全屏): player.fullScreen()
取消全屏: player.cancelFullScreen()
获取播放时间回调: player.getOSDTime()
开始对讲: player.startTalk()
结束对讲: player.stopTalk()

工程源码

完整的工程源码:https://download.csdn.net/download/qq_33789001/88135255
无法打开说明审核未通过。

现在工程后,打开项目中的Main.unity场景,选中FunNodes>YsAccessTokenMgr节点设置您自己的appKey和appSecret:
Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码),Unity3D,快速播放视频流,Unity3d源码,Unity播放监控,UnityWebGL监控播放,Unity快速播放直播流

选中Icon_Camera修改视频标签的信息deviceSerial和channelNo:
Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码),Unity3D,快速播放视频流,Unity3d源码,Unity播放监控,UnityWebGL监控播放,Unity快速播放直播流

确保的信息都是同一个账号下面的,运行后点击视频图标即可看到播放的效果了。文章来源地址https://www.toymoban.com/news/detail-649647.html

到了这里,关于Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity3D实现登陆注册功能,实现本地存储读取

    untiy登录注册功能的实现,可以永久本地存储。C#源代码,也可以用相同的办法存储读取玩家的其他信息或自定义的游戏设置 实现了判断用户名是否存在,密码是否前后一致,密码是否正确等。 这是注册界面功能 以下是登录页功能      

    2024年02月13日
    浏览(48)
  • Unity3D中的C#协程(概念、使用方法、底层原理)

             Unity3D 中的协程是针对 Unity3D 框架和 C# 编程语言定制的 ,具有便捷的使用方式和良好的效率。其他语言Python、Lua等也支持协程,但是底层实现的细节可能不同。在 Unity3D 引擎中, 协程被 Unity3D 引擎的主循环所驱动 。         协程(Coroutine)是一种编程概念

    2024年02月08日
    浏览(54)
  • Unity3D学习记录04——利用射线实现角色类似LOL的移动

    首先新建一个空白的GameObject,挂在一个MouseManager的脚本 实现思路: 通过获取鼠标点击的位置,获得该位置的信息,然后使角色移动到该位置 MouseManager脚本的代码如下:   代码解释: 先创建了一个Action类型的事件OnMouseClicked 这个是C#中事件的内容,我们可以在满足条件的时

    2024年02月08日
    浏览(56)
  • C#的Random与Unity3D的Random.Range()

    目录 C#的Random Unity3D的Random.Range() 在C#中,Random类用于生成伪随机数。它位于System命名空间下,所以要在代码中使用Random类,需要添加以下using语句: 在创建Random对象时,可以选择使用当前时间作为种子,也可以指定一个整数值作为种子。如果使用相同的种子来创建Random对象,

    2024年02月16日
    浏览(37)
  • Unity3D中打包WEBGL后读取本地文件数据+网络请求

    首先上一编博主运行html之后报的错误:提示内存不足!!!! 1.首先排查一下webgl包的大小,不能超过2G。 2.F12查看具体错误,在这里博主的是:        a:本地读取StreamingAssets里的配置文件,序列化失败。        b:网络请求方法不能使用JsonConvert.SerializeObject将对象重新序列

    2024年02月08日
    浏览(58)
  • Unity3D实现第一人称移动,随鼠标转动视角+上楼梯(C#)

    第一人称移动: 1、在层级面板创建一个Capsule,命名为Player,将层级面板中的相机拖到Player下方 2、重置Player和摄像机的Transform数值(方便调整摄像机在Player上的位置),然后调整摄像机在Player上的位置 大概将摄像机放到Player眼睛的位置即可。 3、创建一个脚本,命名为Came

    2024年02月13日
    浏览(58)
  • Unity3D C# 中foreach的GC产出(2023年带数据)

    注意:笔者有点被杠怕了…确实也不严谨,也怕看不到,所以开头这里加一句:foreach本身不会产生GC,产生GC的原因是foreach使用了迭代器Enumerator,而取决于容器的不同,有些迭代器的初始化会产生GCAlloc… 很多读者在听一些群内大佬谈话过程中可能会听说 foreach遍历集合会产生

    2024年02月16日
    浏览(50)
  • Unity3D高级编程主程手记 学习笔记二:C#技术要点

    1.Untiy3D中C#的底层原理 Unity底层在运行C#程序时有两种机制:一种是Mono,另一种是IL2CPP。 Mono存在的目的是为了跨平台 ,因为最初C#只支持Windows。而IL可以看成是一种汇编语言且完全基于堆栈,必须运行在虚拟机上。也就是说C#会被编译器编译成IL,当需要他们时就会被实时的

    2024年02月08日
    浏览(64)
  • 【Unity3D】资源文件 ② ( Unity 中场景文件简介 | 查看场景文件内容 | 场景文件相关操作 | 创建场景 | 打开场景 )

    Unity 编辑器中的 场景文件 是以 \\\" .unity \\\" 为后缀的文件 , 该文件中会记录所有 游戏物体 GameObject , 以及游戏物体的相关数据 , 如下内容都是存储在 场景文件 中的 : 游戏物体 GameObject 节点 : 在 Hierarchy 层级窗口 中 场景文件 下的各个节点 都是游戏物体 , 如 主摄像机 , 光源 , 立

    2024年02月09日
    浏览(58)
  • Unity3d 2021版本工程打开Visual Studio错误未找到这些文件,将无法加载的问题

    最近是和Unity3d 2021版本杠上了啊,因为需要的一个功能必须用Unity3d 2021版本,所以带出来了这一系列的问题。这个问题是我在Unity编辑器上Open C# Project之后VS会打不开工程,并提示“命令行中指定了以下文件: 未能找到这些文件,将无法加载。”: 而且***.sln、Assembly-CSharp.c

    2024年02月16日
    浏览(83)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包