【保姆級教程】Android - iOS 視頻互通 | 掘金技術徵文

時間  2019-11-26
標籤 保姆級教程 android ios 視頻 互通 技術 徵文 欄目 Android 简体版
原文   原文鏈接

不須要任何技術背景，跟着本教程絕對不會失手，讓你輕鬆體驗作程序員的快樂。html

本文選用 Agora 視頻通話 SDK，在 Android 和 iOS 手機上實現一個基礎的一對一視頻通話。適用於零基礎開發者。主要包含以下內容：java

  • Android 端集成
  • iOS 端集成
  • 運行 Demo

Android App 集成

前提條件

  • Android Studio 3.0 及以上版本
  • Android SDK API Level Level ≥ 16
  • Android 4.1 及以上版本的移動設備
  • 一個 Agora 的項目 App ID

請使用真機運行項目。模擬機可能會由於功能缺失而沒法運行。android

建立項目

若是你已經有一個 Android 項目，能夠跳過該章節，直接閱讀下文的集成 SDK。ios

  1. 打開 Android Studio，點擊 Start a new Android Studio project。
  2. 在 Choose your project 頁面，選擇 Phone and Tablet > Empty Activity，而後點擊 Next。
  3. 在 Configure your project 頁面，依次填入：
    • Name：所建立項目的名稱，如 HelloAgora
    • Package name：項目包的名稱，如 io.agora.helloagora
    • Project location：項目在本地的保存路徑
    • Language：項目使用的語言，如 Java
    • Minimum API level：項目使用的 Android API 等級

而後點擊 Finish。 c++

Android Studio 會花一段時間進行配置，若是有提示須要安裝插件，根據屏幕提示下載便可。程序員

在工做的電腦上，鏈接 Android 手機或平板。點擊右上方的 Sync 按鈕，提示 Build: completed successdully 表示編譯成功後，點擊右上方的 Run app 圖標。swift

等待一段時間後，Android 手機或平板上會彈出一個是否安裝應用程序的彈框。贊成後，手機上就會安裝上一個名爲 HelloAgora 的應用。恭喜你，成功建立了第一個 App！bash

集成 Agora SDK 到項目中

  1. 下載並解壓 SDK。從聲網開發者中心下載最新版的 Android 視頻通話/視頻直播 SDK。app

    其中，libs 文件夾中包含 jar 文件和 so 文件夾。samples 文件夾中包含一對一視頻通話和互動直播的代碼示例程序。ide

  2. 拷貝 SDK 文件到項目目錄。在項目文件夾的 app/src/main 路徑下，建立一個 jniLibs 文件夾。而後將 SDK 包中的 arm64-v8a、armeabi-v7a 和 x86 文件拷貝到 jniLibs 文件夾下。

  3. 導入 jar 包。將 SDK 包中的 agora-rtc-sdk.jar 文件拷貝到你項目文件夾的 app/libs 路徑下。

  4. 同步 SDK。在 Android Studio 中，將項目的頁面視圖切換爲 Project 模式。點擊右上角的 Sync Project with Gradle Files 按鈕。確認 app/build.gradle 文件中有以下行，完成集成。

    implementation fileTree(dir: 'libs', include: ['*.jar']) 複製代碼

添加項目權限

在 /app/src/main/AndroidManifest.xml 文件中，將 package 的名字改成你本身項目包的名字，而後添加以下 <uses-permission... /> 行，增長設備權限：

<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- If the app uses Bluetooth, please add Bluetooth permissions.-->
<uses-permission android:name="android.permission.BLUETOOTH" />
複製代碼

防止代碼混淆

在 app 模塊下的 proguard-rules.pro 文件中，添加以下行，防止代碼混淆：

-keep class io.agora.**{*;}
複製代碼

到這裏，你就將 Agora 視頻通話/視頻直播 SDK 集成到你的項目中，並完成了開發環境準備。

建立 UI

