保姆級教程！整合聲網 SDK 實現 iOS 平臺音視訊通話和虛擬背景功能

前言

大家好，我是聲網 RTE 開發者社群作者 @小曾同學。

如果你想實現 iOS 平臺的音視訊通話，想在音視訊通話中新增虛擬背景，那這篇文章完全可以借鑑。使用 swift 語言，整合聲網 SDK 實現音視訊通話，並呼叫 enableVirtualBackground 介面新增虛擬背景，小夥伴們趕快跟著小曾實踐起來吧。

本篇文章主要是整合聲網 iOS 端 SDK，實現簡易音視訊 Demo，並在 Demo 中實現虛擬背景功能。其中也會包含匯入虛擬背景圖片時遇到的一些問題，以及相關 API 的呼叫姿勢。跟著一步一步做，你一定可以實現自己的音視訊 Demo，如果有任何問題，也可評論或者私信留言。

01 前期準備

在實現 iOS 平臺音視訊 Demo 之前，你需要有以下準備：

• Xcode

• 註冊聲網賬號，申請聲網 APPID、臨時Token ，詳見開始使用聲網平臺

如果你還沒有聲網賬號，可以通過文末的連結免費註冊，每個賬戶每月都有 10000 分鐘免費額度。 如果是個人學習/除錯，時長完全夠用。

注意臨時Token，主要用途是在客戶端加入頻道時對使用者鑑權，有效期為24小時。

小曾個人開發及測試環境如下：

• MacBook Pro

• Xcode：v 14.2

• 聲網SDK：4.1.1，SDK的下載可檢視文末參考資料

• Apple 開發者賬號

02 實戰

本次實踐，將一步步帶領大家實現音視訊通話並呼叫enableVirtualBackground介面新增虛擬背景功能。

2.1 建立專案

