应广大开发者要求,写一下用anyRTC多人视频sdk来模仿zoom多人视频样式,以下开始正文:
GitHub地址
https://github.com/BoYuanZjq/ZoomDemo
anyRTC多人音视频sdk提供了4中模式,其中一种模式为zoom模式,我们只需要在进会之前设置该种模式即可。
anyRTC SDK集成
集成sdk,是作为一名合格的开发人员必备的技能,根据官方集成文档集成即可。
1. pod集成
pod 'RTMeetEngine'
2. 添加必要权限
在Info.plist中添加如下权限
<key>NSCameraUsageDescription</key>
<string>项目需要访问视频</string>
<key>NSMicrophoneUsageDescription</key>
<string>项目需要访问音频</string>
3. 打开音频可后台运行
TARGETS->Capabilities->Background Modes->选中Audio,AirPlay,and Picture in Picture
4. 配置开发者信息
在AppDelegate.h文件中把相应的开发者信息替换一下, 配置项在官网创建应用中可查看
static NSString *developerID = @"xxx";
static NSString *token = @"xxx";
static NSString *key = @"xxx";
static NSString *appID = @"xxx";
然后在AppDelegate.m中调用配置方法即可
[AnyRTCMeetEngine initEngineWithAnyRTCInfo:developerID andAppId:appID andKey:key andToke:token];
至此,anyRTC SDK集成已经完毕,似不似如丝般顺滑?接下来我们就可以愉快地和SDK玩耍了。
主页面
在主界面,我们需要检查先Camera和Audio权限。
//授权相机
- (void)videoAuthAction
{
[AVCaptureDevice requestAccessForMediaType:AVMediaTypeVideo completionHandler:^(BOOL granted) {
NSLog(@"%@",granted ? @"相机准许":@"相机不准许");
}];
}
//授权麦克风
- (void)audioAuthAction
{
[AVCaptureDevice requestAccessForMediaType:AVMediaTypeAudio completionHandler:^(BOOL granted) {
NSLog(@"%@",granted ? @"麦克风准许":@"麦克风不准许");
}];
}
zoom多人视频页面
主页面输入会议号,点击加入会议
zoom模式简介
zoom多人视频模式,是解决手机上同时渲染多路性能的问题而生,其中分为三种场景
- 驾驶模式:只接收音频,不发送音视频,发送音频,根据客户自己选择。
- 说话者模式:该模式,只显示自己和当前正在说话的人,也可以选中一个人员,进行双人锁定通信。
- 分屏模式:该模式每屏显示4个图像,包括自己,分屏显示所有人。
该模式适合1~32人的大型音视频会议,有效的解决了在服务器不合流的情况下手机性能问题。
初始化RTMeetKit
- (void)initMeetKit {
RTMeetOption *option = [RTMeetOption defaultOption];
option.videoScreenOrientation = RTC_SCRN_Auto;
option.videoMode = AnyRTCVideoQuality_Low2;
option.maxNum = 64;
// 设置zoom 模式
option.meetingType = AnyMeetingTypeZoom;
self.meetKit = [[RTMeetKit alloc] initWithDelegate:self andOption:option];
// 自己平台用户Id
NSString *userID = [NSString stringWithFormat:@"%d",arc4random()%10];
//加入房间
[self.meetKit joinRTC:self.meetId andIsHoster:NO andUserId:userID andUserData:@"{}"];
//打开网络检测
[self.meetKit setNetworkStatus:YES];
//打开音频检测(有人说话的音量大小)
[self.meetKit setAudioActiveCheck:YES];
}
加入会议成功的回调中设置zoom的说话者模式
- (void)onRTCJoinMeetOK:(NSString*)strAnyRTCId {
//预览自己的视频窗口
[self.meetKit setLocalVideoCapturer:self.videoLayoutView.myVideoView];
//设置zoom的说话者模式
[self.meetKit setZoomModel:AnyZoomTypeSingle];
}
有人进入会议或者离开会议中把相关人员记录或者删除
// 有人进来
-(void)onRTCOpenVideoRender:(NSString*)strRTCPeerId withRTCPubId:(NSString *)strRTCPubId withUserId:(NSString*)strUserId withUserData:(NSString*)strUserData {
ZMVideoView *view = [[ZMVideoView alloc] init];
view.peerId = strRTCPeerId;
view.pubId = strRTCPubId;
view.userId = strUserId;
__weak typeof(self)weakSelf = self;
view.tapEvent = ^() {
if (weakSelf.zoomType==AnyZoomTypeSingle) {
weakSelf.videoLayoutView.myVideoView.isBig = NO;
}
// 刷新布局
[weakSelf.videoLayoutView layout];
};
//本地自己的strRTCPeerId 都为RTCMainParticipanter
if (![strRTCPeerId isEqualToString:@"RTCMainParticipanter"]) {
[self.meetKit setRTCVideoRender:strRTCPubId andRender:view.videoView];
}
[self.videoLayoutView.remoteArray addObject:view];
}
// 有人离开
-(void)onRTCCloseVideoRender:(NSString*)strRTCPeerId withRTCPubId:(NSString *)strRTCPubId withUserId:(NSString*)strUserId {
for (ZMVideoView *view in self.videoLayoutView.remoteArray) {
if ([view.peerId isEqualToString:strRTCPeerId]) {
[view removeFromSuperview];
[self.videoLayoutView.remoteArray removeObject:view];
break;
}
}
}
zoom模式有人来或者离开后的统计信息,我们可以在该信息中对页面布局做调整,比如增加一页,或者删除一页,具体可以看代码实现
- (void)onRTCZoomPageInfo:(AnyZoomType)nZoomType allPage:(int)nAllPage currentPage:(int)nCurrentPage allRenderNum:(int)nAllRenderNum beginIndex:(int)nIndex showNum:(int)nShowNum {
// 对页面做变化布局
}
不同模式需要的操作
- (void)changeZoomModel:(int)index {
switch (index) {
case 0:
{
//驾驶模式
[self.meetKit setZoomModel:AnyZoomTypeDriver];
//禁止传输视频,此时可以说话,只拉去音频
[self.meetKit setLocalVideoEnable:NO];
}
break;
case 1:
{
// 单显示模式(本地视频打开)
[self.meetKit setLocalVideoEnable:YES];
// 设置单显模式
[self.meetKit setZoomModel:AnyZoomTypeSingle];
}
break;
default:
{
// 设置分屏显示
if (self.zoomType != AnyZoomTypeNomal) {
[self.meetKit setZoomModel:AnyZoomTypeNomal];
}
[self.meetKit setLocalVideoEnable:YES];
// 设置页码
[self.meetKit setZoomPage:index-2];
}
break;
}
}
驾驶模式
驾驶模式根据自己需求是否把自己的音频禁用,可以点击说话的时候打开禁用,取消说话的时候,打开关闭禁用
[self.meetKit setLocalAudioEnable:NO];
说话者模式
说话者模式是自己和当前说话的人显示,如果当前会议只有自己一个人,全屏显示自己的图像,本地图像以及远程图像大小,自己布局决定。
点击小屏幕可以进行大小屏切换。大小屏布局代码如下:
//说话者模式布局代码
UIView *singView = [self.viewsArray objectAtIndex:1];
if (self.remoteArray.count==0) {
if (self.myVideoView.superview) {
[self.myVideoView removeFromSuperview];
}
self.myVideoView.frame = self.frame;
[singView addSubview:self.myVideoView];
}else{
CGFloat X = CGRectGetWidth(self.frame) -90 -10;
CGFloat Y = CGRectGetHeight(self.frame)-120 -10;
CGFloat width = 90;
CGFloat height = 120;
ZMVideoView *otherView = [self.remoteArray firstObject];
if (otherView.superview) {
[otherView removeFromSuperview];
}
if (self.myVideoView.superview) {
[self.myVideoView removeFromSuperview];
}
if (!self.myVideoView.isBig) {
otherView.frame = self.frame;
[singView addSubview:otherView];
[singView sendSubviewToBack:otherView];
self.myVideoView.frame = CGRectMake(X, Y, width, height);
[singView addSubview:self.myVideoView];
}else{
self.myVideoView.frame = self.frame;
[singView addSubview:self.myVideoView];
[singView sendSubviewToBack:self.myVideoView];
otherView.frame = CGRectMake(X, Y, width, height);
[singView addSubview:otherView];
}
分屏显示
分屏显示每屏第一个视频都为自己,切换到当前模式下的时候,布局的视图,全有有人来了的回调里存储进行布局即可。
布局代码如下,三分屏幕或者4分屏
// 平分显示
CGFloat width = CGRectGetWidth(self.frame)/2;
CGFloat height = width*4/3;
CGFloat X = 0;
CGFloat Y =(CGRectGetHeight(self.frame)-2*height)/2;
UIView *singView = [self.viewsArray objectAtIndex:self.viewIndex];
for (int i=0;i<self.remoteArray.count;i++ ) {
ZMVideoView *view = [self.remoteArray objectAtIndex:i];
if (view.superview) {
[view removeFromSuperview];
}
// 自己本地的视图
if ([view.peerId isEqualToString:@"RTCMainParticipanter"]) {
if (self.myVideoView.superview) {
[self.myVideoView removeFromSuperview];
}
[singView addSubview:self.myVideoView];
self.myVideoView.frame = CGRectMake(X, Y, width, height);
if ((i+1)%2==0) {
X = 0;
Y+=height;
}else{
X = X+width;
}
}else{
[singView addSubview:view];
view.frame = CGRectMake(X, Y, width, height);
if ((i+1)%2==0) {
X = 0;
Y+=height;
}else{
X = X+width;
}
}
}
挂断离开
- (void)closeButtonEvent:(UIButton*)sender {
//离开频道,释放资源
[self.meetKit leaveRTC];
[self dismissViewControllerAnimated:YES completion:nil];
}
总结
上述即为zoom多人模式多人布局的写法,大致步骤我做下总结
初始化引擎之前,在Controller中添加一个UIScrollView,并添加两个视图,第一个为驾驶模式页面,另外一个是说话者模式页面。
join成功之后,需要设置调用如下方法,设置为AnyZoomTypeSingle模式。
- (BOOL)setZoomModel:(AnyZoomType)eType;
- 等待onRTCZoomPageInfo 信息回调,我们根据该回调进行页面显示和布局。
其中还有一些方法,比如禁用自己的音频和视频,摄像头翻转,镜像开关,扬声器开关等等一些接口,根据自己的需要添加即可。