想象你和朋友正在一對一視頻通話。這個視頻通話的界面上會有如下元素：本地視頻畫面（你）、遠端視頻畫面（你朋友）、能退出頻道的按鈕。下面咱們就使用 Android Studio 在新建的項目中建立這些 UI 元素吧。

  1. 設置通話界面佈局

    在項目的 /app/src/main/res/layout/activity_main.xml 文件裏，參考以下代碼，依次設置本地及遠端視窗的位置、尺寸；通話界面提示文字；通話界面上結束按鈕的位置等。

    <?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_video_chat_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <FrameLayout
        android:id="@+id/remote_video_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" />
 
    <FrameLayout
        android:id="@+id/local_video_view_container"
        android:layout_width="160dp"
        android:layout_height="284dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray" />
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="16dp"
        android:orientation="vertical">
 
        <TextView
            android:id="@+id/quick_tips_when_use_agora_sdk"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="40dp"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:gravity="center_vertical|start"
            android:text="1. Default channel name is demoChannel1\n2. Waiting for remote users\n3. This demo only supports 1v1 video calling" />
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal">
 
 
            <ImageView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="20"
                android:onClick="onEndCallClicked"
                android:scaleType="centerInside"
                android:src="@drawable/btn_end_call" />
 
        </LinearLayout>
 
    </LinearLayout>
 
</RelativeLayout>
複製代碼

  2. 獲取通話結束按鈕

    爲方便起見，咱們直接使用代碼示例程序的 UI 元素和設計。將 Demo 中的 /app/src/main/res/drawable-xxxdpi/ 路徑下的 btn_end_call.png 複製黏貼至項目的 /app/src/main/res/drawable/ 路徑下。

  3. 查看並更新通話界面

    在 activity_main.xml 頁面，點擊切換到 Design 頁籤，實時查看或更新設置的通話視窗佈局。

    到這裏，一個簡單的通話界面就建立好了。

調用核心 API 實現視頻通話

視頻通話場景的 API 調用流程以下圖所示。在實際開發中，你還須要配合 Android 的原生 API 來實現視頻通話。若是你對 Android 原生 API 不熟悉，也能夠直接參考下文中的完整代碼進行調用。

  1. 導入頭文件

    在項目的 app/src/main/java/MainActivity 文件中，package io.agora.helloagora 行的下方，黏貼以下行，導入相應的 SDK 頭文件：

    import io.agora.rtc.IRtcEngineEventHandler;
import io.agora.rtc.RtcEngine;
import io.agora.rtc.video.VideoCanvas;
 
import io.agora.rtc.video.VideoEncoderConfiguration;
複製代碼

  2. 初始化 SDK

    在初始化過程當中調用 create 方法獲取一個 RtcEngine 實例。

    • 在 /app/src/main/res/values/string.xml 文件中，添加 <string name="agora_app_id">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</string> 行，並填入你所獲取到的 App ID。
    • 指定 RtcEngine 的事件回調，用以通知 SDK 在運行過程當中發生的事件。
    private RtcEngine mRtcEngine;
 
 
private final IRtcEngineEventHandler mRtcEventHandler = new IRtcEngineEventHandler() {
    @Override
    public void onFirstRemoteVideoDecoded(final int uid, int width, int height, int elapsed) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                setupRemoteVideo(uid);
            }
        });
    }
};
 
