企业官网建设流程全解析

1. 项目概述：从Demo到可用的原型

看到这个标题，很多Unity开发者可能会心一笑。确实，网上关于Unity集成WebRTC的教程和Demo不少，但绝大多数都停留在“点对点视频通话”这个经典示例上。你跟着做一遍，两个客户端能互相看到画面，Demo跑通了，然后呢？当你真正想把它用在一个具体的场景里，比如远程监控、远程协作或者直播推流，会发现从Demo到可用的原型之间，隔着一道巨大的鸿沟。

这个项目要做的，就是亲手填平这道鸿沟。我们的目标不是复现一个WebRTC的Hello World，而是构建一个低延迟远程监控系统的可工作原型。这意味着，我们需要考虑信令服务器的搭建、媒体流的控制、网络适应性、简单的UI交互，以及最重要的——如何将这一切打包成一个清晰、可复现的完整工程。你最终得到的，将是一个可以直接运行、并以此为起点进行二次开发的坚实基础，而不是一堆散落的脚本和“理论上可行”的步骤。

为什么强调“原型”？因为一个真正的原型，是功能完整、逻辑自洽、具备扩展性的最小可行性产品。它需要你考虑信令交换、会话管理、错误处理等Demo通常忽略的“脏活累活”。通过这个项目，你会深刻理解WebRTC在Unity中从连接到稳定传输的全链路，掌握将前沿技术转化为具体应用的第一手经验。

2. 核心架构与工具选型解析

2.1 为什么是Unity + WebRTC？

选择这个技术栈，是基于现实应用场景的深思熟虑。Unity强大的跨平台渲染与交互能力，结合WebRTC原生的实时通信协议，为远程监控类应用提供了绝佳的解决方案。

Unity的优势在于其卓越的媒体处理与呈现能力。我们不仅可以通过WebCamTexture或CameraCapture轻松获取摄像头画面，还能对视频流进行实时的后期处理（如滤镜、OSD信息叠加、目标检测框绘制）。Unity的UI系统可以快速构建监控客户端的管理界面，如画面切换、云台控制、录像回放等。更重要的是，Unity支持Windows、macOS、Android、iOS乃至WebGL，这意味着你开发的一套核心逻辑，经过少量适配就能部署到从PC客户端到移动App、乃至网页的几乎所有终端。

WebRTC的优势则在于其“低延迟”和“点对点”特性。它使用UDP传输，并集成了拥塞控制、前向纠错等算法，能在复杂的网络环境下（如家庭Wi-Fi或4G/5G移动网络）实现亚秒级的延迟，这对于需要实时响应的监控场景至关重要。点对点传输在少量客户端时可以减少服务器带宽成本与中转延迟。虽然我们最终需要一个信令服务器来协调连接，但媒体流本身可以在客户端间直接传输。

组合价值：Unity处理“看见”与“交互”，WebRTC负责“实时传输”。两者结合，使得开发具备专业级低延迟视频能力的跨平台监控应用，门槛大大降低。

2.2 核心组件与工作流程拆解

一个完整的远程监控原型，至少包含以下核心组件和流程：

1. 信令服务器 (Signaling Server)：WebRTC本身不负责发现和连接对方。信令服务器用于在客户端之间交换会话描述协议（SDP）和交互式连接建立（ICE）候选者信息。你可以把它理解为一个“牵线搭桥”的中间人。
2. Unity客户端 (Unity Client)：包含两个角色：
   • 发送端 (Sender/Publishing Client)：捕获本地摄像头或屏幕画面，编码为视频流，通过PeerConnection发送。
   • 接收端 (Receiver/Subscribing Client)：接收远端视频流，解码并在Unity的RawImage或Mesh上渲染。
3. 媒体流 (MediaStream)：视频和音频数据的载体。
4. 对等连接 (RTCPeerConnection)：WebRTC的核心对象，管理着与远端对等端的完整通信周期，包括连接建立、媒体流传输和连接关闭。

工作流程简述：

1. 发送端和接收端分别连接到信令服务器。
2. 发送端创建RTCPeerConnection，添加本地媒体流，并生成一个“Offer”（包含SDP描述）。
3. 发送端通过信令服务器将这个Offer发送给指定的接收端。
4. 接收端收到Offer后，创建自己的RTCPeerConnection，并生成一个“Answer”作为回应，同样通过信令服务器发回。
5. 双方在交换SDP的同时，也会通过信令服务器交换网络“ICE候选者”（即可能的连接地址）。
6. 一旦双方匹配到可通的候选者，点对点连接便建立成功，媒体流开始传输。

