企业官网建设流程全解析

1. 项目概述：当Unity WebGL遇上m3u8直播流

最近在做一个智慧园区或者安防监控类的Web项目，客户要求在网页里能实时查看多个摄像头的监控画面，而且必须是那种低延迟的直播流。技术栈定的是Unity WebGL，因为项目里还有不少3D场景和交互逻辑。需求一提，团队里就有人嘀咕了：Unity WebGL播个普通视频还行，要播主流的HLS（也就是.m3u8格式）直播流，能行吗？网上一搜，果然，各种“黑屏”、“卡顿”、“iOS不支持”的帖子扑面而来。

这不只是我一个人的问题。看看那些热搜词，“unity程序打开黑屏无响应”、“m3u8视频转换失败”、“m3u8怎么配置直播不黑屏”，每一个背后都是开发者踩过的坑。尤其是当项目需要面向所有浏览器，特别是移动端的Safari时，兼容性问题就成了拦路虎。很多人可能第一反应是去找各种付费的Unity插件或者第三方服务，但成本一下就上去了，而且集成复杂度也高。

所以，我花了些时间，亲测了一套完全免费的解决方案，核心目标就一个：在Unity WebGL构建的网页中，稳定、流畅地播放m3u8格式的在线视频流，无论是监控回看还是实时直播，都要能搞定。这套方案不依赖昂贵的商业插件，而是巧妙地利用现代浏览器的原生能力与Unity进行通信，实现了“鱼与熊掌”的兼得。下面，我就把完整的思路、技术选型、实操步骤，以及最关键的那些“坑”和解决技巧，毫无保留地分享出来。

2. 核心思路与技术选型：为什么是“前端播放器+Unity桥接”

2.1 问题本质与现有方案的局限

首先，我们必须认清一个现实：Unity WebGL 本身并不原生支持 HLS (m3u8) 或 RTMP 这类流媒体协议。它的VideoPlayer组件在 WebGL 平台上，主要支持直接播放网络上的.mp4、.webm等静态视频文件。当你把一个 m3u8 链接丢给VideoPlayer时，它无法理解这个“播放列表”文件，更不用说根据列表去动态请求和拼接一个个的.ts视频切片了。这就是导致黑屏、无法播放的根本原因。

那么，常见的付费插件方案是如何工作的呢？它们通常会在 C# 侧集成一个用 C/C++ 编译的、针对 WebAssembly (Wasm) 优化的媒体解码库（如 FFmpeg），或者依赖一些特定的浏览器插件。这些方案有其价值，尤其是在需要深度控制解码过程或处理特殊编码时。但它们也带来了明显的缺点：

1. 增加包体体积：FFmpeg 的 Wasm 模块动辄几MB甚至十几MB，对于追求首屏加载速度的 Web 应用来说是沉重的负担。
2. 兼容性风险：不同浏览器的 Wasm 内存管理、线程支持存在差异，可能导致意料之外的崩溃或性能问题。
3. 成本：优质的商业插件价格不菲。

2.2 我们的免费方案：架构拆解

我们的思路是“扬长避短，借力打力”。Unity WebGL 不擅长流媒体解码，但现代浏览器（Chrome, Firefox, Safari, Edge）对此却是“原生支持”的。HTML5 的<video>标签，配合成熟的 JavaScript 播放器库（如hls.js、video.js），可以非常完美、高效地播放 m3u8 流。

因此，核心架构变得清晰：

1. 在前端（HTML/JavaScript）层面：使用一个成熟的 JS 播放器库来加载和播放 m3u8 流。这一步解决了流媒体协议解析、自适应码率、解码渲染等所有复杂问题。
2. 在 Unity（C#）层面：我们需要知道视频何时开始播放、何时暂停、当前播放时间等状态，并且要能控制播放、暂停、跳转等操作。
3. 在两者之间：建立一座坚固、高效的“通信桥梁”。这就是 Unity WebGL 提供的jslib(JavaScript Library) 和WebGL互操作接口。我们通过它，让 C# 代码可以调用 JS 函数来控制播放器，也让 JS 播放器可以把状态事件回调给 C#。

