当前位置: 首页 > Web前端 > HTML

基于融云直播SDK,快速实现连播布局

时间:2023-03-28 01:34:19 HTML

在融云新推出的直播SDK2.0中,7大合流布局的完整封装是一大亮点。事实上,直播场景中最流行的一种玩法就是连接主播和观众。多人实时互动可以活跃直播气氛,激发观众参与热情,进而提升产品的活跃度。因此,直播连麦被广泛应用于交友、游戏、电商等不同业务场景,逐渐成为视频直播产品的必备能力。连接麦克风时,用户可以通过申请麦克风、邀请麦克风和免费麦克风来启用麦克风。不同的场景需要配置相应的布局方式,比如两人PK场景,三人相亲场景,X多人宫格等等。这些都涉及到直播间连接话筒的用户音视频流的汇流布局,以及相应的话筒位元管理。在大多数场景下,连麦用户还需要在音频和视频访问之间进行切换。融云直播SDK克服直播场景多人布局连贯问题:内置7种常用mic布局,支持自定义mic模式;mic信息通过融云IM提供的KV功能同步。开发者通过简单的接口调用即可快速实现视频直播功能。移步【融云全球互联网通信云】免费体验本文介绍如何实现融云直播SDKSDK的连播布局方案,以及直播连播业务中常见问题的最佳实践。视频直播中常见的多人连麦模式随着直播连麦功能在不同行业的应用和发展,连麦的布局也在发生着变化。常见的模式有:一对一:主机屏幕全屏显示,以悬浮窗的形式显示,屏幕被挡住;一对多:房主话筒位置固定,房主周围显示其他话筒位置,各话筒位置图片不被遮挡;多格:房间内所有连接的用户(包括房主)话筒位独立显示,画面不遮挡。场景化视频直播SDK内置一对一、一对六、二人、三人、四方、七方、九方7种模式。场景的联合麦克风模式。它还支持自定义模式。连麦布局的难点和痛点在多人视频连麦时,我们需要实现如下功能:主播端进行分屏布局,在合并后的视频中设置每个麦克风位置的合并布局,并响应点击事件话筒管理、话筒信息同步/ConfluenceLayout更新的业界通用解决方案是利用RTCSDK提供的音视频流发布/订阅、音视频ConfluenceLayout等底层技术进行二次开发。这个过程非常繁琐,需要开发者学习底层技术,难度很大。融云直播SDK融云直播SDK基于融云RTC和融云IM实现连播:使用融云RTC提供的视频流管理功能设置视频流布局;使用融云IM实现话筒位置管理。SDK分为三个模块:房间管理:直播开始/结束、用户加入/离开、音视频流发布/订阅、房间属性设置等;视图渲染:主播拆分布局设置、观众合并布局设置等;话筒位管理:话筒管理、查看事件响应、查看位置计算、话筒位置属性设置及同步等。SDK封装了房间、话筒连接、合流布局、话筒位置管理等复杂逻辑,大大简化了实现过程视频直播,节省开发成本。融云直播SDK连麦布局方案基于融云直播SDK实现连麦布局,只需要调用setMixType:completion:方法即可。连麦类型设置成功后,远端用户会收到roomMixTypeDidChange:Methodcallback:RCLiveVideoEngine.shared().setMixType(type){codein///TODOcode}funcroomMixTypeDidChange(_mixType:RCLiveVideoMixType){///TODOmixType}SDK根据连接mic的类型有两种处理方式:内置mic连接方式和自定义mic连接方式。连麦模式RCLiveVideoMixType是一个枚举类型,包括7种内置模式和自定义模式,开发者可以根据业务场景选择合适的类型:typedefNS_ENUM(NSInteger,RCLiveVideoMixType){///默认模式RCLiveVideoMixTypeDefault=0,///smallWindowmodeRCLiveVideoMixTypeOneToOne,RCLiveVideoMixTypeOneToSix,///GridmodeRCLiveVideoMixTypeGridTwo,RCLiveVideoMixTypeGridThree,RCLiveVideoMixTypeGridFour,RCLiveVideoMixTypeGridSeven,RCLiveVideoMixTypeGridNine,///CustommodeRCLiveVideoMixTypeGridThree,RCLiveVideoMixTypeGridFour,RCLiveVideoMixTypeGridSeven,RCLiveVideoMixTypeGridNine,///Ifthebuilt-inmicmodeissetaccordingtothebuilt-在麦克风的麦克风模式下,};Type生成麦克风信息对应的NSArray,同时调用RCLiveVideoMixDelegate中的liveVideoDidLayout:withFrame:方法对外同步麦克风信息。///自定义小麦座位视图///@paramseat小麦座位对象(void)liveVideoDidLayout:(RCLiveVideoSeat*)seatwithFrame:(CGRect)frame;自定义连麦模式融云RTC提供了三种合流布局方式:自定义布局、浮动布局和自适应布局。融云直播SDK选择自定义布局方式,更容易适应不同场景的需求。如下图所示,汇合布局以像素为单位定义了视频输出尺寸。视频整体尺寸宽高=300300;整体作为画布,画布的原点(0,0)在左上角,那么三个连麦锚点的窗口相对于原点的位置及其宽高值分别为如图:(自定义布局图)当布局方式为RCLiveVideoMixTypeCustom时,SDK会通过RCLiveVideoMixDataSource的liveVideoFrames方法获取麦克风位信息。开发者可以根据业务需要为每个RCLiveVideoSeat对象设置frame属性。funcliveVideoFrames()->[NSValue]{return[NSValue(cgRect:CGRect(x:0.0,y:0.0,width:0.5,height:1.0)),NSValue(cgRect:CGRect(x:0.5,y:0.0,width:0.5,height:1.0)),]}融云直播SDK灵活控制音视频流融云直播SDK封装了音视频流的发布和订阅,开发者可以通过麦克风对象RCLiveVideoSeat控制音视频流。发布音视频流时,用户调用prepare和begin:completion:接口开始直播,或者调用joinLiveVideoAtIndex:completion:接口开启麦克风连接,SDK默认发布音视频流,并关联相应的麦克风位置与RCLiveVideoSeat。用户可以设置麦克风位置userEnableAudio和userEnableVideo属性控制是否发布音视频流:///用户在麦克风上是否启用音频(void)setUserEnableAudio:(BOOL)enablecompletion:(RCLVResultBlock)completion;///麦克风上的用户是否启用视频(void)setUserEnableVideo:(BOOL)enablecompletion:(RCLVResultBlock)completion;音视频流订阅者调用joinRoom:completion:进入视频直播房间后,SDK订阅他人发布的资源有两种方式:加入房间成功时订阅;当远程用户发布流通知时订阅。对于多人连播的主播,如果远端用户发布的视频流开启了大小流功能,请根据表现优先级选择订阅大流或小流(默认)。通过麦微RCLiveVideoSeat对象中的enableTiny属性,控制小码流和大码流的订阅。分流合流SDK根据当前房间用户的身份订阅不同的音视频流:host:订阅RCRRTCRoom中remoteUsers的分流;viewer:订阅RCRRTCRoom中getLiveStreams或getCDDNStream的合并。观众订阅融合可以降低设备性能开销和网络带宽负载,同时也降低了开发难度和流量成本。当观众加入房间时,他们可以选择订阅合流类型:低延迟和CDN。订阅CDN流时支持设置CDN分辨率和帧率。///加入房间,观众订阅RTC流///@paramroomId房间id///@paramcompletionresultcallback(void)joinRoom:(nonnullNSString*)roomIdcompletion:(nonnullRCLVResultBlock)completion;///加入房间,观众订阅CDN流///如果videoSizePreset或fps大于视频流的最大值,则使用最大值///@paramroomIdroomid///@paramvideoSizePresetvideoresolution///@paramfps视频帧率///@param完成结果回调(void)joinCDNRoom:(nonnullNSString*)roomIdvideoSizePreset:(RCRTCVideoSizePreset)videoSizePresetFPS:(RCRTCVideoFPS)FPScompletion:(nonnullRCLVResultBlock)completion;ConfluenceCloudLiveSDKConfluenceLayoutBestPracticeConfluenceLayout适配场景问题:在多人mic模式下,需要考虑合屏在不同手机屏幕上的适配。与单主播不同的是,多人连线直播时,如果合并后的视频宽高比与当前终端不一致,会出现部分画面被切掉,部分主播画面会被截断的情况。显示不完整。解决方法:融云直播SDK在设置视频汇流布局时固定上下右边框,按照mic模式视图的纵横比进行裁剪。开发者在自定义连麦模式等类似场景出现时,也应按此规则进行设计。(固定视频合流布局边界)麦克风事件响应场景问题:当观众点击用户的麦克风时,需要响应用户的点击事件,显示用户信息。解决方案:观众订阅的汇合点是一幅完整的图,根据点击的位置和各个麦克风的相对位置可以得到目标用户。按照主流场景,除了响应事件,还需要在每个麦克风上显示每个用户的信息或者一个空的麦克风位置。可以根据麦克风信息创建自定义视图,叠加在相对位置上,自定义视图可以接收点击事件,根据麦克风上的用户信息设置自定义视图的内容显示。融云直播SDK提供了每个麦克风的自定义视图,可以通过RCLiveVideoMixDelegate进行设置。///自定义小麦位置视图///@paramseat小麦位置对象(void)liveVideoDidLayout:(RCLiveVideoSeat*)seatwithFrame:(CGRect)frame;主播断开连接的场景。问题:当话筒位置发生变化时,遵循“谁加入更新,谁离开更新”的原则更新合流布局。但是在mic连接期间,当主持人断网或其他意外导致异常退出从直播开始,mic位置信息无法及时更新解决方法:终端需要配合服务器完成:融云RTC服务器会监听房间内用户的连接状态,如果用户离线,并且没有一分钟内没有上线,RTC服务器会通知终端服务器用户下线;终端服务器会查询用户所在房间的KV,如果用户连接了mic,终端服务器会强制清除用户所在mic的KV信息;房间内的用户收到KV更新后会更新mic信息;掉线的宿主用户重新回到房间,T他的角色将成为观众。(主播断线处理时序图)注意事项麦克风过多导致的性能问题:融云视频直播最大连接麦克风数量为16个情况:主播端负责本地推??流和远程推流,上下行网络数据已满,导致CPU负载过高;主播端负责视频渲染,需要将多个视频流分别渲染到指定的麦克风位,造成GPU负载极高;主播端负责视频预处理,比如:美化、贴纸、特效等,又增加了GPU的负载。因此,当主播过多时,需要注意:订阅主播间分流时,使用小流模式enableTiny;适当降低主播视频流的分辨率、帧率等参数。