...
 
 
private void initializeAgoraEngine() {
    try {
        mRtcEngine = RtcEngine.create(getBaseContext(), getString(R.string.agora_app_id), mRtcEventHandler);
    } catch (Exception e) {
        throw new RuntimeException("NEED TO check rtc sdk init fatal error\n" + Log.getStackTraceString(e));
    }
}
複製代碼

  3. 設置視頻屬性

    因爲 Agora Video SDK 中默認不開始視頻模塊，所以設置視頻屬性包含 2 個步驟：

    • 調用 enableVideo 開啓視頻模式
    • 經過 setVideoEncoderConfiguration 方法設置本地視頻的編碼屬性
    private void setupVideoProfile() {
    mRtcEngine.enableVideo();
 
    mRtcEngine.setVideoEncoderConfiguration(new VideoEncoderConfiguration(VideoEncoderConfiguration.VD_640x360, VideoEncoderConfiguration.FRAME_RATE.FRAME_RATE_FPS_15,
            VideoEncoderConfiguration.STANDARD_BITRATE,
            VideoEncoderConfiguration.ORIENTATION_MODE.ORIENTATION_MODE_FIXED_PORTRAIT));
}
複製代碼

  4. 設置本地視圖

    本地視圖，指本地用戶在通話界面上看到的本地的視頻畫面。調用 setupLocalVideo 方法設置本地看到的視頻。該方法爲本地視頻流建立一個 View 對象，並：

    • 將 setZOrderMediaOverlay 設爲 true，表示新增一個圖層
    • 將該視頻圖層與通話界面佈局 /app/src/main/res/layout/activity_main.xml 文件中的 local_video_view_container 進行綁定
    private void setupLocalVideo() {
    FrameLayout container = (FrameLayout) findViewById(R.id.local_video_view_container);
    SurfaceView surfaceView = RtcEngine.CreateRendererView(getBaseContext());
    surfaceView.setZOrderMediaOverlay(true);
    container.addView(surfaceView);
    mRtcEngine.setupLocalVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_FIT, 0));
}
複製代碼

  5. 加入頻道

    調用 joinChannel 方法加入視頻通話頻道。你須要在該方法中傳入想要加入的頻道名稱。App ID 和 Channel Name 均相同的用戶能夠加入同一個頻道進行通話。

    private void joinChannel() {
    mRtcEngine.joinChannel(null, "demoChannel1", "Extra Optional Data", 0); 
}
複製代碼

  6. 設置遠端視圖

    遠端視頻，只本地用戶在通話界面上看到的遠端用戶的視頻畫面。該方法建立一個新的圖層，同時將該視頻圖層與通話界面佈局 /app/src/main/res/layout/activity_main.xml 文件中的 remote_video_view_container 進行綁定。

    private void setupRemoteVideo(int uid) {
    FrameLayout container = (FrameLayout) findViewById(R.id.remote_video_view_container);
 
    if (container.getChildCount() >= 1) {
        return;
    }
 
    SurfaceView surfaceView = RtcEngine.CreateRendererView(getBaseContext());
    container.addView(surfaceView);
    mRtcEngine.setupRemoteVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_FIT, uid));
 
    surfaceView.setTag(uid); // for mark purpose
    View tipMsg = findViewById(R.id.quick_tips_when_use_agora_sdk); // optional UI
    tipMsg.setVisibility(View.GONE);
}
複製代碼

  7. 離開頻道

    調用 leaveChannel 方法離開當前頻道。

    private void leaveChannel() {
    mRtcEngine.leaveChannel();
}
複製代碼

完整代碼

以上爲 Agora 核心 API 的代碼示例。你還須要爲退出頻道的按鈕設置一個離開該頁面的方法，並在 onCreate 和 onDestroy 中調用上述 API。以下展現的是完整的代碼示例：

package io.agora.helloagora;
 
import android.support.v4.view.PagerTitleStrip;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Surface;
import android.view.SurfaceView;
import android.view.View;
import android.widget.FrameLayout;
 
import io.agora.rtc.IRtcEngineEventHandler;
import io.agora.rtc.RtcEngine;
import io.agora.rtc.video.VideoCanvas;
 
import io.agora.rtc.video.VideoEncoderConfiguration;
 
public class MainActivity extends AppCompatActivity {
 
    private RtcEngine mRtcEngine;
 
