【游戲開發實戰】Unity從零開發多人視頻聊天功能，無聊了就和自己視頻聊天（附原始碼 | Mirror | 多人視頻 | 詳細教程）

一、前言

嗨，大家好，我是新發，
事情是這樣的，我前幾天寫了一篇《【游戲開發實戰】Unity使用Socket通信實作簡單的多人聊天室（萬字詳解 | 網路 | TCP | 通信 | Mirror | Networking）》
有同學留言問我多人在線視頻聊天切換清晰度怎么做，

嗯，作為一位熱心的技術博主，我一般都是能幫則幫，
嘛，今天就來寫個多人視頻聊天的功能吧（并且可以切換清晰度），

二、思考問題與解決方案

1、思考問題

多人視頻聊天大家應該都不陌生，像騰訊視頻會議那樣，多個人的視頻畫面同時顯示在界面中，

我的實作思路是每個客戶端對本地攝像頭畫面進行采樣，得到幀影像，然后對影像進行適當的壓縮，轉為位元組流上傳給服務端，接著服務端根據每個客戶端設定的清晰度對幀影像進行壓縮，然后轉發幀影像給其他客戶端，其他客戶端接收到幀影像位元組流后進行解碼，最后顯示到界面中，
畫成圖是這樣子：

要實作上面的功能，我們需要先思考并解決以下幾個必要問題：
1 Unity中如何開啟攝像頭并對影像進行采樣？
2 影像如何中轉給其他客戶端？
3 如何實作清晰度切換？
4 客戶端如何對影像進行解碼并顯示？

2、解決方案

2.1、Unity中如何開啟攝像頭并對影像進行采樣

Unity提供了WebCamTexture這個類，通過它我們可以很方便的訪問攝像頭影像，
具體用法我下文會講，

2.2、影像如何中轉給其他客戶端

正常情況我們需要搭建一個中轉的服務端，要實作資料的序列化、網路通信、資料的反序列化等，這里我想使用Mirror網路庫來實作，在之前那篇文章中我也有介紹過Mirror：《【游戲開發實戰】Unity使用Socket通信實作簡單的多人聊天室（萬字詳解 | 網路 | TCP | 通信 | Mirror | Networking）》

2.3、如何實作清晰度切換

客戶端把清晰度設定告訴服務端，服務端根據清晰度對影像進行壓縮，把壓縮后的影像下發給客戶端，
由于我們是使用Mirror，服務端也是Unity客戶端，所以我們可以直接使用Texture2D的EncodeToJPG介面對影像進行壓縮，第二個引數就是壓縮率，值從1~100（默認是75），

public static byte[] EncodeToJPG(this Texture2D tex, int quality);

2.4、客戶端如何對影像進行解碼并顯示

通過網路傳輸過來的影像是位元組流，我們需要把它反序列化為Unity可現實的影像Texture2D，我們直接使用Texture2D的LoadImage介面，

public static bool LoadImage(this Texture2D tex, byte[] data);

三、實際操作

下面，擼起袖子開始動手實際操作吧~

0、思維導圖

養成好習慣，動手前先畫思維圖，如下：

1、界面設計與制作

使用axure快速原型設計工具先簡單設計一下界面，
登錄界面，Host就是作為房主，Client就是作為路人，

視頻聊天界面，排列顯示多個視頻畫面，可切換視頻清晰度，可隨時退出房間，

2、UI素材獲取

簡單的UI素材資源我是在阿里巴巴矢量圖庫上找，地址：https://www.iconfont.cn/
比如搜索按鈕，

找一個形狀合適的，可以進行調色，我一般是調成白色，

因為Unity中可以設定Color，這樣我們只需要一個白色按鈕就可以在Unity中創建不同顏色的按鈕了，
弄點基礎的美術資源，

注：那個頭像是我自己用PhotoShop畫的哦，我之前用PhotoShop畫過一幅原創連環畫，如下：

3、創建Unity工程

我使用的Unity版本為2021.1.7f1c1 個人版，我們要做的是一個多人視頻聊天的功能，不需要使用到3D相關的內容，所以我們創建工程時使用2D模板，工程名就叫UnityVideoChat吧~

創建成功，

4、制作UI界面

根據我們的原型設計，使用UGUI制作界面：MainPanel.prefab，

如下，


其中用于渲染視頻影像的UI獨立做成一個預設：VideoImage.prefab，方便進行克隆（每連接一客戶端就克隆一個VideoImage）

如下，使用RawImage組件來顯示影像，

5、下載Mirror網路插件

Mirror的Unity Asset Store地址：
https://assetstore.unity.com/packages/tools/network/mirror-129321

