Unity WebGl播放m3u8在线视频(监控,直播)解决方案

WebGL版本播放视频是很大的一个坑,教程也不多。以下为工作中使用的两个方法。

一、使用AVProVideo插件

新版AVProVideo插件支持WebGl播放
倒入插件,我用的版本是1.9.4,文章结尾会放链接。

1.修改SourcePath为 Absolute Path Or URL

在下面写上播放的链接,
测试链接为CCTV1:
http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8

在这里插入图片描述

2.打开Platform Specific,添加Js脚本

—————————
选择WebGl;
(1)External Library选择None,则只能在IEge浏览器播放,火狐 ,谷歌不能解码m3u8。
(2)External Library选择Hls Js选项,
需要在打包出来的项目Build中添加一个js脚本,链接:https://pan.quark.cn/s/8674183c63bf
在这里插入图片描述
并且需要在火狐和谷歌下载对应插件。
以火狐为例,
安装以下俩个插件,即可解析m3u8格式。
在这里插入图片描述
需要注意,火狐和谷歌需要跨域之后,才可以打开网站,不然会报错。
火狐跨域链接教程:https://blog.csdn.net/tjj3027/article/details/81354350
谷歌跨域链接教程:
https://www.cnblogs.com/wang-sai-sai/p/10875652.html

3.修改Index.html代码

在这里插入图片描述
在head中添加上
对应刚才添加的hls.min.js脚本路径

4.打包测试即可。

WebGL内嵌网页实现

参考链接https://blog.csdn.net/qq_37114869/article/details/103010446

1.使用html插件,打开在线视频

————————————————————————
打开记事本,复制以下代码,将后缀改为html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>PC端 Chimee-Player解决方案</title>
	<script src="http://lib.baomitu.com/chimee-player/1.1.10/chimee-player.browser.js"></script>
</head>
<div id="wrapper"></div>
<body>
   <script>
 new ChimeePlayer({
  wrapper: '#wrapper',  // video dom容器
   src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
     box: 'hls',
      isLive: true,
    autoplay: true,
     controls: true
     });
</script>
   </body>
   </html>

其中<script src="http://lib.baomitu.com/chimee-player/1.1.10/chimee-player.browser.js"></script>
这行代码为html调用直播插件

可以直接在浏览器打开
在这里插入图片描述

2.Unity与WebGl互通

可以参考:https://blog.csdn.net/yuan9a/article/details/90640498

2.1新版方案
2.1.1 创建一个名字任意,后缀为.jslib的文件。

需要放在Plugins文件夹下
注意 若是mac版本需要注意文本的编码问题,可以改完后缀用vs打开看看,是否乱码。
注意 若传输字符串,需要使用Pointer_stringify(参数),否则传输会出现问题。

mergeInto(LibraryManager.library, {

  Hello: function (str) {
    Nq(Pointer_stringify(str));
  },
});

其中Hellow在unity中使用,Nq对应html中js方法

2.1.2 创建C#脚本
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System.Runtime.InteropServices;

public class NewTest : MonoBehaviour
{
  	 //引用jslib的Hello()方法
  	 //注意是两个_
    [DllImport("__Internal")]
    private static extern void Hello(string str);

    public void New(string str)
    {
        Hello(str);
    }
}

挂载到unity中的Button的OnClick上

2.1.3

打包出WebGl包,将之前创建的播放视频的html,与打包出来的index.html放到同一目录下。
在这里插入图片描述

2.1.4

修改index.html
添加如下代码

<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>

    <script>
        function Nq(str) {
            alert(str);
            layer.open({
                type: 2,
                title: false,
                area: ['800px', '460px'],
                shade: 0.8,
                closeBtn: 0,
                shadeClose: true,
                content: './indexZhibo.html'
            });}
    </script>

前两个<script>中调用的js为内腔网页所需要的js插件。
最后一个则是对应了.jslib文件中的Nq()方法,实现内嵌网页的生成。

完整版index.html代码

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | NewNQWeb</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>
      <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>

    <script>
        function Nq(str) {
            alert(str);
            layer.open({
                type: 2,
                title: false,
                area: ['800px', '460px'],
                shade: 0.8,
                closeBtn: 0,
                shadeClose: true,
                content: './indexZhibo.html'
            });}
    </script>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/nqtest.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">NewNQWeb</div>
      </div>
    </div>
  </body>
</html>

2.1.5打开效果

在这里插入图片描述
点击黑色区域返回

2.2旧版方案
2.2.1

不需要编写.jslib文件
只需要在C#中使用下面代码即可调用html中js方法

    public void Old(string str)
    {
        Application.ExternalCall("Nq", str);
    }
2.2.2

同新版本一样的修改html代码
添加如下代码。

    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>

    <script>
        function Nq(str) {
            alert(str);
            layer.open({
                type: 2,
                title: false,
                area: ['800px', '460px'],
                shade: 0.8,
                closeBtn: 0,
                shadeClose: true,
                content: './indexZhibo.html'
            });}
    </script>
2.2.3

将C#方法绑定到Button的OnClick上即可。

AVProVideo视频播放插件1.9.4
链接:https://pan.baidu.com/s/1ixEzU-5TkAWhhEm02Nh0yA 密码:y2s5

AVProVideo方法在webgl需要的js文件
链接:https://pan.quark.cn/s/8674183c63bf

AVProVideo插件方式播放视频:
https://download.csdn.net/download/boyZhenGui/12328690
https://pan.quark.cn/s/b80049d02d6b

内嵌网页方法链接(含Demo):
https://download.csdn.net/download/boyZhenGui/12328653
https://pan.quark.cn/s/771cd26c2435

感谢阅读,如果对你有帮助可以给我点个赞和收藏,谢谢啦

评论 58
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

真鬼123

祝你节节高升岁岁平安越来越漂亮

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值