如何在 Unity 中建立實時視頻聊天應用

近期,聲網發佈了基於 Native SDK 2.9.1 全平臺接口的第一個全功能版 Agora Video SDK for Unity,可用於基於 Unity 環境開發的遊戲(不在乎包體大小)、教育、AR、VR 項目。咱們將講解如何使用 Agora Video SDK for Untiy 在 Unity 中構建跨平臺的實時視頻聊天場景。git

在此以前,要說明一下,咱們在這篇教程中要用的 Agora Video SDK for Untiy ,與以前已經發布的 Agora 互動遊戲 SDK for Unity 有不少差異,具體以下:github

image.png

也就是說,若是你開發的Unity 應用/遊戲對安裝包大小比較敏感,那麼推薦使用 Agora 互動遊戲 SDK for Unity,包體積佔用最小可到 1MB;若是你的應用/遊戲, 對安裝包體積不那麼敏感,或者有更多須要自定義音視頻流的須要,那麼可使用本篇教程的主角 Agora Video SDK for Unity。好了,咱們接下來開始講講怎麼快速用起來。xcode

準備工做

  • Unity Editor
  • 瞭解 Unity Editor、GameObjects、Unity 腳本,以及如何將 Unity 應用發佈到移動設備上
  • 對 C#的基本瞭解
  • Agora.io 開發人員賬戶

概述

在進入主題以前,讓咱們花點時間概覽一下咱們將要完成的全部步驟app

  1. 設立新項目並導入 Agora Video SDK for Untiy
  2. 建立場景
  3. 處理按鈕的事件
  4. 集成 Agora SDK
  5. 在設備上構建和測試(iOS/Android/Windows/macOS)

建立新項目

首先,讓咱們打開 Unity 並建立一個空白的新項目,將其命名爲Agora Video Demo。完成 Unity 的項目設置後,咱們導航到 Unity Asset Store,而後搜索「Agora Video SDK」。接下來,咱們將 Agora Video SDK for Unity 導入到咱們的項目中。當出現提示時,請確保選中列表中的全部Assets。編輯器

建立 Scene

如今,咱們建立一個新 Scene,將其命名爲 WelcomeScene,而後雙擊該場景在 Editor 視圖中將其打開。應用被加載後,WelcomeScene 將是用戶看到的首個畫面。咱們首先從場景中刪除現有的 Camera 和 Lights,而後咱們添加一個 Canvas GameObject。接下來咱們把「Camera」添加爲「Canvas」的子對象。因爲屏幕是以 2D 模式顯示的,所以咱們將 Editor 切換爲 2D 模式。咱們還須要把 Editor 視圖切換到 Game 模式,以便咱們可以可視化與 Camera 視角相關的位置。
咱們須要一個按鈕來觸發應用執行「加入頻道」的動做,爲此咱們添加一個按鈕並將其命名爲 JoinChannel,併爲其添加標籤。咱們還須要讓用戶可以輸入其頻道的名稱,爲此咱們建立一個文本輸入(InputFiled),將其命名爲 ChannelName。ide

create scene

接下來,咱們將建立一個新場景並將其命名爲 ChatScene,它是播放本地和遠程視頻流的屏幕。爲了測試 Agora Video SDK 的某些功能,咱們爲場景添加一些 3D 的 GameObject。首先,向場景添加一個 Cube。因爲咱們的場景包含 3D,因此在編輯器中退出 2D 模式。
咱們但願 Cube 將本地的攝像頭視頻流渲染爲紋理,所以咱們須要添加 VideoSurface.cs 做爲 Cube 的組件。咱們添加一個 Cylinder GameObject,將其移動到上方,使其不被 Cube 遮擋。接下來咱們給 Cylinder 調整一下 position,並添加 VideoSurface.cs 組件。
最後,咱們把 Canvas 添加到場景中,這樣咱們就能夠添加 2D 按鈕以便退出聊天,咱們將其命名爲 LeaveButton 併爲其指定適當的標籤。在此過程當中,咱們須要添加一個文本框,將其命名爲 VersionText。咱們把 VersionText 放置在右上角使其不會遮擋畫面,而後將顏色設置爲白色以便易於查看。函數

處理按鈕事件

在設置場景的過程當中,咱們建立了兩個按鈕(JoinButton 和 LeaveButton),如今咱們須要建立一個腳本,將一些 On Click Event 映射到這兩個按鈕上。測試

首先在 Assets 中建立一個新的 C#腳本,將其命名爲 ButtonHandler.cs,而後雙擊它,在 Visual Studio 中打開文件。而後咱們添加一個函數 OnButtonClick(),爲簡化起見,咱們給函數主體中添加一個 Debug Log。ui

咱們回到 Unity 中的 WelcomeScene 並將腳本和函數attach到按鈕上。首先選擇 JoinButton 並將 ButtonHandler.cs 添加爲組件。接下來添加一個 On Click event,並將按鈕單擊映射到 OnButtonClick()。而後咱們在 ChatScene 的 LeaveButton 上重複此過程。spa

ima.png

此外須要注意的是,咱們須要引入UnityEngine.UI,而後才能從 ChannelNameGameObject 獲取 InputFiled 組件。

public void OnButtonClick()
{
    Debug.Log("Button Clicked: " + name);

    // determin which button
    if (name.CompareTo("JoinButton") == 0)
    {
        // join chat
        OnJoinButtonClicked();
    }
    else if (name.CompareTo("LeaveButton") == 0)
    {
        // leave chat
        OnLeaveButtonClicked();
    }
}

private void OnJoinButtonClicked()
{
    Debug.Log("Join button clicked");

    // get channel name from text input
    GameObject go = GameObject.Find("ChannelName");
    InputField input = go.GetComponent<InputField>();
}