將Mirror插件添加到自己的賬號中，然后回到Unity，在Package Manager中就可以下載了，

下載下來匯入Unity中，

6、寫C#代碼

6.1、網路管理器：VideoChatNetwork.cs

先畫個圖，方便大家直觀地知道VideoChatNetwork做什么：

注：VideoChatNetwork.cs腳本完整代碼見我的文末的工程原始碼，下面只講一些重點的地方，

創建VideoChatNetwork.cs腳本，它需要繼承Mirror.NetworkManager，

// VideoChatNetwork.cs

using Mirror;

public class VideoChatNetwork : NetworkManager
{
	// ...
}

啟動服務端：

StartHost();

啟動客戶端：

StartClient();

關閉服務端：

StopHost();

關閉客戶端：

StopClient();

定義訊息CreatePlayerMessage（用于傳遞用戶名）：

public struct CreatePlayerMessage : NetworkMessage
{
    public string name;
}

服務器啟動成功回呼，注冊CreatePlayerMessage訊息回應函式，在回應函式中實體化Player并添加到NetworkServer中：

public override void OnStartServer()
{
	base.OnStartServer();
	// 注冊事件
	NetworkServer.RegisterHandler<CreatePlayerMessage>(OnCreatePlayer);
	// ...
}

void OnCreatePlayer(NetworkConnection connection, CreatePlayerMessage createPlayerMessage)
{
	// 實體化Player
	GameObject playergo = Instantiate(playerPrefab);
    playergo.GetComponent<Player>().accountName = createPlayerMessage.name;
    // 添加Player
	NetworkServer.AddPlayerForConnection(connection, playergo);
}

客戶端連接成功回呼：

public override void OnClientConnect(NetworkConnection conn)
{
	base.OnClientConnect(conn);
	// 轉發通知
	conn.Send(new CreatePlayerMessage { name = MainLogic.instance.accountName });
}

連接斷開回呼：

public override void OnClientDisconnect(NetworkConnection conn)
{
	// TODO 重新登錄
}

6.2、攝像頭畫面：Player.cs

Player思維導圖：

注：Player.cs腳本完整代碼見我的文末的工程原始碼，下面只講一些重點的地方，

創建Player.cs腳本，它需要繼承Mirror.NetworkBehaviour，

using Mirror;

public class Player : NetworkBehaviour
{
	// ...
}

先定義一些必要的UI物件，其中用戶名使用[SyncVar]注解進行自動同步，

public RawImage videoImage;
[SyncVar]
public string accountName;
public Text accountNameText;

在Start函式中判斷是否是本地用戶isLocalPlayer，如果是，則開啟攝像頭：

// Player.cs

private WebCamTexture webCam;

private void Start()
{
	 if (isLocalPlayer)
     {
          // 開啟攝像頭
          WebCamDevice[] devices = WebCamTexture.devices;
          webCam = new WebCamTexture(devices[0].name, 128, 128, 5);  //設定寬、高和幀率   
          webCam.Play();
      }
      // ...
}

在Update函式中對攝像頭影像進行采樣，0.3秒采集一幀，可適當進行調整，同時把影像轉為位元組流并發送給服務端，

// Player.cs

private float timer;
 
public void Update()
{
     if (isLocalPlayer && null != webCam)
     {
         timer += Time.deltaTime;
         if (timer > 0.3f)
         {
             timer = 0;
             // 采樣
             videoImage.texture = webCam;
			 // 影像轉位元組流	
             var bytes = MainLogic.instance.WebCamTextureToBytes(webCam);
             // 發送位元組流給服務端
             CmdSendTextureBytes(bytes);
         }
     }
 }

發送影像位元組流給服務端，注意Command為客戶端遠程呼叫服務端，

// 發送影像位元組流給服務端
// Command為客戶端遠程呼叫服務端
[Command]
public void CmdSendTextureBytes(byte[] texture)
{
    RpcReceiveTexture(texture);
}

客戶端接收服務端的影像位元組流資料，并顯示到RawImage上，注意ClientRpc為服務端遠程呼叫客戶端，

// 客戶端接收服務端的影像位元組流資料，并顯示到RawImage上
// ClientRpc為服務端遠程呼叫客戶端
[ClientRpc]
public void RpcReceiveTexture(byte[] textureBytes)
{
    if(!isLocalPlayer)
    {
        // 壓縮
        var compressedTex = MainLogic.instance.CompressTexture(textureBytes);
        // 顯示
        videoImage.texture = MainLogic.instance.BytesToTexture2D(compressedTex);
    }    
}

