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

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

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

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

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