在融云全新上线的直播 SDK 2.0 中,完整封装 7 种合流布局是一大亮点。

事实上,主播和观众连麦是直播场景中非常热门的玩法之一。多人实时互动可以活跃直播氛围、激发观众参与热情,进而提升产品活跃度。因此,直播连麦在相亲、游戏、电商等不同业务场景广泛应用,已经逐渐成为视频直播产品的必备能力。

连麦时,用户通过申请连麦、邀请连麦、自由上麦等方式开启连麦,不同场景需要配置相应的布局模式,比如,PK 场景的双人、相亲场景的三人、多人参与的 X 宫格等等。这些都涉及对直播间连麦用户音视频流的合流布局及相应的麦位管理。在多数场景下,连麦用户还有切换音频和视频接入的需求。

融云直播 SDK 攻克直播场景下多人连麦中面临的合流布局难题:内置 7 种常见连麦布局,并支持自定义连麦模式;麦位信息通过融云 IM 提供的 KV 功能进行同步。开发者通过简单的接口调用,即可快速实现视频直播连麦功能。移步【融云全球互联网通信云】免费体验

本文介绍融云直播 SDK 的连麦布局方案如何实现,以及针对直播连麦业务中常见问题的最佳实践。

视频直播多人连麦常见的连麦模式

随着直播连麦功能在不同行业的应用和发展,连麦的布局也千变万化,常见的模式有:

一对一: 房主画面全屏显示,连麦用户以浮窗形式显示,画面有遮挡;

一对多:房主麦位固定,其他麦位围绕房主显示,各麦位画面无遮挡;

多宫格:房内所有连麦用户(含房主)麦位独立显示,画面无遮挡。

场景化视频直播 SDK 根据场景的连麦模式,内置了一对一、一对六、双人、三人、四宫格、七宫格、九宫格 7 种模式,同时支持自定义模式。

连麦布局的难点和痛点

多人视频连麦时,我们需要实现以下功能:

  • 主播端进行分流布局,并设置合流布局
  • 合流视频中各麦位位置和响应点击事件
  • 麦位管理,麦位信息同步/合流布局更新

行业普遍的解决方案,是使用 RTC SDK 提供的音视频流发布/订阅、音视频合流布局等底层技术进行二次开发。这个过程非常繁琐,而且需要开发者学习底层技术,难度很高。

融云直播 SDK

融云直播 SDK 基于融云 RTC 和融云 IM 实现连麦布局:通过融云 RTC 提供的视频流管理功能设置视频合流布局;通过融云 IM 实现麦位管理。SDK 分为三个模块:

房间管理:直播开启/结束、用户加入/离开、音视频流发布/订阅、房间属性设置等;

视图渲染:主播分流布局设置、观众合流布局设置等;

麦位管理:上下麦管理、视图事件响应、视图位置计算、麦位属性设置和同步等。

SDK 封装了房间、连麦、合流布局、麦位管理等复杂的逻辑,大大简化了视频直播功能的实现过程,节省开发成本。

融云直播 SDK 连麦布局方案

基于融云直播 SDK 实现连麦布局,只需要调用 setMixType:completion: 方法。连麦类型设置成功后,远端用户会接收到 roomMixTypeDidChange: 方法回调:

RCLiveVideoEngine.shared().setMixType(type) { code in/// TODO code
}func roomMixTypeDidChange(_ mixType: RCLiveVideoMixType) {/// TODO mixType
}

SDK 根据连麦类型,分两种处理方式:内置连麦模式和自定义连麦模式。连麦模式 RCLiveVideoMixType 是枚举类型,包括 7 种内置模式和自定义模式,开发者可以根据业务场景选择合适的类型:

typedefNS_ENUM(NSInteger, RCLiveVideoMixType) {/// 默认模式RCLiveVideoMixTypeDefault = 0,/// 小窗模式RCLiveVideoMixTypeOneToOne,RCLiveVideoMixTypeOneToSix,/// 格子模式RCLiveVideoMixTypeGridTwo,RCLiveVideoMixTypeGridThree,RCLiveVideoMixTypeGridFour,RCLiveVideoMixTypeGridSeven,RCLiveVideoMixTypeGridNine,/// 自定义模式RCLiveVideoMixTypeCustom,
};