上面我們出現了Mirror三個注解：[SyncVar]、[Command]、[ClientRpc]，想要理解它們最好的辦法是反編譯我們的C#的dll，看它生成的代碼（使用ILSpy.exe對dll進行反編譯），

[SyncVar]
[SyncVar]會對我們的變數做自動同步（自動序列化、網路傳遞、反序列化），例：

[SyncVar]
public string accountName;

編譯后生成的代碼：

[SyncVar]
public string accountName;

public string NetworkaccountName
{
	get
	{
		return accountName;
	}
	[param: In]
	set
	{
		if (!SyncVarEqual(value, ref accountName))
		{
			string text = accountName;
			SetSyncVar(value, ref accountName, 1uL);
		}
	}
}

// 序列化
public override bool SerializeSyncVars(NetworkWriter writer, bool forceAll)
{
	bool result = base.SerializeSyncVars(writer, forceAll);
	if (forceAll)
	{
		writer.WriteString(accountName);
		return true;
	}
	writer.WriteULong(base.syncVarDirtyBits);
	if ((base.syncVarDirtyBits & 1L) != 0L)
	{
		writer.WriteString(accountName);
		result = true;
	}
	return result;
}

// 反序列化
public override void DeserializeSyncVars(NetworkReader reader, bool initialState)
{
	base.DeserializeSyncVars(reader, initialState);
	if (initialState)
	{
		string text = accountName;
		NetworkaccountName = reader.ReadString();
		return;
	}
	long num = (long)reader.ReadULong();
	if ((num & 1L) != 0L)
	{
		string text2 = accountName;
		NetworkaccountName = reader.ReadString();
	}
}

我們代碼中對accountName的操作，都被替代為對NetworkaccountName的操作，比如：

playergo.GetComponent<Player>().accountName = createPlayerMessage.name;

變成了：

playergo.GetComponent<Player>().NetworkaccountName = createPlayerMessage.name;

[Command]
[Command]表示客戶端遠程呼叫服務端，
例：

[Command]
public void CmdSendTextureBytes(byte[] texture)
{
    RpcReceiveTexture(texture);
}

編譯后生成的代碼：

[Command]
public void CmdSendTextureBytes(byte[] texture)
{
	PooledNetworkWriter writer = NetworkWriterPool.GetWriter();
	writer.WriteBytesAndSize(texture);
	SendCommandInternal(typeof(Player), "CmdSendTextureBytes", writer, 0);
	NetworkWriterPool.Recycle(writer);
}

protected void UserCode_CmdSendTextureBytes(byte[] texture)
{
	RpcReceiveTexture(texture);
}

protected static void InvokeUserCode_CmdSendTextureBytes(NetworkBehaviour obj, NetworkReader reader, NetworkConnectionToClient senderConnection)
{
	if (!NetworkServer.active)
	{
		Debug.LogError((object)"Command CmdSendTextureBytes called on client.");
	}
	else
	{
		((Player)obj).UserCode_CmdSendTextureBytes(reader.ReadBytesAndSize());
	}
}

static Player()
{
	RemoteCallHelper.RegisterCommandDelegate(typeof(Player), 
		"CmdSendTextureBytes", InvokeUserCode_CmdSendTextureBytes, 
		requiresAuthority: true);
}

我們可以看到，它把我們的呼叫轉成了網路訊息，變數做了序列化、傳遞和反序列化，
[ClientRpc]
[ClientRpc]表示服務端遠程呼叫客戶端，
例：

[ClientRpc]
public void RpcReceiveTexture(byte[] textureBytes)
{
    if(!isLocalPlayer)
    {
        // 壓縮
        var compressedTex = MainLogic.instance.CompressTexture(textureBytes);
        // 顯示
        videoImage.texture = MainLogic.instance.BytesToTexture2D(compressedTex);
    }    
}

編譯后生成的代碼：

[ClientRpc]
public void RpcReceiveTexture(byte[] textureBytes)
{
	PooledNetworkWriter writer = NetworkWriterPool.GetWriter();
	writer.WriteBytesAndSize(textureBytes);
	SendRPCInternal(typeof(Player), "RpcReceiveTexture", writer, 0, includeOwner: true);
	NetworkWriterPool.Recycle(writer);
}

protected void UserCode_RpcReceiveTexture(byte[] textureBytes)
{
	if (!base.isLocalPlayer)
	{
		byte[] compressedTex = MainLogic.instance.CompressTexture(textureBytes);
		videoImage.texture = (Texture)(object)MainLogic.instance.BytesToTexture2D(compressedTex);
	}
}