    private final IRtcEngineEventHandler mRtcEventHandler = new IRtcEngineEventHandler() {
        @Override
        public void onFirstRemoteVideoDecoded(final int uid, int width, int height, int elapsed) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    setupRemoteVideo(uid);
                }
            });
        }
    };
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initializeAgoraEngine();
        setupVideoProfile();
        setupLocalVideo();
        joinChannel();
    }
 
    protected void onDestroy() {
        super.onDestroy();
 
        leaveChannel();
        RtcEngine.destroy();
        mRtcEngine = null;
 
    }
 
    public void onEndCallClicked(View view) {
        finish();
    }
 
    private void initializeAgoraEngine() {
        try {
            mRtcEngine = RtcEngine.create(getBaseContext(), getString(R.string.agora_app_id), mRtcEventHandler);
        } catch (Exception e) {
            throw new RuntimeException("NEED to check rtc sdk init fatal error\n" + Log.getStackTraceString(e));
        }
    }
 
 
    private void setupVideoProfile() {
        mRtcEngine.enableVideo();
 
        mRtcEngine.setVideoEncoderConfiguration(new VideoEncoderConfiguration(
                VideoEncoderConfiguration.VD_640x360,
                VideoEncoderConfiguration.FRAME_RATE.FRAME_RATE_FPS_15,
                VideoEncoderConfiguration.STANDARD_BITRATE,
                VideoEncoderConfiguration.ORIENTATION_MODE.ORIENTATION_MODE_ADAPTIVE));
    }
 
    private void setupLocalVideo() {
        FrameLayout container = (FrameLayout) findViewById(R.id.local_video_view_container);
        SurfaceView surfaceView = RtcEngine.CreateRendererView(getBaseContext());
        surfaceView.setZOrderMediaOverlay(true);
        container.addView(surfaceView);
        mRtcEngine.setupLocalVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_FIT, 0));
    }
 
    private void joinChannel() {
        mRtcEngine.joinChannel(null, "demoChannel1", "Extra Optional Data", 0);
    }
 
    private void setupRemoteVideo(int uid) {
        FrameLayout container = (FrameLayout) findViewById(R.id.remote_video_view_container);
 
        if (container.getChildCount() >= 1) {
            return;
        }
 
        SurfaceView surfaceView = RtcEngine.CreateRendererView(getBaseContext());
        container.addView(surfaceView);
        mRtcEngine.setupRemoteVideo(new VideoCanvas(surfaceView,  VideoCanvas.RENDER_MODE_FIT, uid));
 
        surfaceView.setTag(uid);
        View tipMsg = findViewById(R.id.quick_tips_when_use_agora_sdk);
        tipMsg.setVisibility(View.GONE);
 
    }
 
    private void leaveChannel() {
        mRtcEngine.leaveChannel();
    }
 
 
}
複製代碼

至此，Android App 就配置好了。點擊右上角的 Sync Project with Gradle Files 按鈕從新進行同步。

iOS App 集成

前提條件

  • Xcode 9.0+。
  • iOS 8.0+ 真機（iPhone 或 iPad）。
  • 一個有效的 Agora 開發者帳號（免費註冊）。
  • 請確保你的項目已設置有效的開發者簽名。

請使用真機運行項目。模擬機可能會由於功能缺失而沒法運行。

建立項目

  1. 打開 Xcode，新建一個項目。

  2. 選擇 Single View App 模板，點擊 Next。

  3. 填入你的項目名稱，公司名稱等信息，選擇開發團隊與開發語言，點擊 Next。

    若是你沒有添加過開發團隊信息，會看到 Add account… 按鈕。點擊該按鈕並按照屏幕提示登入 Apple ID，完成後便可選擇你的帳戶做爲開發團隊。

  4. 選擇你的項目所要存放的位置，點擊 Create。

設置開發者簽名

若是你已經設置過開發者簽名，可跳過該節。

將你的 iOS 設備鏈接至電腦。選中當前項目 Target ，在 General 標籤頁上找到 Signing，勾選 Automatically manage signing，在彈窗中點擊 Enable Automatic。

等待片刻，你會看到以下狀態，說明你已經設置好了開發者簽名。

至此，你已經完成了項目的建立。接下來，讓咱們把 Agora SDK 包添加到這個項目中。

集成 Agora SDK 到項目中

有兩種方式將 Agora SDK 添加到你的項目中：

  • 自動添加庫：該方法無需下載 Agora SDK，直接使用 CocoaPods 將 SDK 庫添加到項目中。
  • 手動添加庫：該方法須要下載 Agora SDK，並手動將 SDK 的庫添加到項目中。

自動添加庫

開始前請確保你已安裝 Cocoapods。參考 Cocoapods Getting Started 瞭解安裝方法。

  1. 在 Terminal 裏進入項目根目錄，而後輸入如下命令。項目路徑下會生成一個 Podfile 文本文件。

    pod init