内置连麦模式

如果设置的连麦模式是内置类型,SDK 会根据连麦类型生成对应的麦位信息 NSArray,同时,调用 RCLiveVideoMixDelegate 中的 liveVideoDidLayout:withFrame: 方法对外同步麦位信息。

/// 自定义麦位视图
/// @param seat 麦位对象

  • (void)liveVideoDidLayout:(RCLiveVideoSeat *)seat withFrame:(CGRect)frame;
    自定义连麦模式

融云 RTC 提供了三种合流布局方式:自定义布局、悬浮布局和自适应布局。融云直播 SDK 选择自定义布局方式,更容易适配不同场景需求。

如下图所示,合流布局以像素方式定义视频输出尺寸。整体视频尺寸宽*高 = 300 * 300;以整体作为画布,画布的原点(0,0)在左上角,那么三个连麦主播的窗口相对原点的位置及其宽度、高度值分别如图所示:

(自定义布局示意图)

布局模式为 RCLiveVideoMixTypeCustom 时,SDK 会通过 RCLiveVideoMixDataSource 的 liveVideoFrames 方法获取麦位信息。开发者根据业务需求,为每个 RCLiveVideoSeat 对象设置 frame 属性即可。

func liveVideoFrames() -> [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)enable completion:(RCLVResultBlock)completion;/// 麦上用户是否开启视频
- (void)setUserEnableVideo:(BOOL)enable completion:(RCLVResultBlock)completion;

音视频流的订阅

用户调用 joinRoom:completion: 进入视频直播房间后,SDK 通过两种方式订阅其他人已发布的资源:

在加入房间的成功时订阅;

在收到远端用户发布流的通知时订阅。

对于多人连麦的主播,如果远端用户发布的视频流开启了大小流功能,请根据性能优先级来选择订阅大流或小流(默认)。通过麦位 RCLiveVideoSeat 对象中的 enableTiny 属性,控制大小流订阅。

分流和合流

SDK 根据用户在当前房间的身份,订阅不同的音视频流:

主播: 订阅 RCRTCRoom 中 remoteUsers 的分流;

观众:订阅 RCRTCRoom 中 getLiveStreams 或 getCDNStream 的合流。

观众端订阅合流可以减少设备性能的开销和网络带宽的负载,同时也降低了开发难度和流量费用。观众在加入房间时,可以选择订阅合流类型:低延迟和 CDN。订阅 CDN 流时,支持设置 CDN 分辨率和帧率。

/// 加入房间,观众订阅 RTC 流
/// @param roomId 房间id
/// @param completion 结果回调
- (void)joinRoom:(nonnull NSString *)roomIdcompletion:(nonnull RCLVResultBlock)completion;/// 加入房间,观众订阅 CDN 流
/// 如果 videoSizePreset 或 fps 大于视频流的最大值,则使用最大值
/// @param roomId 房间 id
/// @param videoSizePreset 视频分辨率
/// @param fps 视频帧率
/// @param completion 结果回调
- (void)joinCDNRoom:(nonnull NSString *)roomIdvideoSizePreset:(RCRTCVideoSizePreset)videoSizePresetFPS:(RCRTCVideoFPS)FPScompletion:(nonnull RCLVResultBlock)completion;

融云直播 SDK 合流布局最佳实践

合流布局适配

场景问题:在多人连麦模式中,需要考虑合流画面在不同手机屏幕上的适配问题。区别于单主播直播,多人连麦直播时,如果合流视频长宽比与当前终端的不一致,就会出现画面部分被剪切,部分主播画面显示不完整。

解决方案:融云直播 SDK 在设置视频合流布局时,固定上、下、右边界,根据连麦模式视图宽高比剪切。开发者在自定义连麦模式,出现类似场景时,也应该按照这个规则设计。

