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

真鬼123

已于 2024-07-16 08:48:22 修改

阅读量2.7w

点赞数 36

分类专栏： UnityWebGl Unity功能代码文章标签： unity c# webgl unity3d

于 2020-06-22 09:18:46 首次发布

本文链接：https://blog.csdn.net/boyZhenGui/article/details/105529173

版权

Unity功能代码同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

UnityWebGl

13 篇文章 4 订阅

订阅专栏

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>