这个方案的巨大优势在于：

• 零成本：使用的都是开源或浏览器原生技术。
• 高性能、高兼容性：直接使用浏览器优化过的视频解码管线，效率最高，兼容性跟随浏览器本身。
• 功能强大：可以复用成熟 JS 播放器生态的所有功能，如清晰度切换、字幕、广告插入、DRM 支持等。
• 包体小巧：Unity 侧只需要极少的通信代码，主要逻辑和库在前端，不增加 Unity 的构建体积。

注意：这个方案的核心前提是你的应用以 WebGL 形式在浏览器中运行。对于 iOS/Android 原生 App，则需要不同的原生插件方案，不在本文讨论范围内。但好消息是，对于需要在移动端浏览器访问的 Web 项目，此方案同样有效。

2.3 技术栈确定

基于以上思路，我们确定具体的技术组件：

• Unity 版本：2020.3 LTS 或更新版本（确保 WebGL 模块的稳定性）。
• 前端播放器：hls.js。它是一个纯 JavaScript 实现的 HLS 客户端，兼容性极好，是处理 m3u8 的事实标准库。
• 通信桥梁：Unity Engine 命名空间下的WebGL互操作 API（如Application.ExternalCall,[DllImport(“__Internal”)]）以及.jslib插件文件。
• UI 呈现：方案有两种选择，下文会详细对比：
  • 方案A（叠加层）：将 HTML5<video>元素作为一层 DOM，覆盖在 Unity Canvas 之上。适合视频作为独立窗口或浮动层。
  • 方案B（渲染到纹理）：这是更高级、更沉浸的方案。通过浏览器 API 将<video>元素的实时画面捕获到一个MediaStream，然后通过 WebGL 纹理将其送入 Unity，最终渲染到RawImage或材质球上。这样视频就能完美融入 3D 场景。

3. 实战搭建：从零开始构建播放系统

接下来，我们进入实战环节。我将以更沉浸、效果更好的“渲染到纹理”方案为例，详细讲解每一步。如果你只需要简单的叠加播放，可以跳过纹理捕获部分，直接看通信逻辑。

3.1 第一步：Unity 项目基础设置

1. 创建新项目或打开现有项目。在Build Settings中，将平台切换到WebGL。
2. 修改 Player Settings：
   • Resolution and Presentation: 建议取消勾选Run In Background，避免标签页切换时视频播放出现问题。
   • Publishing Settings:
     • Compression Format: 改为Disabled。这可以避免一些因为压缩导致的资源加载路径问题，在开发调试阶段建议关闭，上线时可酌情开启Brotli或Gzip。
     • Data Caching: 根据需求启用。
   • 最关键的一步：在Publishing Settings>WebGL Templates下拉框中，选择Minimal模板。我们后面需要手动修改这个模板的index.html文件。

3.2 第二步：编写 C# 脚本——通信与控制的枢纽

在 Unity 中创建一个 C# 脚本，例如HLSVideoController.cs。这个脚本将负责与 JavaScript 交互。

