本文详细介绍如何建立一个简单的项目并使用 Agora 互动白板 SDK 实现基础的白板功能。
在 Xcode 中创建一个 Single View App。项目设置如下:
Whiteboard
。agora
。Objective-C
。在 Terminal 里进入项目所在路径。运行以下命令创建 Podfile
文件。项目路径下会出现一个 Podfile
文本文件。
pod init
在生成的 Podfile
文件中添加如下内容:
platform :ios, '9.0'
target 'Whiteboard' do
pod 'Whiteboard'
end
运行以下命令安装 SDK:
pod install
安装完成后,你可以点击打开项目的 Whiteboard.xcworkspace
文件,对项目进行后续编辑。
pod install
命令时由于网络原因失败,可以使用 TUNA 镜像源。现在,我们已经将 Agora 互动白板 SDK 集成到项目中了。接下来我们要调用 Agora 互动白板 SDK 提供的核心 API 实现基础的白板功能。
在 app 客户端加入互动白板房间前,你需要在 app 服务端调用互动白板服务端 RESTful API 创建一个房间。详见创建房间(POST)。
请求示例
你可以使用以下 Node.js 脚本发送请求:
request
模块。你可以运行 npm install request
安装var request = require("request");
var options = {
"method": "POST",
"url": "https://api.netless.link/v5/rooms",
"headers": {
"token": "你的 SDK Token",
"Content-Type": "application/json"
}
};
request(options, function (error, response) {
if (error) throw new Error(error);
console.log(response.body);
});
如果方法调用成功,Agora 互动白板服务端将返回新建房间的信息,其中的 uuid
是房间的唯一标识,app 客户端加入房间时需要传入该参数。
响应示例
{
"uuid": "4a50xxxxxx796b", // 房间的 UUID
"name": "",
"teamUUID": "RMmLxxxxxx15aw",
"appUUID": "i54xxxxxx1AQ",
"isRecord": true,
"isBan": false,
"createdAt": "2021-01-18T06:56:29.432Z",
"limit": 0
}
创建房间并获取新建房间的 uuid
后,你需要在 app 服务端生成 Room Token 并下发给 app 客户端。当 app 客户端加入房间时,Agora 互动白板服务端会使用该 Token 对其鉴权。
你可以通过以下方式在 app 服务端生成 Room Token:
下面以调用 RESTful API 的方式为例介绍如何生成 Room Token。
请求示例
你可以使用以下 Node.js 脚本发送请求:
request
模块。你可以运行 npm install request
安装var request = require('request');
var options = {
"method": "POST",
// 将 <房间的 UUID> 替换成你的房间 UUID
"url": "https://api.netless.link/v5/tokens/rooms/<房间的 UUID>",
"headers": {
"token": "你的 SDK Token",
"Content-Type": "application/json"
},
body: JSON.stringify({"lifespan":60,"role":"admin"})
};
request(options, function (error, response) {
if (error) throw new Error(error);
console.log(response.body);
});
如果方法调用成功,Agora 互动白板服务端将返回生成的 Room Token。
响应示例
"NETLESSROOM_YWs9XXXXXXXXXXXZWNhNjk" // Room Token
编辑 ViewController.m
,实现从添加 View、初始化 SDK 到加入房间的基本操作。你需要传入之前生成的 App Identifier
、uuid
和 Room token
。
//
// ViewController.m
// WhiteBoard
//
// Created by macoscatalina on 2021/3/16.
// Copyright © 2021 macoscatalina. All rights reserved.
//
#import "ViewController.h"
#import <Whiteboard/Whiteboard.h>
@interface ViewController ()
@property (nonatomic, strong) WKWebViewConfiguration *config;
@property (nonatomic, strong) WhiteBoardView *boardView;
@property (nonatomic, strong) WhiteSDK *sdk;
@property (nonatomic, strong) WhiteRoom *room;
@property (nonatomic, strong) WhiteMemberState *memberState;
@property (nonatomic, strong) WhiteRoomConfig *roomConfig;
@property (nonatomic, strong) WhiteSdkConfiguration *sdkConfig;
@property (nonatomic, weak, nullable) id<WhiteCommonCallbackDelegate> commonDelegate;
@property (nonatomic, weak, nullable) id<WhiteRoomCallbackDelegate> roomCallbackDelegate;
@end
@implementation ViewController
// 添加 View
- (void)setupViews
{
self.config = [[WKWebViewConfiguration alloc] init];
// 在此项目中将白板 View 设为全屏
self.boardView = [[WhiteBoardView alloc] initWithFrame:(CGRectMake(0.0f,0.0f,self.view.bounds.size.width,self.view.bounds.size.height)) configuration:(self.config)];
[self.view addSubview:(self.boardView)];
}
// 初始化 SDK
- (void)initSDK
{ // 设置 App Identifier
self.sdkConfig = [[WhiteSdkConfiguration alloc] initWithApp:@"Your App ID"];
// 初始化 SDK
self.sdk = [[WhiteSDK alloc] initWithWhiteBoardView:self.boardView config:self.sdkConfig commonCallbackDelegate:self.commonDelegate];
}
// 加入房间
- (void)joinRoom
{ // 设置 uuid 和 room token
self.roomConfig = [[WhiteRoomConfig alloc] initWithUuid:@"Your UUID" roomToken:@"Your room token"];
// 设置教具
self.memberState = [[WhiteMemberState alloc] init];
self.memberState.currentApplianceName = AppliancePencil;
self.memberState.strokeColor = @[@255, @0, @0];
// 加入房间
[self.sdk joinRoomWithConfig:self.roomConfig callbacks:self.roomCallbackDelegate completionHandler:^(BOOL success, WhiteRoom * _Nonnull room, NSError * _Nonnull error) {
if (success) {
self.room = room;
[self.room cleanScene:(NO)];
[self.room setMemberState:(self.memberState)];
NSLog(@"Successfully joined the room");
} else {
NSLog(@"Errors when joining room");
}
}];
}
// 在 viewDidLoad 方法中依次进行 View 添加,SDK 初始化,加入房间操作
- (void)viewDidLoad {
[super viewDidLoad];
[self setupViews];
[self initSDK];
[self joinRoom];
}
@end
在 Xcode 中编译并在模拟器或真机上运行项目。如果应用成功运行,你可以用鼠标在生成的页面上写写画画并看到笔迹。