快速入门视频互动

最近更新时间:2023-06-08 01:31:38

本文介绍如何使用 anyRTC 视频通话 SDK 快速实现视频通话。

前提条件

  • Xcode 9.0 或以上版本(本文 Xcode 的界面描述以 Xcode 11.0 为例)
  • macOS 10.15+ 或以上版本的设备
  • 有效的 anyRTC 开发者账号

创建 macOS 项目

  1. 打开 Xcode 并点击 Create a new Xcode project

  2. 选择平台类型为 macOS、项目类型为 Single View App,并点击 Next

  3. 输入项目名称(Product Name)、开发团队信息(Team)、组织名称(Organization Name)和语言(Language)等项目信息,并点击 Next

    如果你没有添加过开发团队信息,会看到 Add account… 按钮。点击该按钮并按照屏幕提示登入 Apple ID,完成后即可选择你的 Apple 账户作为开发团队。

  4. 选择项目存储路径,并点击 Create

获取 SDK

选择如下任意一种方式获取最新版 anyRTC SDK。

方法一:使用 CocoaPods 获取 SDK

  1. 开始前确保你已安装 Cocoapods。参考 Getting Started with CocoaPods 安装说明。
  2. 在终端里进入项目根目录,并运行 pod init 命令。项目文件夹下会生成一个 Podfile 文本文件。
  3. 打开 Podfile 文件,修改文件为如下内容。注意将 Your App 替换为你的 Target 名称。
# platform :ios, '9.0' use_frameworks!
target 'Your App' do
    pod 'ARtcKit_iOS'
end
  1. 在终端内运行 pod install 命令安装 SDK。成功安装后,Terminal 中会显示 Pod installation complete!,此时项目文件夹下会生成一个 xcworkspace 文件。
  2. 打开新生成的 xcworkspace 文件。

方法二:从官网获取 SDK

  1. 前往 SDK 下载页面,获取最新版的 anyRTC SDK,然后解压。

  2. 根据你的需求,选择以下一种方法将 ARtcKit.framework动态库复制到项目的 ./project_name 文件夹下(project_name 为你的项目名称)。

  3. 打开 Xcode,进入 TARGETS > Project Name > General > Frameworks, Libraries, and Embedded Content菜单。

  4. 点击 + > Add Other… > Add Files 添加 ARtcKit.framework 动态库,并确保添加的动态库 Embed 属性设置为 Embed & Sign。 添加完成后,项目会自动链接所需系统库。

根据 Apple 官方要求,app 的 Extension 中不允许包含动态库。如果项目中的 Extension 需要集成 SDK,则添加动态库时需将文件状态改为 Do Not Embed

基本流程

现在,我们已经将 anyRTC SDK 集成到项目中了。接下来我们要在 ViewController 中调用 anyRTC SDK 提供的核心 API 实现基础的视频通话功能,API 调用时序见下图。

img

1. 创建用户界面

根据场景需要,为你的项目创建视频通话的用户界面。我们推荐你在项目中添加如下元素:

  • 本地视频窗口
  • 远端视频窗口

你可以参考以下代码创建一个基础的用户界面。

Objective-C

@interface ViewController ()
// 定义 localView 变量
@property (nonatomic, strong) NSView *localView;
// 定义 remoteView 变量
@property (nonatomic, strong) NSView *remoteView;
@end
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 调用初始化视频窗口函数
    [self initViews];
    // 后续步骤调用 anyRTC API 使用的函数
    [self initializeARkitEngine];
    [self setupLocalVideo];
    [self joinChannel];
}
// 设置视频窗口布局
- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    self.remoteView.frame = self.view.bounds;
    self.localView.frame = CGRectMake(self.view.bounds.size.width - 90, 0, 90, 160);
}
- (void)initViews {
    // 初始化远端视频窗口
    self.remoteView = [[NSView alloc] init];
    [self.view addSubview:self.remoteView];
    // 初始化本地视频窗口
    self.localView = [[NSView alloc] init];
    [self.view addSubview:self.localView];
}

2. 导入类

在调用 anyRTC API 前,你需要在项目中导入 ARtcKit 类,并定义一个 rtcKit 变量。

Objective-C

// ViewController.h
// 导入 ARtcKit 类
#import <ARtcKit/ARtcEngineKit.h>
// 声明 ARtcEngineDelegate,用于监听回调
@interface ViewController : UIViewController <ARtcEngineDelegate>
// 定义 rtcKit 变量
@property (strong, nonatomic) ARtcEngineKit *rtcKit;

3. 初始化 ARtcEngineKit 对象

