anyRTC Zoom模式多人音视频开发教程-iOS [附源码]

作者: DerekStrong | 来源:发表于2018-12-27 10:28 被阅读0次

应广大开发者要求，写一下用anyRTC多人视频sdk来模仿zoom多人视频样式，以下开始正文：

GitHub地址

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 信息回调，我们根据该回调进行页面显示和布局。

其中还有一些方法，比如禁用自己的音频和视频，摄像头翻转，镜像开关，扬声器开关等等一些接口，根据自己的需要添加即可。

anyRTC Zoom模式多人音视频开发教程-iOS [附源码]

GitHub地址

anyRTC SDK集成

主页面

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读