protected static void InvokeUserCode_RpcReceiveTexture(NetworkBehaviour obj, NetworkReader reader, NetworkConnectionToClient senderConnection)
{
	if (!NetworkClient.active)
	{
		Debug.LogError((object)"RPC RpcReceiveTexture called on server.");
	}
	else
	{
		((Player)obj).UserCode_RpcReceiveTexture(reader.ReadBytesAndSize());
	}
}

static Player()
{
	RemoteCallHelper.RegisterRpcDelegate(typeof(Player), 
	"RpcReceiveTexture", InvokeUserCode_RpcReceiveTexture);
}

我們可以看到，它把我們的呼叫轉成了網路訊息，變數做了序列化、傳遞和反序列化，

6.3、業務邏輯：MainLogic.cs

MainLogic思維導圖：

注：MainLogic.cs腳本完整代碼見我的文末的工程原始碼，下面只講一些重點的地方，

創建MainLogic.cs腳本，全域唯一一個實體物件，我們使用單例模式：

// MainLogic.cs

public class MainLogic
{
	// 單例模式
	private static MainLogic s_instance;
    public static MainLogic instance
    {
        get
        {
            if (null == s_instance)
                s_instance = new MainLogic();
            return s_instance;
        }
    }
}

定義成員變數：

/// <summary>
/// 用戶名
/// </summary>
public string accountName;

/// <summary>
/// 清晰度，0：高清，1：標清，2：普通
/// </summary>
public int definition;

初始化，設定成員變數和回呼函式：

private Action backToLoginCb;

/// <summary>
/// 初始化
/// </summary>
/// <param name="network">網路管理器</param>
/// <param name="backToLoginCb">回呼登錄界面的回呼函式</param>
public void Init(VideoChatNetwork network, Action backToLoginCb)
{
    this.network = network;
    this.backToLoginCb = backToLoginCb;
}

public void OnClientDisconnect()
{
    if (null != backToLoginCb)
        backToLoginCb();
}

啟動服務端，IP地址默認是localhost：

/// <summary>
/// 啟動服務端
/// </summary>
/// <param name="ip">IP地址</param>
/// <param name="account">用戶名</param>
/// <param name="cb">成功回呼函式</param>
public void StartHost(string ip, string account, Action cb)
{
    if (!NetworkClient.isConnected && !NetworkServer.active)
    {
        this.accountName = account;
        network.networkAddress = ip;

        network.DoStartHost(cb);
    }
}

啟動客戶端，IP地址默認是localhost：

/// <summary>
/// 啟動客戶端
/// </summary>
/// <param name="ip">IP地址</param>
/// <param name="account">用戶名</param>
/// <param name="cb">回呼函式</param>
public void StartClient(string ip, string account, Action cb)
{
    this.accountName = account;
    network.networkAddress = ip;
    network.DoStartClient(cb);
}

關閉網路：

/// <summary>
/// 關閉網路
/// </summary>
public void Close()
{
    network.StopHost();
    network.StopClient();
}

切換清晰度：

/// <summary>
/// 切換清晰度
/// </summary>
public void SwitchDefinition(int v)
{
    definition = v;
}

/// <summary>
/// 根據影像清晰度進行影像壓縮
/// </summary>
public byte[] CompressTexture(byte[] texture)
{
    if (null == texture) return null;

    switch (definition)
    {
        case 0:
        default:
            {
                return texture;
            }
        case 1:
            {
                var tex2D = MainLogic.instance.BytesToTexture2D(texture);
                return tex2D.EncodeToJPG(40);
            }
        case 2:
            {
                var tex2D = MainLogic.instance.BytesToTexture2D(texture);
                return tex2D.EncodeToJPG(10);
            }
    }
}

位元組流轉Texture2D：

/// <summary>
/// 位元組流轉Texture2D
/// </summary>
/// <param name="textureBytes">影像位元組流</param>
/// <returns></returns>
public Texture2D BytesToTexture2D(byte[] textureBytes)
{
    Texture2D tex2D = new Texture2D(30, 30);
    tex2D.LoadImage(textureBytes);
    return tex2D;
}

攝像頭影像轉位元組流：

/// <summary>
/// 攝像頭影像轉位元組流
/// </summary>
/// <param name="webCam">攝像頭幀畫面</param>
/// <param name="quality">壓縮了，1~100，默認75</param>
/// <returns></returns>
public byte[] WebCamTextureToBytes(WebCamTexture webCam, int quality = 75)
{
    Texture2D texture = new Texture2D(webCam.width, webCam.height);
    int y = 0;
    while (y < texture.height)
    {
        int x = 0;
        while (x < texture.width)
        {
            Color color = webCam.GetPixel(x, y);
            texture.SetPixel(x, y, color);
            ++x;
        }
        ++y;
    }
    texture.Apply();


    var bytes = texture.EncodeToJPG(quality);
    return bytes;
}

