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.baidu.com/s/1UzIaq4Lbx6zu8BaV0AfrIw 密码:k8lm

并且需要在火狐和谷歌下载对应插件。
以火狐为例，
安装以下俩个插件，即可解析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

其中
这行代码为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>中调用的js为内腔网页所需要的js插件。
最后一个则是对应了.jslib文件中的Nq（）方法，实现内嵌网页的生成。

完整版index.html代码

  
    
    
    
    
    
    
    
      
    

    
    
  
  
    

      

      

        

        

        
NewNQWeb
      
    
  

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代码
添加如下代码。

2.2.3

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

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

AVProVideo方法在webgl需要的js文件
链接:https://pan.baidu.com/s/1UzIaq4Lbx6zu8BaV0AfrIw 密码:k8lm

两种方法的工程链接：
https://download.csdn.net/download/boyZhenGui/12328690

内嵌网页方法链接（含Demo）：
https://download.csdn.net/download/boyZhenGui/12328653

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