複製代碼

  2. 打開 Podfile 文件，修改文件爲以下內容。注意將 Your App 替換爲你的 Target 名稱。

    platform :ios, '9.0'
use_frameworks!

target 'Your App' do
	pod 'AgoraRtcEngine_iOS'
end
複製代碼

  3. 在 Terminal 內輸入如下命令更新本地庫版本：

    pod update
複製代碼

  4. 在 Terminal 內輸入如下命令安裝 Agora SDK：

    pod install
複製代碼

    若是 Terminal 顯示 Pod installation complete!，則表示自動添加庫已完成。此時項目文件夾中會生成一一個 xcworkspace 文件。關閉當前打開的項目，雙擊打開新生成的 xcworkspace 文件。

手動添加庫

  1. 下載 Agora Video SDK for iOS ，解壓後將 libs 文件夾內的 AgoraRtcEngineKit.framework 文件複製到你的項目文件夾內。

  2. 使用 Xcode 打開你的項目，而後選中當前 Target。

  3. 打開 Build Phases 頁面，展開 Link Binary with Libraries 項並添加以下庫。點擊 + 圖標開始添加。

    ../_images/ios_video_3.jpg
    • AgoraRtcEngineKit.framework
    • Accelerate.framework
    • AudioToolbox.framework
    • AVFoundation.framework
    • CoreMedia.framework
    • CoreML.framework
    • CoreTelephony.framework
    • libc++.tbd
    • libresolv.tbd
    • SystemConfiguration.framework
    • VideoToolbox.framework

    其中，AgoraRtcEngineKit.framework 位於你的項目文件夾下。所以點擊 + 後，還須要點擊 Add Other… ，而後進入你的項目所在目錄，選中這個文件並點擊 Open。

添加媒體設備權限

使用 Agora SDK 前，須要對設備的麥克風和攝像頭進行受權。打開 info.plist ，點擊 + 圖標開始添加：

  • Privacy - Microphone Usage Description，並填入使用麥克風的目的，例如：Video Call。
  • Privacy - Camera Usage Description，並填入使用攝像頭的目的，例如：Video Call。
../_images/ios_video_7.jpg

訪問庫

打開 ViewController.swift 文件，在 import UIKit 下一行填入下面的代碼。

import AgoraRtcEngineKit
複製代碼

若是填入 import 代碼後提示找不到文件，能夠嘗試在 Build Settings 頁面 Framework search paths 設置中添加 $(SRCROOT)。

如今，咱們已經將 Agora SDK 集成到項目中了。

建立 UI

與安卓類似，視頻通話須要建立一些基本的 UI 元素：本地視頻畫面（你）、遠端視頻畫面（你朋友）、能退出頻道的按鈕。下面咱們就在新建的項目中建立這些 UI 元素，順便將須要用到的方法和變量寫好。

在 ViewController.swift 文件中，用如下代碼替代 import 行下面的內容：

class ViewController: UIViewController, AgoraRtcEngineDelegate {

    var agoraKit: AgoraRtcEngineKit!
    var localVideo: UIView!
    var remoteVideo: UIView!
    var leaveButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        initView()
        initAgora()
        setupVideo()
        setupLocalVideo()
        joinChannel()
    }
    
    func initView() {
        // 設置遠端視頻畫面
        remoteVideo = UIView(frame: self.view.bounds)
        self.view.addSubview(remoteVideo)
        
        // 設置本地視頻畫面
        localVideo = UIView(frame: CGRect(x: self.view.bounds.width - 90, y: 0, width: 90, height: 160))
        self.view.addSubview(localVideo)
        
        // 設置離開按鈕
        leaveButton = UIButton(type: .custom)
        leaveButton.setTitleColor(UIColor.red, for: .normal)
        leaveButton.frame = CGRect(x: self.view.bounds.width / 2 - 50, y: self.view.bounds.height - 50, width: 100, height: 20)
        leaveButton.setTitle("Leave", for: .normal)
        leaveButton.addTarget(self, action: Selector(("didClickLeave")), for: .touchUpInside)
        self.view.addSubview(leaveButton)
    }
    
}
複製代碼