private void OnLeaveButtonClicked()
{
    Debug.Log("Leave button clicked");
}

集成 Agora SDK

首先,咱們在 Assets 中建立一個新的 C#腳本,將其命名爲 AgoraInterface.cs,而後在 Visual Studio 中打開該文件。咱們建立的第一個變量是 appId,用來保存咱們的 Agora AppID。複製你的 AppID 並將其粘貼到 appId 的值中。咱們還須要建立一個變量來保存遠端視屏流的uid。

private static string appId = "Agora App ID";

public IRtcEngine mRtcEngine;

public uint mRemotePeer;

讓咱們建立一個函數來初始化 Agora mRtcEngine,咱們將其稱爲 LoadEngine()。咱們確保引擎僅被初始化一次。咱們使用if語句來檢查 mRtcEngine 引用是否爲 null。若是結果爲 true,咱們使用 IRtcEngine.getEngine 傳入咱們的 Agora 的 AppID 來初始化引擎。

接下來,咱們將聲明 JoinChannel() 函數。首先檢查 mRtcEngine 是否存在,而後咱們調用 EnableVideo 和 EnableVideoObserver,最後咱們調用 JoinChannel。

到目前爲止,咱們已經初始化了 Agora mRtcEngine,並用它來支持「加入頻道」功能。如今咱們須要爲用戶提供一種「離開頻道」並「卸載」引擎的方法。咱們從 LeaveChannel() 開始,再次檢查引擎是否存在,而後用引擎調用 LeaveChannel() 和 DisabelVideoObserver()。最後,咱們調用 IRtcEngine.Destroy(),並將本地引用設置爲 null 來卸載引擎。

ima2

咱們準備添加一些回調函數,以即可以基於各類預約義事件進行調用。咱們重點關注三個回調:OnChannelJoinSuccess、OnUserJoined 和 OnUserOffline。只要本地設備成功加入頻道,就會調用 OnChannelJoinSuccess;每當遠程流加入頻道時,就會調用 OnUserJoined;每當遠端流離開頻道時,就會調用 OnUserOffline。
在調用 JoinChannel 以後,咱們在 OnJoinButtonClicked 中向 SceneManager 的 SceneLoaded 監聽器添加一個回調,而後將函數命名爲 OnSceneFinishedLoading。因爲每次加載場景時都會調用回調,所以咱們須要一箇中間函數。

image3.png

在設備上測試咱們的工做成果以前,咱們須要爲 Android 添加一些權限請求。從 Unity 2018_3 開始,權限再也不自動添加,所以咱們須要添加一些 if-else 語句來檢查並請求麥克風和攝像頭的權限。

image4.png

在設備上構建和測試

終於能夠測試咱們的應用了!讓咱們回到 Unity 並打開「Build Settings」。首先,咱們將 WelcomeScene 和 ChatScene 拖到「Build Settings」對話框的 Scene 列表中。

在構建和部署咱們的應用以前,咱們須要對每一個平臺的播放器設置進行一些調整。咱們須要更新 Bundle ID,並提供一些有關攝像頭和麥克風使用狀況的描述文本(啓用權限提示)。

image5.png

如今咱們準備構建咱們的應用!在「BuildSettings 」對話框中,單擊「Build 」按鈕,Unity 將提示你輸入保存構建的位置。Unity 完成構建 iOS 應用後,將出現包含 Unity-iPhone.xcodeproj的Finder 窗口,雙擊該文件打開 XCode。打開 XCode後,選擇項目(從左側的文件導航器中),啓用「AutomaticSigning 」並選擇你的簽名證書。最後,確保已鏈接測試設備,而後單擊「播放」按鈕。

一樣的,咱們這個版本也支持 Windows 和 macOS,如圖所示:

image6.png

image7.png

你能夠看到 WelcomeScene 先被加載,當咱們加入頻道時,咱們進入 ChatScene,而當咱們單擊「Leave 」按鈕時,將返回 WelcomeScene。惟一缺乏的是遠程流,爲了實現遠端視頻流,咱們須要第二個設備。
此外,咱們也支持 Android。從「Platform 」列表中選擇「Android」,打開「Player Settings」並提供一個 Package Name。確保已鏈接你的 Android 設備,而後單擊「BuildAnd Run」。

image8.png

搞定!

給你點贊,又搞定一個「小目標」!若是你有任何新的想法,或遇到什麼問題,歡迎點擊「閱讀原文」到 RTC 開發者社區與咱們交流。

其它資源

  • 咱們在 Github 開源了 Unity SDK 的相關代碼示例,具體能夠參考:https://github.com/AgoraIO/Ag...
  • 可在Unity Asset Store上獲取Agora.io Video SDK for Unity
  • 完整的 API 文檔可在聲網文檔中心找到:https://docs.agora.io/cn/Vide...
  • 若是在集成中遇到問題, 你能夠到 RTC 開發者社區提問

備註

  1. 你可能會問,爲何是 getEngine() 而不是新的 IRtcEngine(),這與 Agora mRtcEngine 做爲單例運行有關。getEngine() 將檢查實例是否存在,若是不存在,則建立一個新實例。getEngine() 函數也能夠稍後被調用以從代碼的其餘部分獲取對引擎的引用。
  2. 全部回調在AgoraGameRtcEngine.cs中可見(Assets → /Scripts → /AgoraGamingSDK)。

注意:每一個回調函數都會傳遞一組特定的參數,所以,若是你打算添加其餘任何回調,請務必查看 AgoraGameRtcEngine.cs 文件

若是在開發過程當中遇到任何技術問題,能夠在Agora版塊中提問,聲網Agora工程師會及時回覆。

相關文章
相關標籤/搜索