2.3 关键工具与插件选择

在Unity中使用WebRTC，主要有两种官方路径：

• Unity Render Streaming：Unity官方推出的高性能解决方案，更适合基于浏览器的流媒体传输，架构相对较重，定制性有一定限制。
• WebRTC for Unity Package (com.unity.webrtc)：这是我们将要使用的核心。它是Unity Package Manager中的一个官方预览版包，提供了对WebRTC C++库的封装，允许你在Unity编辑器和各平台原生应用中直接使用WebRTC API，控制粒度更细，更适合构建独立的客户端应用。

我们的选择：com.unity.webrtc。理由很直接：我们需要的是在独立应用（如.exe, .apk）中深度集成WebRTC能力，进行端到端的开发控制，而不是主要服务于网页播放。这个包让我们能以接近Web API的方式在C#中操作WebRTC。

注意：com.unity.webrtc包目前仍处于预览阶段，某些高级API或平台支持可能发生变化。但经过多个项目实践，其核心功能（视频通话、数据通道）已非常稳定，足以支撑原型开发。建议通过Unity Package Manager的“Preview Packages”选项来搜索并安装它。

辅助工具：

• 信令服务器：为了快速原型开发，我们不会从零写一个复杂的信令服务器。我们将使用一个基于Node.js和Socket.IO的轻量级服务器。它代码简单，易于理解和修改，能完美演示信令交换的核心逻辑。
• UI框架：使用Unity原生的UGUI，它足够轻量且高效，适合原型界面搭建。
• 视频渲染：使用UnityEngine.UI.RawImage组件来显示视频流，这是最直接和高效的方式。

3. 项目环境搭建与信令服务器部署

3.1 Unity项目初始化与WebRTC包安装

首先，创建一个新的Unity项目（建议使用2021 LTS或更新版本，确保更好的兼容性）。项目类型选择3D或2D均可，这不会影响核心功能。

1. 打开Unity，进入Window -> Package Manager。
2. 点击左上角的“+”号，选择“Add package from git URL...”。
3. 输入WebRTC包的Git地址：https://github.com/Unity-Technologies/com.unity.webrtc.git。Unity会开始下载和导入这个预览版包。你也可以在Package Manager中，勾选“Show preview packages”后，直接搜索“WebRTC”进行安装。
4. 安装完成后，你需要在Edit -> Project Settings -> Player中，为你目标平台的Other Settings里，确保Allow downloads over HTTP是启用的，因为信令服务器可能使用HTTP。
5. （仅限Windows/OSX编辑器开发）为了在编辑器内测试摄像头捕获，你可能需要启用Virtual Camera Support。这可以在导入的WebRTC包样本中找到相关设置参考。

3.2 轻量级信令服务器实现

信令服务器是独立于Unity项目之外的。我们在项目根目录下创建一个SignalingServer文件夹来存放它。

服务器核心代码 (server.js)：