到這裏，一個簡單的通話界面就建立好了。接下來咱們須要經過調用 Agora SDK 提供的核心 API 來實現基礎的視頻通話功能。

調用核心 API 實現視頻通話

視頻通話場景的 API 調用流程以下圖所示。你也能夠直接參考下文的中完整代碼進行調用。

  1. 初始化 AgoraRtcEngineKit

    進入通話頻道以前，調用 sharedEngineWithAppId 方法建立一個 AgoraRtcEngine 實例。

    1）在 initView 方法定義後繼續添加下面的代碼：

    func initAgora() {
   agoraKit = AgoraRtcEngineKit.sharedEngine(withAppId: "YourAppId", delegate: self)
}
複製代碼

    2）用你剛剛在 Android 項目中填寫的 App ID 替換上面代碼中的 YourAppId（注意保留雙引號）。

  2. 設置視頻屬性

    因爲 Agora SDK 中默認視頻模塊是關閉的，所以設置視頻屬性包含 2 個步驟：

    • 調用 enableVideo 開啓視頻模式
    • 經過 setVideoEncoderConfiguration 方法設置本地視頻的編碼屬性
    func setupVideo() {
    // 打開視頻模式
    agoraKit.enableVideo()
    // 設置視頻編碼配置
    agoraKit.setVideoEncoderConfiguration(AgoraVideoEncoderConfiguration(size: AgoraVideoDimension640x360,
                                                                             frameRate: .fps15,
                                                                             bitrate: AgoraVideoBitrateStandard,
                                                                             orientationMode: .adaptative))
}
複製代碼

  3. 設置本地視頻視圖

    本地視頻視圖，是指用戶在本地設備上看到的本地視頻流的視圖。

    在進入頻道前調用 setupLocalVideo 方法，使應用程序綁定本地視頻流的顯示視窗，並設置本地看到的本地視頻視圖。

    func setupLocalVideo() {
  let videoCanvas = AgoraRtcVideoCanvas()
  videoCanvas.uid = 0
  videoCanvas.view = localVideo
  videoCanvas.renderMode = .hidden
  agoraKit.setupLocalVideo(videoCanvas)
}
複製代碼

  4. 加入頻道

    如今你能夠加入頻道開始視頻通話了。 調用 joinChannelByToken 方法加入頻道。

    你須要在該方法中傳入想要加入的頻道名稱。App ID 和頻道名稱均相同的用戶能夠加入同一個頻道進行通話。

    func joinChannel() {
    agoraKit.joinChannel(byToken: nil, channelId: "demoChannel1", info:nil, uid:0) {(sid, uid, elapsed) -> Void in}
    UIApplication.shared.isIdleTimerDisabled = true
}
複製代碼

    請確保你在該方法中傳入的 channelId 的值與在 Android 項目該方法中傳入的值是一致的。

  5. 設置遠端視頻視圖

    遠端視頻視圖，是指用戶在本地設備上看到的遠端用戶的視頻畫面。

    在遠端用戶進入頻道後，能夠在遠端視頻首幀解碼回調 firstRemoteVideoDecodedOfUid 中調用 setupRemoteVideo 方法設置本地看到的遠端用戶的視頻視圖。

    func rtcEngine(_ engine: AgoraRtcEngineKit, firstRemoteVideoDecodedOfUid uid:UInt, size:CGSize, elapsed:Int) {
    let videoCanvas = AgoraRtcVideoCanvas()
    videoCanvas.uid = uid
    videoCanvas.view = remoteVideo
    videoCanvas.renderMode = .hidden
    agoraKit.setupRemoteVideo(videoCanvas)
}
複製代碼

  6. 離開頻道

    視頻通話結束時，調用 leaveChannel 方法離開頻道。

    @IBAction func didClickLeaveButton() {
    agoraKit.leaveChannel(nil)
    UIApplication.shared.isIdleTimerDisabled = false
    remoteVideo.removeFromSuperview()
    localVideo.removeFromSuperview()
}
複製代碼

完整代碼

如今你的項目文件中代碼應該相似下面這樣：

import UIKit
import AgoraRtcEngineKit