using UnityEngine; using UnityEngine.UI; // 如果使用RawImage using System.Runtime.InteropServices; public class HLSVideoController : MonoBehaviour { // 用于显示视频的RawImage组件 public RawImage videoDisplayRawImage; // 公开一个字段用于在Inspector中设置m3u8地址 public string m3u8Url = “https://example.com/live/stream.m3u8”; // 声明来自.jslib文件的JavaScript函数 [DllImport(“__Internal”)] private static extern void Js_InitializeVideoPlayer(string videoElementId, string url, string objectName, string callbackName); [DllImport(“__Internal”)] private static extern void Js_PlayVideo(); [DllImport(“__Internal”)] private static extern void Js_PauseVideo(); [DllImport(“__Internal”)] private static extern void Js_SetVideoVolume(float volume); [DllImport(“__Internal”)] private static extern void Js_SeekVideo(float time); void Start() { // 检查运行平台，非WebGL下不执行 if (Application.platform != RuntimePlatform.WebGLPlayer) { Debug.LogWarning(“HLS视频控制器仅在WebGL平台生效。”); return; } // 为视频显示区域生成一个唯一的ID，传递给JS string videoDisplayId = “unityVideoDisplay_” + this.GetInstanceID(); if (videoDisplayRawImage != null) { // 将RawImage的GameObject名称设为这个ID，方便JS端查找其对应的渲染纹理 videoDisplayRawImage.gameObject.name = videoDisplayId; } // 调用JS初始化函数 // 参数：视频显示区域ID， m3u8地址， Unity中接收回调的GameObject名， 回调方法名 Js_InitializeVideoPlayer(videoDisplayId, m3u8Url, this.gameObject.name, “OnJsVideoEvent”); } // 提供给UI按钮调用的方法 public void Play() { if (Application.platform == RuntimePlatform.WebGLPlayer) Js_PlayVideo(); } public void Pause() { if (Application.platform == RuntimePlatform.WebGLPlayer) Js_PauseVideo(); } public void SetVolume(float vol) { if (Application.platform == RuntimePlatform.WebGLPlayer) Js_SetVideoVolume(Mathf.Clamp01(vol)); } public void Seek(float time) { if (Application.platform == RuntimePlatform.WebGLPlayer) Js_SeekVideo(time); } // JavaScript回调方法，必须声明为public且参数为string public void OnJsVideoEvent(string eventData) { Debug.Log($“收到JS事件: {eventData}”); // 这里可以解析eventData（例如JSON字符串），根据事件类型（播放、暂停、错误等）更新Unity内的UI状态 // 例如： if (eventData.Contains(“”playing””)) { /* 更新播放按钮图标 */ } } }

关键点解析：

• [DllImport(“__Internal”)]：这是 Unity WebGL 调用 JavaScript 函数的标准方式。它声明一个函数在.jslib文件中实现。
• Js_InitializeVideoPlayer是最复杂的函数，它负责在 JS 端创建播放器、绑定事件，并建立与特定 UnityGameObject的回调通道。
• OnJsVideoEvent是回调函数。JS 端会在视频状态变化时（如开始播放、缓冲、出错）调用unityInstance.SendMessage来触发此方法。eventData可以用来传递更结构化的 JSON 信息。

3.3 第三步：创建 .jslib 插件文件——通信的具体实现

在 Assets 文件夹下创建一个名为Plugins的文件夹（如果没有的话），然后在里面创建一个文本文件，重命名为WebGLVideo.jslib。注意后缀是.jslib。