const express = require('express'); const http = require('http'); const socketIo = require('socket.io'); const app = express(); const server = http.createServer(app); const io = socketIo(server, { cors: { origin: "*", // 原型阶段允许所有来源，生产环境需指定 methods: ["GET", "POST"] } }); // 用于简单房间管理 const rooms = {}; io.on('connection', (socket) => { console.log(`用户连接: ${socket.id}`); // 加入房间 socket.on('join', (roomId) => { socket.join(roomId); if (!rooms[roomId]) rooms[roomId] = []; rooms[roomId].push(socket.id); console.log(`${socket.id} 加入了房间 ${roomId}`); // 通知房间内其他用户，有新用户加入 socket.to(roomId).emit('user-joined', { socketId: socket.id }); // 给刚加入的用户发送房间内已有用户的列表（用于发起Offer） const otherUsers = rooms[roomId].filter(id => id !== socket.id); socket.emit('existing-users', otherUsers); }); // 转发信令消息：Offer, Answer, ICE Candidate socket.on('signal', (data) => { const { to, ...payload } = data; console.log(`信令转发: ${socket.id} -> ${to}, 类型: ${payload.type}`); socket.to(to).emit('signal', { ...payload, from: socket.id }); }); // 离开房间 socket.on('leave', (roomId) => { socket.leave(roomId); if (rooms[roomId]) { rooms[roomId] = rooms[roomId].filter(id => id !== socket.id); if (rooms[roomId].length === 0) delete rooms[roomId]; } console.log(`${socket.id} 离开了房间 ${roomId}`); socket.to(roomId).emit('user-left', { socketId: socket.id }); }); socket.on('disconnect', () => { console.log(`用户断开: ${socket.id}`); // 清理所有房间中的该用户 for (const roomId in rooms) { rooms[roomId] = rooms[roomId].filter(id => id !== socket.id); if (rooms[roomId].length === 0) delete rooms[roomId]; io.to(roomId).emit('user-left', { socketId: socket.id }); } }); }); const PORT = process.env.PORT || 3000; server.listen(PORT, () => { console.log(`信令服务器运行在端口: ${PORT}`); });

package.json依赖:

{ "name": "webrtc-signaling-server", "version": "1.0.0", "description": "A simple signaling server for Unity WebRTC demo", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "express": "^4.18.2", "socket.io": "^4.7.2" } }

部署与运行：

1. 确保你的开发机安装了Node.js。
2. 在SignalingServer文件夹下打开终端，运行npm install安装依赖。
3. 运行npm start启动服务器。你会看到“信令服务器运行在端口: 3000”的提示。

这个服务器实现了基于“房间”的多用户管理。所有连接到同一个roomId的客户端，可以互相发现并建立WebRTC连接。它只负责转发信令消息（SDP和ICE），不处理任何媒体数据，因此负载很轻，一台低配云服务器就能承载大量并发信令连接。

4. Unity客户端核心逻辑实现

4.1 网络管理器与信令通信

我们需要一个单例类WebRTCSignaler来管理与信令服务器的Socket.IO连接，并处理消息的发送与接收。

using System; using System.Collections.Generic; using UnityEngine; using SocketIOClient; using SocketIOClient.Newtonsoft.Json; using Newtonsoft.Json; public class WebRTCSignaler : MonoBehaviour { public static WebRTCSignaler Instance { get; private set; } [Header("服务器配置")] [SerializeField] private string signalingServerURL = "http://localhost:3000"; [SerializeField] private string roomId = "monitor-room-1"; private SocketIOUnity socket; private string mySocketId; // 事件定义，用于解耦UI与网络逻辑 public event Action<string> OnConnected; // 参数：自己的SocketID public event Action<List<string>> OnExistingUsersReceived; // 参数：房间内其他用户ID列表 public event Action<string> OnUserJoined; // 参数：新加入用户的SocketID public event Action<string> OnUserLeft; // 参数：离开用户的SocketID public event Action<string, string, string> OnSignalReceived; // 参数：来自谁，信令类型（offer/answer/candidate），信令数据 private void Awake() { if (Instance != null && Instance != this) { Destroy(gameObject); return; } Instance = this; DontDestroyOnLoad(gameObject); InitializeSocket(); } private void InitializeSocket() { var uri = new Uri(signalingServerURL); socket = new SocketIOUnity(uri, new SocketIOOptions { Transport = SocketIOClient.Transport.TransportProtocol.WebSocket, Reconnection = true }); socket.JsonSerializer = new NewtonsoftJsonSerializer(); socket.OnConnected += (sender, e) => { Debug.Log("已连接到信令服务器"); socket.Emit("join", roomId); }; socket.On("joined", (data) => { mySocketId = socket.Id; Debug.Log($"我的SocketID: {mySocketId}"); OnConnected?.Invoke(mySocketId); }); socket.On("existing-users", (data) => { var users = data.GetValue<List<string>>(); Debug.Log($"房间内已有用户: {string.Join(", ", users)}"); OnExistingUsersReceived?.Invoke(users); }); socket.On("user-joined", (data) => { var newUserId = data.GetValue<string>("socketId"); Debug.Log($"新用户加入: {newUserId}"); OnUserJoined?.Invoke(newUserId); }); socket.On("user-left", (data) => { var leftUserId = data.GetValue<string>("socketId"); Debug.Log($"用户离开: {leftUserId}"); OnUserLeft?.Invoke(leftUserId); }); socket.On("signal", (data) => { var from = data.GetValue<string>("from"); var type = data.GetValue<string>("type"); var sdpOrCandidate = data.GetValue<string>("sdp") ?? data.GetValue<string>("candidate"); Debug.Log($"收到信令 from {from}, type: {type}"); OnSignalReceived?.Invoke(from, type, sdpOrCandidate); }); socket.Connect(); } public void SendSignal(string to, string type, string data) { var payload = new { to, type, sdp = data }; socket.Emit("signal", payload); Debug.Log($"发送信令 to {to}, type: {type}"); } public void SendIceCandidate(string to, string candidate) { var payload = new { to, type = "candidate", candidate }; socket.Emit("signal", payload); } private void OnDestroy() { socket?.Disconnect(); } }

这个管理器封装了所有与信令服务器的交互，并通过C#事件将网络事件暴露出去，让其他模块（如WebRTC连接管理器）可以订阅并作出反应，保持了代码的清晰和可维护性。

4.2 WebRTC对等连接管理

这是整个客户端的核心。我们将创建一个WebRTCConnectionManager类，它负责创建RTCPeerConnection、添加媒体流、处理SDP交换和ICE候选者。

using System; using System.Collections.Generic; using UnityEngine; using Unity.WebRTC; using UnityEngine.UI; public class WebRTCConnectionManager : MonoBehaviour { // 本地视频源 private VideoStreamTrack localVideoTrack; private RTCPeerConnection localPeerConnection; private string localSocketId; // 远端连接字典 key: 远端SocketID, value: 对应的PeerConnection和视频轨道 private Dictionary<string, (RTCPeerConnection pc, VideoStreamTrack track)> remoteConnections = new(); [Header("UI绑定")] [SerializeField] private RawImage localVideoDisplay; [SerializeField] private Transform remoteVideosContainer; // 用于动态创建远端视频显示面板的父节点 [SerializeField] private GameObject remoteVideoPrefab; // 预设：包含一个RawImage的UI面板 [Header("配置")] [SerializeField] private int streamWidth = 1280; [SerializeField] private int streamHeight = 720; [SerializeField] private int frameRate = 30; private void Start() { // 初始化WebRTC WebRTC.Initialize(EncoderType.Software); // 或EncoderType.Hardware，根据平台支持选择 StartCoroutine(WebRTC.Update()); // WebRTC需要在主线程更新 // 订阅信令事件 WebRTCSignaler.Instance.OnConnected += HandleConnected; WebRTCSignaler.Instance.OnExistingUsersReceived += HandleExistingUsers; WebRTCSignaler.Instance.OnUserJoined += HandleUserJoined; WebRTCSignaler.Instance.OnSignalReceived += HandleSignalReceived; WebRTCSignaler.Instance.OnUserLeft += HandleUserLeft; // 初始化本地视频捕获（作为发送端） StartLocalVideoCapture(); } private void StartLocalVideoCapture() { // 获取摄像头 var devices = WebCamTexture.devices; if (devices.Length == 0) { Debug.LogError("未找到摄像头设备"); return; } var webCamTexture = new WebCamTexture(devices[0].name, streamWidth, streamHeight, frameRate); webCamTexture.Play(); // 将WebCamTexture转换为VideoStreamTrack localVideoTrack = new VideoStreamTrack(webCamTexture); // 在UI上显示本地画面（可选，用于自检） if (localVideoDisplay != null) { localVideoDisplay.texture = webCamTexture; } Debug.Log("本地视频捕获已启动"); } private void HandleConnected(string myId) { localSocketId = myId; Debug.Log($"本地管理器已就绪，SocketID: {localSocketId}"); } // 当进入房间，发现已有其他用户时，主动向他们发起连接 private void HandleExistingUsers(List<string> otherUserIds) { foreach (var remoteId in otherUserIds) { CreatePeerConnectionForRemote(remoteId, isInitiator: true); } } // 当新用户加入房间时，如果他不是发起方，他会主动发起连接。这里我们作为接收方，创建PeerConnection并等待Offer。 private void HandleUserJoined(string newUserId) { // 在实际应用中，可能需要更复杂的协商逻辑来确定谁作为发起方。 // 这里简化处理：后加入者向先加入者发起连接。 CreatePeerConnectionForRemote(newUserId, isInitiator: false); } private void CreatePeerConnectionForRemote(string remoteSocketId, bool isInitiator) { if (remoteConnections.ContainsKey(remoteSocketId)) { Debug.LogWarning($"与 {remoteSocketId} 的连接已存在"); return; } var configuration = GetDefaultConfiguration(); var peerConnection = new RTCPeerConnection(ref configuration); // 添加本地视频轨道（如果是发送端） if (localVideoTrack != null) { peerConnection.AddTrack(localVideoTrack); } // 监听ICE候选者 peerConnection.OnIceCandidate = candidate => { if (!string.IsNullOrEmpty(candidate.Candidate)) { WebRTCSignaler.Instance.SendIceCandidate(remoteSocketId, candidate.Candidate); } }; // 监听远端轨道添加事件 peerConnection.OnTrack = e => { if (e.Track is VideoStreamTrack remoteVideoTrack) { Debug.Log($"收到来自 {remoteSocketId} 的视频轨道"); // 在主线程更新UI MainThreadDispatcher.RunOnMainThread(() => { SetupRemoteVideoDisplay(remoteSocketId, remoteVideoTrack); }); // 存储轨道引用 var conn = remoteConnections[remoteSocketId]; remoteConnections[remoteSocketId] = (conn.pc, remoteVideoTrack); } }; // 监听连接状态变化（用于调试） peerConnection.OnIceConnectionChange = state => Debug.Log($"{remoteSocketId} ICE状态: {state}"); peerConnection.OnConnectionStateChange = state => Debug.Log($"{remoteSocketId} 连接状态: {state}"); remoteConnections[remoteSocketId] = (peerConnection, null); // 如果是发起方，创建Offer if (isInitiator) { StartCoroutine(CreateAndSendOffer(peerConnection, remoteSocketId)); } Debug.Log($"已为 {remoteSocketId} 创建PeerConnection，发起方: {isInitiator}"); } private System.Collections.IEnumerator CreateAndSendOffer(RTCPeerConnection pc, string remoteId) { var op = pc.CreateOffer(); yield return op; if (op.IsError) { Debug.LogError($"创建Offer失败: {op.Error.message}"); yield break; } var offerDesc = op.Desc; var setLocalOp = pc.SetLocalDescription(ref offerDesc); yield return setLocalOp; if (setLocalOp.IsError) { Debug.LogError($"设置本地描述失败: {setLocalOp.Error.message}"); yield break; } // 将SDP描述通过信令服务器发送给对方 var offerSdp = offerDesc.sdp; WebRTCSignaler.Instance.SendSignal(remoteId, "offer", offerSdp); Debug.Log($"已向 {remoteId} 发送Offer"); } // 处理收到的信令消息（Offer, Answer, ICE Candidate） private void HandleSignalReceived(string from, string type, string data) { if (!remoteConnections.TryGetValue(from, out var conn)) { Debug.LogWarning($"收到来自未知用户 {from} 的信令，正在创建连接..."); // 被动连接：收到Offer，但连接尚未创建 CreatePeerConnectionForRemote(from, isInitiator: false); remoteConnections.TryGetValue(from, out conn); // 重新获取 } var pc = conn.pc; switch (type) { case "offer": StartCoroutine(HandleOffer(pc, from, data)); break; case "answer": StartCoroutine(HandleAnswer(pc, data)); break; case "candidate": HandleIceCandidate(pc, data); break; default: Debug.LogWarning($"未知的信令类型: {type}"); break; } } private System.Collections.IEnumerator HandleOffer(RTCPeerConnection pc, string from, string offerSdp) { RTCSessionDescription offerDesc = new RTCSessionDescription { type = RTCSdpType.Offer, sdp = offerSdp }; var setRemoteOp = pc.SetRemoteDescription(ref offerDesc); yield return setRemoteOp; if (setRemoteOp.IsError) { Debug.LogError($"设置远端Offer描述失败: {setRemoteOp.Error.message}"); yield break; } // 创建Answer var op = pc.CreateAnswer(); yield return op; if (op.IsError) { Debug.LogError($"创建Answer失败: {op.Error.message}"); yield break; } var answerDesc = op.Desc; var setLocalOp = pc.SetLocalDescription(ref answerDesc); yield return setLocalOp; if (setLocalOp.IsError) { Debug.LogError($"设置本地Answer描述失败: {setLocalOp.Error.message}"); yield break; } // 发送Answer WebRTCSignaler.Instance.SendSignal(from, "answer", answerDesc.sdp); Debug.Log($"已向 {from} 发送Answer"); } private System.Collections.IEnumerator HandleAnswer(RTCPeerConnection pc, string answerSdp) { RTCSessionDescription answerDesc = new RTCSessionDescription { type = RTCSdpType.Answer, sdp = answerSdp }; var setRemoteOp = pc.SetRemoteDescription(ref answerDesc); yield return setRemoteOp; if (setRemoteOp.IsError) { Debug.LogError($"设置远端Answer描述失败: {setRemoteOp.Error.message}"); } else { Debug.Log("Answer设置成功，连接应已建立"); } } private void HandleIceCandidate(RTCPeerConnection pc, string candidateStr) { var candidate = new RTCIceCandidate(new RTCIceCandidateInit { candidate = candidateStr }); pc.AddIceCandidate(candidate); } private void SetupRemoteVideoDisplay(string remoteId, VideoStreamTrack track) { if (remoteVideosContainer == null || remoteVideoPrefab == null) return; var displayObj = Instantiate(remoteVideoPrefab, remoteVideosContainer); displayObj.name = $"RemoteVideo_{remoteId}"; var rawImage = displayObj.GetComponentInChildren<RawImage>(); if (rawImage != null) { // VideoStreamTrack提供了一个Texture，可以直接赋值给RawImage // 注意：这里需要等待几帧，等track真正开始传输数据 StartCoroutine(AssignTextureWhenReady(rawImage, track)); } } private System.Collections.IEnumerator AssignTextureWhenReady(RawImage img, VideoStreamTrack track) { // 简单等待，直到track的Texture不为空 int maxWait = 300; // 最多等5秒 (300帧) while (track.Texture == null && maxWait-- > 0) { yield return new WaitForEndOfFrame(); } if (track.Texture != null) { img.texture = track.Texture; Debug.Log($"已为 {img.gameObject.name} 分配视频纹理"); } else { Debug.LogWarning($"未能获取到视频纹理"); } } private void HandleUserLeft(string userId) { if (remoteConnections.TryGetValue(userId, out var conn)) { conn.pc.Close(); conn.track?.Dispose(); remoteConnections.Remove(userId); Debug.Log($"已清理与 {userId} 的连接"); // 清理对应的UI显示 var displayObj = remoteVideosContainer?.Find($"RemoteVideo_{userId}"); if (displayObj != null) Destroy(displayObj.gameObject); } } private static RTCConfiguration GetDefaultConfiguration() { // 使用Google的公共STUN服务器进行NAT穿透 RTCIceServer[] iceServers = new RTCIceServer[] { new RTCIceServer { urls = new string[] { "stun:stun.l.google.com:19302" } } // 如果需要TURN服务器以应对对称NAT，可以在这里添加 // new RTCIceServer { urls = new string[] { "turn:your-turn-server.com:3478" }, username = "user", credential = "pass" } }; return new RTCConfiguration { iceServers = iceServers }; } private void OnDestroy() { foreach (var conn in remoteConnections.Values) { conn.pc.Close(); conn.track?.Dispose(); } localVideoTrack?.Dispose(); WebRTC.Dispose(); } }

这个管理器类涵盖了WebRTC连接的核心生命周期：创建、信令交换、媒体流绑定和销毁。它通过协程处理异步的SDP操作，并通过字典管理多个远端连接，为多路监控画面打下了基础。

4.3 用户界面与交互搭建

UI部分相对直观。我们需要：

1. 一个显示本地摄像头画面的RawImage（用于发送端自检）。
2. 一个用于动态生成远端视频画面的容器（如Vertical Layout Group或Grid Layout Group）。
3. 一个远端视频画面的预制体，包含一个RawImage组件和可选的文本标签（用于显示远端ID）。
4. 简单的控制按钮，如“开始监控”、“停止监控”、“切换摄像头”等。

在Unity编辑器中，创建以下UI结构：

• Canvas
  • Panel_Local(用于本地画面，可折叠)
    • RawImage_LocalDisplay
  • Panel_RemoteContainer(ScrollRect，用于容纳多个远端画面)
    • Viewport
      • Content(添加GridLayoutGroup组件，Cell Size设为320x240，Spacing设为5)
  • Button_Start/Button_Stop

将WebRTCConnectionManager脚本挂载到一个空的GameObject上（如WebRTCManager），并将UI元素拖拽到脚本的对应公开字段中进行绑定。将制作好的远端视频面板预制体也拖拽到remoteVideoPrefab字段。

5. 工程优化与低延迟实战技巧

5.1 视频编码参数调优

延迟主要产生在采集、编码、传输、解码、渲染这几个环节。编码环节的配置对延迟和画质影响巨大。

在StartLocalVideoCapture方法中，我们创建了WebCamTexture。除了分辨率(streamWidth,streamHeight)和帧率(frameRate)，更重要的是传递给RTCPeerConnection的编码参数。这需要在创建VideoStreamTrack或添加轨道时进行更精细的控制。不过，Unity WebRTC包目前对编码参数的高级控制接口有限，主要依赖RTCRtpSender的参数设置，而这通常需要在创建Offer/Answer之后进行。

一个更实用的、对延迟影响显著的技巧是使用硬件编码。在WebRTC.Initialize()时，传入EncoderType.Hardware。这能大幅降低CPU占用和编码延迟，前提是你的目标平台（如Windows with NVIDIA GPU, Android, iOS）支持。

// 在WebRTCConnectionManager的Start方法中 WebRTC.Initialize(EncoderType.Hardware); // 优先尝试硬件编码

如果硬件编码初始化失败，它会回退到软件编码。你可以在日志中查看使用的是哪种编码器。

5.2 网络适应性与STUN/TURN配置

我们的GetDefaultConfiguration方法中只配置了STUN服务器。STUN服务器用于获取客户端的公网IP和端口，解决大多数简单的NAT穿透问题。但对于某些企业级防火墙或对称型NAT，STUN可能失效，此时需要TURN服务器进行数据中转。

配置TURN服务器：

private static RTCConfiguration GetDefaultConfiguration() { RTCIceServer[] iceServers = new RTCIceServer[] { new RTCIceServer { urls = new string[] { "stun:stun.l.google.com:19302" } }, // 示例：使用Coturn或第三方TURN服务 new RTCIceServer { urls = new string[] { "turn:your-turn-server-domain.com:3478" }, username = "your-username", credential = "your-password" } }; return new RTCConfiguration { iceServers = iceServers }; }

重要提示：TURN服务器需要你自己部署（如使用开源的Coturn）或购买商业服务。它将转发所有媒体流，因此带宽成本较高，且会引入额外延迟（数据需经服务器中转）。仅在点对点连接失败时，WebRTC才会自动使用TURN服务器。在原型阶段，可以先用免费STUN服务器，但产品化时必须考虑TURN备用。

5.3 连接状态监控与自动重连

网络环境是不稳定的。一个健壮的原型需要监控连接状态，并在断开时尝试恢复。

在RTCPeerConnection上订阅OnIceConnectionChange和OnConnectionStateChange事件。我们可以根据状态变化来触发重连逻辑。

peerConnection.OnIceConnectionChange = state => { Debug.Log($"{remoteSocketId} ICE状态: {state}"); if (state == RTCIceConnectionState.Disconnected || state == RTCIceConnectionState.Failed) { // 延迟几秒后尝试重新发起Offer（简化策略，实际应用需更复杂的状态机） StartCoroutine(DelayedReconnect(remoteSocketId)); } }; private System.Collections.IEnumerator DelayedReconnect(string remoteId) { yield return new WaitForSeconds(3); if (remoteConnections.ContainsKey(remoteId)) { Debug.Log($"尝试与 {remoteId} 重新连接..."); // 关闭旧连接，清理资源 var oldConn = remoteConnections[remoteId]; oldConn.pc.Close(); oldConn.track?.Dispose(); remoteConnections.Remove(remoteId); // 创建新的连接 CreatePeerConnectionForRemote(remoteId, isInitiator: true); } }

这是一个非常基础的重连策略。在生产环境中，你需要考虑指数退避、判断是否为永久性失败、以及是否通知用户等更复杂的逻辑。

5.4 性能与资源管理

• 纹理释放：当远端连接断开或停止接收视频时，务必调用VideoStreamTrack.Dispose()来释放底层的纹理资源，防止内存泄漏。
• 限制同时观看的流数量：在监控墙场景中，可能同时有数十上百路视频。不可能全部同时解码渲染。需要在UI层实现“视口内渲染”逻辑，即只解码和渲染当前在屏幕可视区域内的视频流，对于划出视口的流，暂停其视频轨道的渲染或降低其分辨率/帧率。
• 使用RenderTexture与降分辨率：对于小窗口预览，可以将远端视频渲染到一个较小的RenderTexture（如320x240），然后将这个RenderTexture赋值给UI的RawImage。这比直接用原始分辨率纹理进行缩放性能更好。可以在SetupRemoteVideoDisplay中创建并管理不同尺寸的RenderTexture。

6. 常见问题排查与调试心得

6.1 连接建立失败：信令与ICE问题

这是新手最常遇到的问题。排查步骤应遵循从简到繁：

1. 检查信令服务器连接：确保Unity客户端能正常连接到http://localhost:3000（或你的服务器地址）。查看浏览器开发者工具（Network -> WS）或Unity日志，确认WebSocket连接已建立，并且join和signal事件被正常发送和接收。
2. 检查SDP交换：在HandleSignalReceived和发送信令的地方打印日志，确认Offer和Answer的SDP数据被完整地发送和接收。SDP是一段文本，如果传输过程中被意外截断或格式错误，会导致SetRemoteDescription失败。
3. 检查ICE候选者：在OnIceCandidate和HandleIceCandidate中打印日志。如果看不到ICE候选者的交换，或者候选者列表为空，说明NAT穿透可能有问题。确保你的网络环境允许UDP流量通过（某些公司防火墙会阻止）。尝试添加TURN服务器作为备用。
4. 查看连接状态：密切监控OnIceConnectionChange和OnConnectionStateChange的状态流转。常见的成功路径是：New->Checking->Connected。如果卡在Checking或变为Failed，就是ICE失败了。

实操心得：在开发初期，可以暂时关闭防火墙或让客户端处于同一局域网下测试，以排除网络环境问题。使用stun:stun.l.google.com:19302这个公共服务器在大多数情况下是有效的。

6.2 有连接但无画面（黑屏）

1. 检查本地视频捕获：确认WebCamTexture的isPlaying属性为true，并且localVideoDisplay（如果绑定了）有画面。这能排除摄像头权限或设备选择问题。
2. 检查轨道添加：确认在创建RTCPeerConnection后，通过AddTrack方法将本地的VideoStreamTrack添加了进去。
3. 检查远端轨道回调：确认OnTrack事件被触发。如果没有，可能是SDP协商中媒体部分（a=sendrecv或a=recvonly）有问题，或者对端根本没有添加视频轨道。
4. 检查纹理赋值：在AssignTextureWhenReady协程中，检查track.Texture是否最终不为空。有时需要等待数帧视频数据到达后，纹理才会被创建。可以增加等待时间或添加一个超时后的备选显示（如纯色背景）。
5. 平台权限：在移动平台（Android/iOS）上，务必在Player Settings中声明摄像头权限，并在运行时动态请求。Unity WebRTC包可能不会自动处理这个。

6.3 延迟过高（>500ms）

1. 编码器：首要检查是否成功启用了硬件编码（查看日志）。软件编码（尤其是高分辨率下）会带来可观的编码延迟。
2. 分辨率与帧率：将streamWidth和streamHeight降低到640x480甚至320x240，将frameRate降低到15。这是降低延迟最有效的手段之一。监控场景对绝对画质的要求往往低于对实时性的要求。
3. 网络路径：使用TURN服务器会显著增加延迟。在日志中确认连接最终使用的是host（本地）、srflx（STUN穿透）还是relay（TURN中转）类型的候选者。目标是尽可能使用前两者。
4. 渲染延迟：确保Unity的渲染帧率稳定。可以在Quality Settings中降低图形负载，或者使用Application.targetFrameRate进行限制，避免因渲染卡顿造成画面更新慢。

6.4 内存泄漏与资源未释放

这是一个容易忽视但长期运行会致命的问题。

1. 始终成对调用：每个RTCPeerConnection在不再需要时（如用户离开、应用退出），必须调用Close()。每个VideoStreamTrack必须调用Dispose()。
2. 检查事件注销：虽然我们的示例中管理器是常驻的，但如果你的设计中有动态创建和销毁的连接管理器，务必在OnDestroy中取消订阅所有来自WebRTCSignaler.Instance的事件，否则会导致旧的管理器无法被垃圾回收。
3. 监控Profiler：在Unity编辑器中运行，定期查看Profiler窗口的Memory模块，观察Texture和Managed Heap的增长情况。如果持续增长而不回落，很可能存在泄漏。重点检查动态实例化的远端视频显示面板及其关联的纹理是否在连接断开时被正确销毁。

6.5 多路视频流的性能瓶颈

当同时显示4路以上视频时，可能会遇到性能问题。

1. GPU瓶颈：多路视频解码和渲染（尤其是高分辨率）会占用大量GPU资源。在Profiler中查看GPU使用率。解决方案是降低预览分辨率。如前所述，使用小尺寸的RenderTexture作为显示载体。
2. CPU瓶颈：多路视频的解码（特别是软件解码）会占用大量CPU。在Profiler的CPU模块查看WebRTC相关线程的占用。解决方案同样是降低解码负载，或者实现“非活跃流暂停”逻辑。
3. 带宽瓶颈：同时拉取多路高清视频流会迅速占满上行或下行带宽。需要在信令或业务层实现订阅制，即接收端主动告诉发送端“我需要看哪几路”，发送端只向订阅者发送对应的媒体流。这涉及到RTCPeerConnection的Transceiver和RTCRtpSender的更高级控制，是进阶优化的方向。

构建这个原型的过程，就像在搭一座桥，把WebRTC协议这座强大的“技术岛屿”与Unity这个丰富的“内容大陆”连接起来。过程中最大的收获不是最终跑通的画面，而是踩过每一个坑后，对信令协商、NAT穿透、媒体流控制这些抽象概念形成的肌肉记忆。当你看到低延迟的监控画面在自制的UI中稳定呈现时，那种对技术链路的掌控感，是任何一个现成SDK都无法给予的。这个原型工程就像一个乐高底板，上面已经搭好了最核心的梁柱，接下来，无论是添加音频对讲、云台控制、录像回放，还是集成AI分析，你都知道该从哪里下手，如何与现有的WebRTC数据通道或视频流对接。这才是从Demo迈向真正产品开发的关键一步。