class ViewController: UIViewController, AgoraRtcEngineDelegate {
​    var agoraKit: AgoraRtcEngineKit!
​    var localVideo: UIView!
​    var remoteVideo: UIView!
​    var leaveButton: UIButton!
​    
​    override func viewDidLoad() {
​        super.viewDidLoad()
​        initView()
​        initAgora()
​        setupVideo()
​        setupLocalVideo()
​        joinChannel()
​    }
​    
​    func initView() {
	    // 設置遠端視頻畫面
​       remoteVideo = UIView(frame: self.view.bounds)
​       self.view.addSubview(remoteVideo)
	
	    // 設置本地視頻畫面
        localVideo = UIView(frame: CGRect(x: self.view.bounds.width - 90, y: 0, width: 90, height: 160))
        self.view.addSubview(localVideo)
	
	    // 設置離開按鈕
        leaveButton = UIButton(type: .custom)
        leaveButton.setTitleColor(UIColor.red, for: .normal)
        leaveButton.frame = CGRect(x: self.view.bounds.width / 2 - 50, y: self.view.bounds.height - 50, width: 100, height: 20)
        leaveButton.autoresizingMask = [.flexibleTopMargin, .flexibleLeftMargin, .flexibleRightMargin]
        leaveButton.setTitle("Hang Up", for: .normal)
        leaveButton.addTarget(self, action: Selector(("didClickLeaveButton")), for: .touchUpInside)
        self.view.addSubview(leaveButton)
    }
    
    func initAgora() {
        agoraKit = AgoraRtcEngineKit.sharedEngine(withAppId: "YourAppId", delegate: self)
    }
    
    func setupVideo() {
        agoraKit.enableVideo()
        agoraKit.setVideoEncoderConfiguration(AgoraVideoEncoderConfiguration(size: AgoraVideoDimension640x360, frameRate: .fps15, bitrate: AgoraVideoBitrateStandard, orientationMode: .adaptative))
    }
    
    func setupLocalVideo() {
        let videoCanvas = AgoraRtcVideoCanvas()
        videoCanvas.uid = 0
        videoCanvas.view = localVideo
        videoCanvas.renderMode = .hidden
        agoraKit.setupLocalVideo(videoCanvas)
    }
    
    func joinChannel() {
​        agoraKit.joinChannel(byToken: nil, channelId: "demoChannel1", info:nil, uid:0) {(sid, uid, elapsed) -> Void in}  
​        UIApplication.shared.isIdleTimerDisabled = true
​    }
​    
​    func rtcEngine(_ engine: AgoraRtcEngineKit, firstRemoteVideoDecodedOfUid uid:UInt, size:CGSize, elapsed:Int) {
​        let videoCanvas = AgoraRtcVideoCanvas()
​        videoCanvas.uid = uid
​        videoCanvas.view = remoteVideo
​        videoCanvas.renderMode = .hidden
​        agoraKit.setupRemoteVideo(videoCanvas)
​    }
​    
​    @IBAction func didClickLeaveButton() {
​        agoraKit.leaveChannel(nil)
​        UIApplication.shared.isIdleTimerDisabled = false
​        remoteVideo.removeFromSuperview()
​        localVideo.removeFromSuperview()
​    }
}
複製代碼

測試和運行 Demo

如今咱們能夠鏈接真機，開始 Android 和 iOS app 一對一視頻通話了。

  1. 將電腦鏈接至一臺 Android 設備，在 Android Studio 中點擊右上角的 Run 按鈕，Android 手機或平板上會彈出一個是否安裝應用程序的彈框。贊成後，手機上就會安裝一個名爲 HelloAgora 的應用並直接進入通話界面。
  2. 將電腦與你的 iOS 設備鏈接，在 Xcode 中選擇你的設備並點擊左上角的 Build 按鈕，Xcode 會在你的設備上安裝並運行 app。

若是一切順利的話，此時 Android 和 iOS 應用加入了同一個頻道並能互相看到對方，能夠進行視頻通話了。

Agora SDK 使用體驗徵文大賽 | 掘金技術徵文，徵文活動正在進行中

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程