(1）建立iOS專案

開啟Xcode——Create a new Xcode project——選擇 iOS 模組下的 APP，之後便會出現如下介面，輸入相關內容，需要注意的是，Team 是開發者賬號，如果沒有可以去 Apple 開發者官網註冊一個免費的。

(2）點選 Next 之後，會出現如下介面，選擇 Minimum Deployments 為13.0，表示demo支援iOS 13.0及以上版本，需要注意，虛擬背景功能只支援 iOS 13 及以上版本的系統。

(3）新增媒體裝置許可權

點選Info欄目，新增攝像頭和麥克風許可權，點選“+”號選擇分別選擇 Privacy - Camera Usage Description、Privacy - Microphone Usage Description 。如果沒有新增許可權的話，當你點選 demo 時，會出現崩潰問題。

(4）開啟終端，進入根目錄 VideoCall_ios，輸入並執行命令 pod init，此時目錄中會生成 Podfile 檔案，編輯 Podfile 檔案，輸入 pod 'AgoraRtcEngine_iOS','4.1.1’ ，表示整合聲網sdk。

pod init
open -e Podfile

(5）安裝 SDK

在終端進入根目錄，輸入命令 pod install 並執行，通過cocoapods自動下載聲網 SDK，當看到Pod installation complete!表示安裝成功，此時會發現根目錄下多了一個{project}.xcworkspace 的檔案，在該檔案裡，會同時載入專案檔案及剛才安裝好的 Pod 依賴庫，並使兩者建立好關聯。通過 Xcode 開啟該檔案進行後續操作。

2.2 實現音視訊通話

本節主要介紹如何使用 Agora 視訊 SDK 實現 iOS 平臺音視訊通話。以下程式碼實現均在 ViewController.swift 檔案中輸入。

(1）匯入聲網kit

import AgoraRtcKit
//自3.0.0版本起，AgoraRtcEngineKit 類名更換為 AgoraRtcKit

(2）建立基礎使用者介面，並初始化介面

在 ViewController 類中建立使用者介面，並初始化

class ViewController: UIViewController{ 
    // 定義本地檢視變數
    var localView: UIView!
    // 定義遠端視訊變數
    var remoteView: UIView!
    // 定義 agoraKit
    var agoraKit: AgoraRtcEngineKit!

  // 設定視訊窗口布局
    override func viewDidLayoutSubviews(){
        super.viewDidLayoutSubviews()
        remoteView.frame = self.view.bounds
        localView.frame = CGRect(x: self.view.bounds.width - 180, y:0, width: 180, height: 230)  
    }

    func initView(){
        // 初始化遠端視訊視窗。
        remoteView = UIView()
        self.view.addSubview(remoteView)
        // 初始化本地視訊視窗。
        localView = UIView()
        self.view.addSubview(localView)
    }

（3）初始化 AgoraRtcEngineKit

在ViewController類中，例項化 AgoraRtcEngineKit 物件。

//初始化引擎
func initializeAgoraEngine(){
     let config = AgoraRtcEngineConfig()
     // 在這裡輸入你的 App ID.
     config.appId = "24bbaca4116c4b11b81cdf4cffdf41"
     // 呼叫 AgoraRtcEngineDelegate
     agoraKit = AgoraRtcEngineKit.sharedEngine(with: config, delegate: self)
    
 }

（4）加入頻道

加入頻道是實現音視訊通話的必要步驟，需要呼叫 agoraKit.joinChannel(byToken:channelId:info:uid:joinSuccess:) 方法.

注意：YOUR_TOKEN是您在聲網官網生成的 Token，YOUR_CHANNEL_ID是您自己定義的頻道 ID,頻道可理解為專用於傳輸實時音視訊資料的通道。uid是您在頻道中的使用者 ID，0 表示使用自動生成的使用者 ID。

func joinChannel(){
    let option = AgoraRtcChannelMediaOptions()
    // 在視訊通話場景下，將頻道場景設定為 liveBroadcasting
    option.channelProfile = .liveBroadcasting 
    // 設定使用者角色為主播
    option.clientRoleType = .broadcaster 
    // 使用臨時 token 加入頻道，在這裡傳入你的專案的 token 和頻道名。
    agoraKit?.joinChannel(byToken: "007eJxTYezdV5FYj92Eh4WVzc+Yfl9sd4XNOyPb1it1+3nGPwt4rMBiZJCUlJieaGBqaJZskGRomWRgmp6SZJKelAUlDI/PFnAIpDYGMDDtmv2BkZIBAEJ+FoSo1L52BAQBbtCAO", channelId: "zeng", uid: 0, mediaOptions: option)
}

（5）啟用本地視訊採集和預覽

呼叫 agoraKit.enableVideo() 開啟視訊採集功能，呼叫 agoraKit.enableAudio() 開啟音訊採集功能，呼叫 agoraKit.startPreview() 開始本地預覽。

func setupLocalVideo(){
    // 啟用視訊模組
    agoraKit?.enableVideo()
    agoraKit?.enableAudio()
    // 開始本地預覽
    agoraKit?.startPreview()
    let videoCanvas = AgoraRtcVideoCanvas()
    videoCanvas.uid = 0
    videoCanvas.renderMode = .hidden
    videoCanvas.view = localView
    // 設定本地檢視
    agoraKit?.setupLocalVideo(videoCanvas)
    }

（6）離開頻道

func leaveChannel() {
    // Step 1, release local AgoraRtcVideoCanvas instance
    agoraKit.setupLocalVideo(nil)
    // Step 2, leave channel and end group chat
    agoraKit.leaveChannel(nil)
    AgoraRtcEngineKit.destroy()
 }

(7) 設定遠端使用者視訊

使用extension關鍵字實現類的擴充套件。

extension ViewController: AgoraRtcEngineDelegate{
    // 監聽 didJoinedOfUid 回撥
        // 遠端主播加入頻道時，會觸發該回調
    func rtcEngine(_ engine: AgoraRtcEngineKit, didJoinedOfUid uid: UInt, elapsed: Int){
        let videoCanvas = AgoraRtcVideoCanvas()
        videoCanvas.uid = uid
        //渲染模式 採用hidden
        videoCanvas.renderMode = .hidden
        videoCanvas.view = remoteView
        // 設定遠端檢視
        agoraKit?.setupRemoteVideo(videoCanvas)
   }
}

（8）載入檢視，渲染畫面

在ViewController類中實現 viewDidLoad 函式

override func viewDidLoad() {
        super.viewDidLoad()
        // 當載入檢視後，你可以進行其他其他設定。
        // 初始化視訊視窗函式
        initView()
        // 當呼叫聲網 API 時，以下函式會被呼叫
        initializeAgoraEngine()
        setupLocalVideo()
        joinChannel()
    }

（9）執行demo

點選執行按鈕，選擇合適的測試機，執行demo，我使用的是真機 iPhone13 進行除錯。

當啟動 demo 時，需要先信任 APP，在設定——通用——VPN與裝置管理——信任APP即可。

2.3 實現虛擬背景功能

聲網視訊SDK提供了 enableVirtualBackground 介面，虛擬背景功能支援你使用自定義的背景圖替代本地使用者原來的背景圖或者將背景虛化處理。成功開啟虛擬背景功能後，頻道內所有使用者都能看到自定義的背景。

需要注意的是，在 enableVideo 或 startPreview 之後呼叫 enableVirtualBackground 方法。而且這個方法依賴於虛擬背景動態庫 AgoraVideoSegmentationExtension.xcframework，如果刪除該動態庫會導致無法正常開啟該功能。可在Pods目錄下檢視動態庫。

在 enableVirtualBackground 方法中需要傳入三個引數

enable：表示是否開啟虛擬背景，值為true或者false

• backData：表示自定義的背景圖

• segData：表示背景影象的處理屬性

• 具體實現如下：

（1）上傳背景圖片

右擊專案——Add Files to “VideoCall_ios” ——選擇一張圖片新增至專案中，注意，自定義背景圖支援PNG和JPG格式。

新增完圖片之後，右擊圖片——show File Inspector——在介面右側，更改圖片Type為Data。如果選擇預設值的話，則自定義背景不會生效。

（2）邏輯程式碼實現

在 setupLocalVideo 函式，agoraKit?.startPreview() 方法之後，新增虛擬背景，其中使用Bundle.main.path() 方法來開啟文字檔案。

let source = AgoraVirtualBackgroundSource()
source.backgroundSourceType = .img
source.source = Bundle.main.path(forResource: "test", ofType: "png")
agoraKit.enableVirtualBackground(true, backData: source, segData: nil)

其中，agoraKit.enableVirtualBackground() 存在返回值，0表示呼叫成功，當小於0時，表示呼叫失敗。具體返回值資訊可檢視 enableVirtualBackground 。

（3）Demo展示

執行demo後，視訊背景已經換成了我們自定義圖片 !

03 總結

本篇文章主要分享使用Swift語言，整合聲網 SDK 實現音視訊通話，並呼叫enableVirtualBackground介面新增虛擬背景。從專案搭建到介面呼叫以及 Demo執行，均已詳細講解，並對其遇到的問題，也做了詳細說明。如果有不懂的地方可參考聲網官網快速開始。（注：本文Demo原始碼已放置個人github）

參考資料

• 註冊聲網賬號

• SDK 下載

• 聲網官網-快速開始