(视频合流布局固定边界)

麦位事件响应

场景问题:观众点击麦上用户时,需要响应用户点击事件并展示用户的信息。

解决方案:观众订阅的合流是完整的画面,可以根据点击所在位置和各麦位相对位置获取目标用户。

根据主流场景,除了响应事件,在各麦位上需要展示每个用户信息或空麦位占位图。可以根据麦位信息创建自定义视图,覆盖在相对位置上,自定义视图可以接收点击事件,并根据麦上用户信息,设置自定义视图的内容显示。

融云直播 SDK 提供自定义各个麦位的视图,可以通过 RCLiveVideoMixDelegate 设置。

/// 自定义麦位视图
/// @param seat 麦位对象
- (void)liveVideoDidLayout:(RCLiveVideoSeat *)seat withFrame:(CGRect)frame;

主播掉线

场景问题:当麦位发生变化时,遵循“谁加入谁更新,谁离开谁更新”的原则更新合流布局。但是,在连麦期间,主播断网掉线或其它意外导致非正常退出直播时,麦位信息无法及时更新。

解决方案:需要终端配合 sever 共同完成:

融云 RTC server 会监听房间用户的连接状态,用户掉线且一分钟内没有上线,RTC server 会通知终端 server 该用户已下线;

终端 server 查询该用户所在房间的 KV,如果该用户处于连麦状态,终端 server 会强制清理该用户所在麦位的 KV 信息;

房间内的用户接收到 KV 更新后,更新麦位信息;掉线主播用户再次返回此房间,角色将会是观众。

(主播掉线处理时序图)

注意事项

麦位过多导致性能问题:融云视频直播最大连麦数为 16 个,在视频连麦直播时,主播端连麦过多时,会出现负载过高的情况:

主播端负责本地推流和远端拉流,上行和下行网络数据被占满,导致 CPU 负载超高;

主播端负责视频渲染,多路视频流需要分别渲染到指定的麦位,导致 GPU 负载超高;

主播端负责视频预处理,比如:美颜、贴纸、特效等,再次加重 GPU 负载。

因此,在连麦人数过多时,需要注意:

主播之间订阅分流时,使用小流的模式 enableTiny;

适当降低主播视频流的分辨率、帧率等参数。