调用 sharedEngineWithAppId 创建并初始化 ARtcEngineKit 对象。你需要将 YourAppID 替换为你的 anyRTC 项目的 App ID。详见获取 App ID

你还可以根据场景需要,在初始化时注册想要监听的回调事件。

Swift

// ViewController.m
- (void)initializeARkitEngine {
    self.rtcKit = [ARtcEngineKit sharedEngineWithAppId:@"YourAppID" delegate:self];
}

4. 设置本地视图

在加入频道前设置本地视图,以便在通话中看到本地图像。参考以下步骤设置本地视图:

  1. 调用 enableVideo 方法启用视频模块。
  2. 调用 setupLocalVideo 方法设置本地视图。

Objective-C

// ViewController.m
- (void)setupLocalVideo {
// 启用视频模块
[self.rtcKit enableVideo];
ARtcVideoCanvas *videoCanvas = [[ARtcVideoCanvas alloc] init];
videoCanvas.uid = "0";
videoCanvas.renderMode = ARVideoRenderModeHidden;
videoCanvas.view = self.localView;
// 设置本地视图
[self.rtcKit setupLocalVideo:videoCanvas];
}

5. 加入频道

调用 joinChannelByToken 加入频道。 在 joinChannelByToken 中你需要将 YourToken 替换成你自己生成的 Token,并将 YourChannelName替换为你生成 Token 时填入的频道名称。

  • 在测试阶段,你可以直接在控制台生成临时 Token。加入频道时,请确保填入的频道名和生成临时 Token 时填入的频道名一致。
  • 在生产环境,我们推荐你在自己的服务端生成 Token,详见在服务端生成 Token。加入频道时,请确保填入的频道名和 uid 与生成临时 Token 时填入的频道名和 uid 一致。

用户成功加入频道后,会默认订阅频道内其他所有用户的音频流和视频流,因此产生用量并影响计费。如果想取消订阅,可以通过调用相应的mute方法实现。

Objective-C

// ViewController.m
- (void)joinChannel {
    [self.rtcKit joinChannelByToken:@"YourToken" channelId:@"YourChannelName" uid:nil joinSuccess:^(NSString * _Nonnull channel, NSString *uid, NSInteger elapsed) {
    
    }];
}

6. 设置远端视图

视频通话中,通常你也需要看到其他用户。

远端用户成功加入频道后,SDK 会触发 firstRemoteVideoDecodedOfUid 回调,该回调中会包含这个远端用户的 uid 信息。在该回调中调用 setupRemoteVideo 方法,传入获取到的 uid,设置远端用户的视图。

Objective-C

// ViewController.m
// 监听 firstRemoteVideoDecodedOfUid 回调
// SDK 接收到第一帧远端视频并成功解码时,会触发该回调
- (void)rtcEngine:(ARtcEngineKit *)engine firstRemoteVideoDecodedOfUid:(NSString *)uid size: (CGSize)size elapsed:(NSInteger)elapsed {
    ARtcVideoCanvas *videoCanvas = [[ARtcVideoCanvas alloc] init];
    videoCanvas.uid = uid;
    videoCanvas.renderMode = ARVideoRenderModeHidden;
    videoCanvas.view = self.remoteView;
    // 设置远端视图
    [self.rtcKit setupRemoteVideo:videoCanvas];
}

7. 离开频道

根据场景需要,如结束通话、关闭 app 或 app 切换至后台时,调用 leaveChannel 离开当前通话频道。

Objective-C

Swift

// ViewController.m
- (void)leaveChannel {
    [self.rtcKit leaveChannel:nil];
}

8. 销毁 ARtcEngineKit 对象

离开频道后,如果你想释放 anyRTC SDK 使用的所有资源,需调用 destroy 销毁 ARtcEngineKit 对象。

Objective-C

// ViewController.m
// 将以下代码填入你定义的函数中
[ARtcEngineKit destroy];

运行项目

在运行项目前,你需要设置签名和开发团队,并添加设备权限。

1. 设置签名和开发团队

  1. 在 Xcode 中,进入 TARGETS > Project Name > Signing & Capabilities > Signing 菜单,勾选 Automatically manage signing。
  2. 仔细阅读弹窗提示,并点击 Enable Automatic
  3. 成功设置签名后,在 Team 处选择你的开发团队。

2. 添加设备权限

在 Xcode 中,打开 info.plist 文件。在右侧列表中添加如下内容,获取相应的设备权限:

KeyTypeValue
Privacy - Microphone Usage DescriptionString使用麦克风的目的,例如:for a call or live interactive streaming。
Privacy - Camera Usage DescriptionString使用摄像头的目的,例如:for a call or live interactive streaming。