保姆級教程！集成聲網 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 下載

• 聲網官網-快速開始