mergeInto(LibraryManager.library, { // 全局变量，用于保存播放器实例和相关信息 _videoPlayerInstance: null, _videoElement: null, _videoTexture: null, _gl: null, _unityTextureId: null, _videoDisplayId: “”, // 初始化函数 Js_InitializeVideoPlayer: function (videoDisplayIdPtr, urlPtr, objectNamePtr, callbackNamePtr) { // 将Unity传递过来的指针转换为JS字符串 var videoDisplayId = Pointer_stringify(videoDisplayIdPtr); var url = Pointer_stringify(urlPtr); var objectName = Pointer_stringify(objectNamePtr); var callbackName = Pointer_stringify(callbackNamePtr); console.log(“初始化视频播放器，目标显示ID:”, videoDisplayId, “URL:”, url); // 1. 创建隐藏的video元素 var videoElement = document.createElement(‘video’); videoElement.id = ‘hlsVideoElement_’ + Date.now(); videoElement.style.position = ‘absolute’; videoElement.style.left = ‘-9999px’; // 移出视口，不可见但可播放 videoElement.crossOrigin = ‘anonymous’; // 关键！用于跨域视频纹理捕获 videoElement.muted = true; // 初始静音，避免自动播放策略问题 videoElement.playsInline = true; // 移动端必须，防止全屏播放 document.body.appendChild(videoElement); // 2. 加载并初始化hls.js if (Hls.isSupported()) { var hls = new Hls({ enableWorker: true, // 使用Web Worker提升性能 lowLatencyMode: true, // 低延迟模式，适合直播 backBufferLength: 90, // 设置合适的缓冲区长度 }); hls.loadSource(url); hls.attachMedia(videoElement); hls.on(Hls.Events.MANIFEST_PARSED, function () { console.log(“HLS 清单加载完成，可以开始播放。”); // 通知Unity准备就绪 unityInstance.SendMessage(objectName, callbackName, ‘{“event”:”ready”}’); }); hls.on(Hls.Events.ERROR, function (event, data) { console.error(“HLS 错误:”, data); unityInstance.SendMessage(objectName, callbackName, ‘{“event”:”error”, “details”:”’ + data.details + ‘“}’); }); this._videoPlayerInstance = hls; } else if (videoElement.canPlayType(‘application/vnd.apple.mpegurl’)) { // 对于原生支持HLS的浏览器（如Safari） videoElement.src = url; videoElement.addEventListener(‘loadedmetadata’, function () { unityInstance.SendMessage(objectName, callbackName, ‘{“event”:”ready”}’); }); videoElement.addEventListener(‘error’, function (e) { unityInstance.SendMessage(objectName, callbackName, ‘{“event”:”error”, “details”:”native error”}’); }); this._videoPlayerInstance = ‘native’; } else { console.error(“当前浏览器不支持HLS播放。”); unityInstance.SendMessage(objectName, callbackName, ‘{“event”:”error”, “details”:”browser not supported”}’); return; } this._videoElement = videoElement; this._videoDisplayId = videoDisplayId; // 3. 启动视频捕获到纹理的流程 this._startVideoTextureCapture(videoElement, videoDisplayId, objectName, callbackName); }, // 开始将视频流捕获到WebGL纹理 _startVideoTextureCapture: function (videoElement, displayId, objectName, callbackName) { var self = this; // 等待视频元数据就绪 var onLoadedMetadata = function () { // 创建视频流 var stream = videoElement.captureStream ? videoElement.captureStream() : videoElement.mozCaptureStream ? videoElement.mozCaptureStream() : null; if (!stream) { console.warn(“浏览器不支持captureStream，无法渲染到纹理。将使用叠加层模式。”); // 可以回退到叠加层方案 self._setupOverlayDisplay(videoElement, displayId); unityInstance.SendMessage(objectName, callbackName, ‘{“event”:”fallback_to_overlay”}’); return; } // 创建视频轨道 var videoTrack = stream.getVideoTracks()[0]; // 创建ImageCapture API（更现代和高效） var imageCapture = new ImageCapture(videoTrack); // 获取Unity WebGL上下文 var canvas = document.querySelector(‘#unity-canvas’); // Unity默认canvas ID self._gl = canvas.getContext(‘webgl2’) || canvas.getContext(‘webgl’); if (!self._gl) { console.error(“无法获取WebGL上下文。”); return; } // 创建纹理 self._unityTextureId = self._gl.createTexture(); self._gl.bindTexture(self._gl.TEXTURE_2D, self._unityTextureId); self._gl.texParameteri(self._gl.TEXTURE_2D, self._gl.TEXTURE_MIN_FILTER, self._gl.LINEAR); self._gl.texParameteri(self._gl.TEXTURE_2D, self._gl.TEXTURE_WRAP_S, self._gl.CLAMP_TO_EDGE); self._gl.texParameteri(self._gl.TEXTURE_2D, self._gl.TEXTURE_WRAP_T, self._gl.CLAMP_TO_EDGE); // 先绑定一个空图像 self._gl.texImage2D(self._gl.TEXTURE_2D, 0, self._gl.RGBA, 1, 1, 0, self._gl.RGBA, self._gl.UNSIGNED_BYTE, null); // 通知Unity纹理已创建，并传递纹理ID（这里需要更复杂的机制，通常通过另一个自定义函数） // 简化方案：我们通过一个全局变量或事件让Unity侧知道纹理ID，然后由Unity侧主动轮询或通过另一个jslib函数获取。 // 此处为演示，我们假设有一个Js_GetVideoTextureId函数供Unity调用。 self._videoTextureReady = true; // 开始更新纹理的循环 function updateVideoTexture() { if (!self._videoElement || self._videoElement.readyState < 2) { requestAnimationFrame(updateVideoTexture); return; } self._gl.bindTexture(self._gl.TEXTURE_2D, self._unityTextureId); // 使用texImage2D直接上传video元素作为纹理源（大多数浏览器支持） self._gl.texImage2D(self._gl.TEXTURE_2D, 0, self._gl.RGBA, self._gl.RGBA, self._gl.UNSIGNED_BYTE, self._videoElement); requestAnimationFrame(updateVideoTexture); } updateVideoTexture(); // 通知Unity纹理流已开始 unityInstance.SendMessage(objectName, callbackName, ‘{“event”:”texture_stream_started”, “textureId”:’ + self._unityTextureId + ‘}’); }; if (videoElement.readyState >= 1) { // HAVE_METADATA onLoadedMetadata(); } else { videoElement.addEventListener(‘loadedmetadata’, onLoadedMetadata); } }, // 备选方案：设置叠加层显示 _setupOverlayDisplay: function (videoElement, displayId) { // 找到Unity中对应的UI容器（假设是一个全屏的RawImage，我们将其隐藏，用HTML video覆盖） var unityDisplay = document.getElementById(displayId); // 注意：Unity WebGL的UI元素不一定直接有DOM ID，这里需要变通。 // 更通用的做法：直接控制video元素的样式，将其定位到Unity Canvas之上。 videoElement.style.position = ‘absolute’; videoElement.style.top = ‘0’; videoElement.style.left = ‘0’; videoElement.style.width = ‘100%’; videoElement.style.height = ‘100%’; videoElement.style.zIndex = ‘999’; // 确保在最上层 videoElement.style.pointerEvents = ‘none’; // 允许点击穿透到Unity // 将其移动到Unity canvas的容器内 var unityContainer = document.querySelector(‘#unity-container’); unityContainer.appendChild(videoElement); }, // 播放 Js_PlayVideo: function () { if (this._videoElement) { var playPromise = this._videoElement.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.error(“播放失败:”, error); // 通常是因为浏览器自动播放策略，需要用户交互后触发。可以静音播放或提示用户。 this._videoElement.muted = true; this._videoElement.play(); }); } } }, // 暂停 Js_PauseVideo: function () { if (this._videoElement) { this._videoElement.pause(); } }, // 设置音量 Js_SetVideoVolume: function (volume) { if (this._videoElement) { this._videoElement.volume = volume; if (volume > 0) { this._videoElement.muted = false; } } }, // 跳转 Js_SeekVideo: function (time) { if (this._videoElement && isFinite(time)) { this._videoElement.currentTime = time; } }, // 供Unity获取WebGL纹理ID的函数 Js_GetVideoTextureId: function () { return this._unityTextureId; } });

这个.jslib文件是通信的核心，它做了以下几件关键事：

1. 创建了一个隐藏的<video>元素。
2. 检测浏览器并初始化hls.js或使用原生 HLS 支持。
3. 尝试使用captureStream和ImageCapture/texImage2D将视频帧捕获到 WebGL 纹理。
4. 提供了播放、暂停等控制函数。
5. 处理了错误和状态回调。

3.4 第四步：修改 HTML 模板——引入依赖与配置

找到你的 Unity 项目目录：Assets/WebGLTemplates/Minimal（如果你用的是 Minimal 模板）。打开index.html文件进行修改。

1. 在<head>部分引入 hls.js 库：

   <head> <!-- 其他meta标签 --> <script src=“https://cdn.jsdelivr.net/npm/hls.js@latest”></script> <!-- 或者下载到本地引用 --> <!-- <script src=“TemplateData/hls.min.js”></script> --> </head>

2. 在<body>开头，Unity加载之前，添加一个加载提示（可选但推荐）：

   <body> <div id=“loadingBox” style=“...你的加载样式...”> <p>加载视频播放组件...</p> </div> <div id=“unity-container” ...> ... </div>

3. 修改 Unity 实例化代码，确保在createUnityInstance时，canvas的上下文属性preserveDrawingBuffer可能被需要（对于某些纹理操作）：

   createUnityInstance(canvas, config, (progress) => {...}).then((unityInstance) => { window.unityInstance = unityInstance; // 全局挂载，方便.jslib调用 document.getElementById(“loadingBox”).style.display = “none”; // 隐藏加载提示 });

3.5 第五步：Unity 场景设置与纹理对接

1. 在 Unity 场景中创建一个 UIRawImage，将其GameObject命名为你在脚本中设定的唯一 ID（如unityVideoDisplay_12345）。将HLSVideoController脚本挂载到该物体或另一个管理物体上，并将videoDisplayRawImage字段拖拽赋值。
2. 在HLSVideoController脚本中，我们需要扩展功能来接收并应用来自 JS 的纹理。这通常需要编写一个额外的 Native Plugin，通过GL.IssuePluginEvent来从自定义的渲染线程获取纹理。这是一个相对高级的主题。简化替代方案（针对叠加层方案）：如果你采用方案A（叠加层），则跳过纹理捕获的所有复杂步骤。JS 端只需创建并控制一个叠加在 Canvas 上的<video>元素。Unity 侧的RawImage可以隐藏或用于显示其他UI。所有播放控制都通过.jslib接口进行，视频画面由浏览器直接渲染在顶层。这是实现起来最快、最稳定的方法，适合视频作为独立面板的场景。

4. 关键难点、兼容性问题与深度优化

4.1 iOS Safari 兼容性：最大的“坑”与解决方案

回到我们开头看到的那个社区问题：“unitywebgl m3u8视频流不能在ios端正常播放”。这是最高频的痛点。其根源和解决方案如下：

根源分析：

1. 自动播放策略：iOS Safari 对视频自动播放有最严格的限制。没有用户交互（如点击）之前，video.play()返回的 Promise 一定会被拒绝，除非视频是muted状态。
2. 全屏播放：在 iOS 上，<video>播放非内联视频时会自动进入全屏，这会打断 WebGL 渲染上下文，导致 Unity 画面黑屏或停滞。
3. 系统版本差异：如社区片段所述，某些特定 iOS 版本（如 15.4.0, 15.4.1）与 Unity WebGL 存在已知兼容性问题，可能导致 WebGL 上下文丢失。

解决方案组合拳：

1. 强制内联播放：在 JS 初始化 video 元素时，必须设置playsInline = true和webkit-playsinline=“true”（旧版兼容）。

   videoElement.setAttribute(‘playsinline’, ‘true’); videoElement.setAttribute(‘webkit-playsinline’, ‘true’); videoElement.playsInline = true;

2. 静音初始化与用户交互后解锁：视频初始创建时设置muted = true。将“开始播放”按钮做在 Unity 的 UI 上。当用户点击这个 Unity 按钮时，通过Js_PlayVideo()调用 JS。在 JS 的Js_PlayVideo函数中，先尝试播放，如果失败（因非静音），则捕获错误，设置muted = true再次尝试播放，同时可以显示一个 Unity UI 提示，引导用户“点击此处开启声音”。用户再次点击后，再调用Js_SetVideoVolume(1.0)。
3. 处理页面可见性：监听document.visibilitychange事件。当页面从后台切回前台（这在移动端很常见），Safari 可能会暂停视频或导致 WebGL 上下文问题。需要在恢复可见时，重新检查并恢复视频播放和纹理绑定。

   document.addEventListener(‘visibilitychange’, function() { if (!document.hidden && self._videoElement && self._videoElement.paused) { // 谨慎恢复播放，可能需要再次检查用户交互状态 // 可以尝试静音播放 self._videoElement.muted = true; self._videoElement.play().then(()=>{ console.log(“页面恢复，视频自动恢复播放（静音）”); }); } });

4. 规避有问题的 iOS 版本：在网页加载时，通过navigator.userAgent检测 iOS 版本，如果落在已知的问题版本区间（如 15.4.0-15.4.1），可以向用户提示建议升级系统。这是不得已的兜底策略。

4.2 跨域（CORS）与 HTTPS 问题

• CORS：如果你的 m3u8 和 .ts 文件来自另一个域名，服务器必须返回正确的 CORS 头（如Access-Control-Allow-Origin: *）。否则，浏览器会阻止 JS 读取视频数据，导致黑屏或错误。这是服务端必须配置的。
• HTTPS：现代浏览器（尤其是iOS）在非本地环境下，要求访问媒体资源的页面必须是 HTTPS。如果你的 Unity WebGL 页面部署在 HTTPS 下，但视频流是 HTTP，也会被阻止。务必确保视频流服务器也支持 HTTPS。

4.3 性能与内存优化

1. 纹理尺寸：视频纹理不要无脑用原分辨率。根据 RawImage 的实际显示尺寸，在 JS 端可以适当降低videoElement的width和height（虽然不影响源流，但影响捕获的帧尺寸），或者在 Unity 侧使用缩放。
2. 帧率控制：在updateVideoTexture的requestAnimationFrame循环中，不是每一帧都必须更新纹理。对于非交互式监控画面，可以尝试使用setTimeout或限制更新频率（如 30fps），以降低 CPU/GPU 压力。
3. 销毁与清理：当切换视频源或关闭播放器时，务必在 JS 端销毁 Hls 实例 (hls.destroy())，停止视频元素，移除事件监听器，并释放 WebGL 纹理 (gl.deleteTexture(textureId))，防止内存泄漏。

4.4 多实例与画中画支持

监控场景常需要多路视频。只需为每一路视频创建独立的<video>元素、Hls 实例和纹理 ID，并在 C# 端用不同的HLSVideoController实例进行管理。注意 DOM 元素和 WebGL 纹理的数量上限。画中画功能可以直接利用videoElement.requestPictureInPicture()API，由 JS 端实现，并通过回调通知 Unity 状态。

5. 部署上线与实测心得

将项目构建（Build）后，你会得到一个包含index.html、Build文件夹等内容的输出目录。你需要将这个目录整个部署到你的 Web 服务器（如 Nginx, Apache, 或云存储如 AWS S3 + CloudFront）。

实测环境与结果：

• Windows/Mac Chrome/Firefox/Edge：播放最稳定，性能最佳，支持所有高级功能（如 captureStream）。
• iOS Safari (14+)：按照上述兼容性方案处理后，可以稳定内联播放。低延迟直播流（LL-HLS）效果良好。需要特别注意用户交互触发。
• Android Chrome：表现与桌面版 Chrome 类似，非常稳定。

最后的叮嘱：

1. 永远先测试静音播放：这是绕过自动播放策略最有效的手段。
2. 善用浏览器开发者工具：F12 打开 Network 面板，查看 m3u8 和 ts 文件是否成功加载；Console 面板查看 JS 错误；在 iOS 上，可以通过 macOS 的 Safari 远程调试功能连接真机，进行深度排查。
3. 备选流格式：如果条件允许，让服务端同时提供 MPEG-DASH（.mpd格式）的流。可以使用dash.js库作为备选方案，有时兼容性表现不同。
4. 错误处理要健壮：在 C# 的OnJsVideoEvent回调中，详细解析错误信息，并在 Unity UI 上给予用户友好的提示，如“网络不稳定，正在重连…”、“视频格式不支持”等。

这套方案，从零搭建到稳定运行，我花了大约一周时间踩坑和优化。它虽然没有商业插件开箱即用的便利，但给了你最大的控制权和零成本的自由度，并且能让你彻底理解 Unity WebGL 与浏览器环境交互的底层逻辑。对于需要深度定制视频播放功能，尤其是嵌入复杂 3D 场景的监控、直播、教育类应用，这条路径值得你投入时间。