6.4、界面互動：MainPanel.cs

MainPanel思維導圖：

創建MainPanel.cs腳本，在MainPanel腳本中我們去寫界面互動的代碼，
先定義一些必要的UI成員，

// IP地址輸入框
public InputField ipInput;
// 用戶名輸入框
public InputField accountInput;
// 房主按鈕
public Button hostBtn;
// 房客按鈕
public Button clientBtn;
// 清晰度下拉框
public Dropdown definitionDropdown;
// 登錄UI父節點
public GameObject loginObj;
// 視頻聊天UI父節點
public GameObject videoChatObj;
// 關閉網路按鈕
public Button closeBtn;

在Awake中進行初始化：

private void Awake()
{
    var networkObj = GameObject.Find("NetworkManager");
    MainLogic.instance.Init(networkObj.GetComponent<VideoChatNetwork>(), () =>
    {
        loginObj.SetActive(true);
        videoChatObj.SetActive(false);
    });
}

在Start函式中設定各個按鈕的回應邏輯：

void Start()
{
    // Host按鈕
    hostBtn.onClick.AddListener(() =>
    {
        MainLogic.instance.StartHost(ipInput.text, accountInput.text, () =>
         {
             loginObj.SetActive(false);
             videoChatObj.SetActive(true);
         });
    });

    // Client按鈕
    clientBtn.onClick.AddListener(() =>
    {
        MainLogic.instance.StartClient(ipInput.text, accountInput.text, () =>
         {
             loginObj.SetActive(false);
             videoChatObj.SetActive(true);
         });
    });

    // 關閉網路按鈕
    closeBtn.onClick.AddListener(() =>
    {
        MainLogic.instance.Close();
        loginObj.SetActive(true);
        videoChatObj.SetActive(false);
    });

    // 解析度下拉框
    definitionDropdown.onValueChanged.AddListener((v) => 
    {
        MainLogic.instance.SwitchDefinition(v);
    });
}

7、掛腳本

7.1、VideoChatNetwork腳本

場景中創建一個空物體，重命名為NetworkManager，

在它身上掛上VideoChatNetwork腳本（它會自動掛上KcpTransport腳本），

給VideoChatNetwork賦值Player Prefab，并去掉Auto Create Player的勾選，

KcpTransport使用的是可靠UDP傳輸，在KcpTransport組件上可以設定埠號，

7.2、Player腳本

給VideoImage.prefab預設根節點掛上````Player腳本（它會自動掛上NetworkIdentity腳本），賦值Player腳本的UI```成員，

7.3、MainPanel腳本

給MainPanel.prefab預設掛上MainPanel腳本，并賦值UI成員，

8、Editor環境下測驗

在Editor環境下運行，效果如下：

9、發布應用

9.1、發布Windows平臺exe

轉為PC平臺，添加場景，

設定視窗尺寸為1280*720，

執行Build，打出exe，

9.2、發布Android平臺apk

轉為Android平臺，添加場景，


設定包名為com.linxinfa.videochat，

執行Build，打包出apk，

10、真機測驗

把apk安裝到手機上，手機可以正常訪問攝像頭，

我們在PC端運行客戶端，連接手機的IP地址，

手機與電腦的視頻聊天如下，畫面清晰度切換，效果還是比較明顯的，

四、工程原始碼

本文工程我以上次到CODE CHINA，感興趣的同學可自行下載下來學習，
地址：https://codechina.csdn.net/linxinfa/UnityVideoChat
注：我使用的Unity版本為2021.1.7f1c1 個人版

五、完畢

好了，就寫到這里吧，音頻的同步我沒有寫，思路是使用Unity的Microphone進行聲音采樣，上傳服務器進行轉發，這里就留給各位去實作啦，

另外，如果本文的Mirror網路庫你不熟悉，可能看代碼會比較吃力，建議可以先看看我之前那篇文章中關于Mirror網路庫的介紹：《【游戲開發實戰】Unity使用Socket通信實作簡單的多人聊天室（萬字詳解 | 網路 | TCP | 通信 | Mirror | Networking）》

天色已晚，我要去沖涼先了，拜拜~

我是林新發：https://blog.csdn.net/linxinfa
原創不易，若轉載請注明出處，感謝大家~
喜歡我的可以點贊、關注、收藏，如果有什么技術上的疑問，歡迎留言或私信~

最后，與皮皮貓合個影吧~