基于融云直播 SDK,快速实现连麦布局(内附代码)相关推荐

  1. 融云直播 SDK 2.0 上线,轻松获得视频直播能力

    近日,融云直播 SDK 2.0 正式上线.开发者通过调用贴近直播业务的 API,两步即可为自己的 APP 添加视频直播能力. 同时,在连麦互动成为直播业务必备能力的当下,融云直播 SDK 2.0 封装 ...

  2. 融云直播 SDK 玩法翻新,入围信通院「实时互动创新应用优秀案例」

    7 月 23 日-24 日,第五届数字中国建设峰会于福建省福州市举办.关注[融云全球互联网通信云]了解更多 峰会以"创新驱动新变革,数字引领新格局"为主题,是中国数字经济发展成果展 ...

  3. 融云直播 SDK 升级,让直播「PK」起来

    近日,融云直播 SDK 2.1 上线,在 7 种合流布局满足直播连麦所有热门场景的基础上,上线 PK 能力,为开发者提供丰富直播内容和提升用户活跃度的最佳运营抓手.关注[融云全球互联网通信云]了解更多 ...

  4. 基于电商直播SDK快速实现一个淘宝直播APP【内附源码】

    现在各大互联网APP都标配电商直播带货了,没有直播带货开发经验都感觉自己跟不上技术的进步.今天快速基于Java实现一个安卓端电商直播APP,深入理解整个电商直播开发流程.我们最终实现效果如下: 按照惯 ...

  5. 使用融云 IM SDK 实现 H5 直播聊天

    当我拿到这个需求,脑子里出现了淘宝各大直播场景,尤为印象深刻的李佳琪的 '我的妈呀!','买它买它买它!','Oh my god!'.然后默默点开了直播.好吧,有点跑题,其实我就是想去了解下,之前都是 ...

  6. 融云 Unity SDK 升级,专注游戏场景,更好社交体验

    游戏已经不单单是一种娱乐方式.关注[融云全球互联网通信云]了解更多 作为离元宇宙最近的赛道,游戏不仅是各种沉浸式体验类技术落地融合的首发场景,也是创作者经济爆发的热土. 移动游戏在人们的线上消费方面势 ...

  7. 如何使用融云地图,文件等插件--融云 Android SDK 2.8.0+ Extension 开发文档

    转载自融云 Android SDK 2.8.0+ Extension 开发文档 融云 SDK 2.8.0 后对 会话界面输入区域.+号扩展区域.语音消息.Emoji 等进行了优化和重构,重构后上列区域 ...

  8. 融云android sdk文档,使用融云SDK集成

    使用融云开始还是遇到了很多的坑的,特别是看不太明白官方文档.或许自己不够有耐心. 期间还遇到了许多bug,比如,明明配置的没问题了,可我的手机还是连不上融云. 后来还是在融云的知识库中找到了解决办法, ...

  9. 直播系统开发之ios对接腾讯云直播sdk

    这里是使用 Swift 语言编写对接腾讯云直播 SDK 的 demo 的示例代码.这段代码仅作为参考,实际应用中可能需要根据您的具体需求进行修改. 首先,你需要从腾讯云控制台获取 SDK 的 AppI ...

  10. 融云 php sdk下载,Android 即时语音聊天工具 开发

    使用融云SDKphp 1. 功能需求分析html 1.1 核心功能需求:java * 即时通信android * 文字聊天git * 语音聊天github 1.2 辅助功能需求:数据库 * 注册.登陆 ...

最新文章

  1. 【预言】分布式缓存成为操作系统的一部分
  2. matlab怎么设置x轴距,MATLAB及其在电气工程中的应用苏小林第四章.ppt
  3. ai去除水印_ai全自动视频剪辑软件,每天批量制作800条原创视频!
  4. python 枚举相等判断_python中is和==的区别
  5. 我在架构设计和代码开发中的一些常用原则
  6. 阿里云发布vSphere虚拟机备份服务 ,网络带宽有限条件下依然能有效保护数据
  7. 二叉树的先序、中序、后续遍历【Java】
  8. 你可能不需要 jQuery!使用原生 JavaScript 进行开发
  9. python爬虫学习(1)爬取微软必应翻译(中英互译)
  10. Struts框架可以支持以下哪种程序开发语言?(选择1项)
  11. BIM二开获取CAD信息必备Teigha库,TD_Mgd_3.09.dll下载和使用操作步骤
  12. Java常用框架有哪些?
  13. matlab tic and toc,[转载]matlab中tic和toc(转)
  14. 优锘科技:渲染引擎T3D:WebGL端数字孪生应用最优解
  15. android透明背景边框线
  16. java caller_java中callee获取caller
  17. SuperMap三维专题之3dsMax数据——对接篇
  18. 夜深人静写算法(三十二)- 费马小定理
  19. 依托北斗的同步终极解决方案
  20. 视频教程-图形图像-无中生有Photoshop CS6背景素材技法ps教程 [超多案例]-其他

热门文章

  1. 英语在计算机上的应用研究,计算机在英语教学中的应用
  2. 文件扫描生成PDF文件或图片,扫描效果碾压WPS及全能扫描王
  3. 微信小游戏制作坦克大战(二)添加主角坦克
  4. 中兴新支点操作系统_好用的国产操作系统,中兴新支点操作系统U盘启动安装方法教程...
  5. 科特斯matlab求积公式,牛顿科特斯求积公式.ppt
  6. HTTP协议请求头部的User-Agen和Cookie
  7. 用PS合并RGB图片和只有透明通道的图片
  8. 方向导数与梯度——学习笔记
  9. 如何在Tomcat中配置二级域名
  10. golang GC机制