差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版
前一修订版
im:other:integrationcases:tc [2019/07/01 10:20]
jk [加入语聊房间]
im:other:integrationcases:tc [2020/06/22 16:04] (当前版本)
jliu
行 1: 行 1:
-====== 语音连麦聊天室 ======+====== 语音连麦聊天室集成介绍 ​======
  
-----+语音连麦聊天室的典型场景包括语音电台、语音游戏、私人聊天房、多人语聊房、KTV 语聊房等。
  
-前言:本文将简要分享几个语音聊天室的应用场景,并讲述基于环信 SDK ,实现语音连麦聊天室的步骤。 +语音连麦聊天室场景的详细介绍,请见环信音视频云文档:[[rtcscenariotc |语音连麦聊天室集成介绍]]
- +
-**注:**环信语聊解决方案是基于环信 **SDK 3.6.0** 及以上实现,开发者如需实现,需将 SDK 更新到支持版本。 +
- +
-语音聊天基本是社交软件必备的功能,语音相比文字图片更丰富,比视频又更简便,是天然的社交工具。除了单纯的1对1语音或视频聊天,在实时音视频技术支持下,很多 APP 已经延伸出非常多的玩法。 +
- +
-目前比较火的语聊房又分为语音电台、语音游戏、私人聊天房、多人语聊房、KTV 语聊房等细分的场景,延伸出去还有更多形态目前比较火的音遇 APP ,就是语聊房的最新形态。 +
- +
-语音电台是目前很多社交APP的玩法。主播可以在直播间中给听众讲故事、脱口秀、唱歌,内容形式不胜枚举,观众也可以申上麦与主播聊天互动(一般需要打赏或者付费后)。主要实现的功能就是语音连麦。在聊的基础上,加上了背景伴奏音以及通过消息系统来实现的文字消息功能。看似简单,但是这种模式用户的活跃度较高,付费意愿也更高,一些优质的语音社交平台能达到很高的流水。 +
- +
-语音游戏,它也是语音聊天室的常应用场景。从去年大热的狼人杀、剧本杀,再到王者荣耀、吃鸡等游戏中的语音开黑,越来越多的游戏开始为玩家创建实时互动的场景,同时实时的音视频对话也成为了部分游戏类型的主要功能。功能上与语音直播相似,只是在这个频道中,上麦下麦的玩法逻辑有所不同。 +
- +
----- +
-===== Demo ===== +
- +
-==== Demo 体验 ==== +
-扫码体验,详情请查看[[https://​mp.weixin.qq.com/​s/​PxoAomLBG5bL8ps2mVkkhA|《TC-语音连麦聊天室使用指南》]] +
- +
-{{:​im:​other:​integrationcases:​tc.png?​nolink&​200|}} +
- +
-   +
- +
-==== Demo 源码 ==== +
- +
-我们在 Github 已经提供了一套完整的 Demo,大家可以在 Github 地上获取。 +
-  * [[https://​github.com/​easemob/​liveroom-android|Android]] +
-   +
-  * [[https://​github.com/​easemob/​liveroom-ios|iOS]] +
- +
-在 Demo 的基础上,开发者只需要不到1周的时间,对 UI 和功能做简单修改即可准备测试上线。 +
- +
- +
----- +
- +
-===== 如何实现语音聊天室 ===== +
-以上只是包含了语音聊天的部分场景而已,综上来看,语音聊天室需要满足的主要功能包括: +
-  * 支持多人参与的语音聊天 +
-   +
-  * 支持本地混音 +
-   +
-  * 多种连麦模式 +
- +
-要实现一个具备以上功能的语音聊天室,大致可以分为三步:实现语音连麦、支持本地混音,多种连麦模式的设计。 +
- +
-首先是实现语音连麦。如果要通过自研的方法实现,难度会比较大: +
-  * 需要自己部署服务器做好高并发处理; +
-   +
-  * 需要对编解码器优化来解决回声、噪声问题; +
-   +
-  * 需要有成熟的技术方案降低延迟、提高音质; +
-   +
-  * 需要兼容各种网络环境下的用户体验等。 +
- +
-总体来讲,就是需要解决设备端、网络中的语音连麦稳定低延时问题与可用性问题。 +
- +
-而以上这些问题,环信早已为开发者解决。环信语聊解决方案,基于环信音视频云,针对上述多人语音连麦的难点逐一解决,并将相关接口封装于 SDK 中,让开发者可以简单快速调用集成。 +
-接下来,我们来看一下基于环信音视频 SDK ,实现语音聊天室的步骤吧。 +
-下图为语音聊天室场景化方案的架构图与实现思路 +
- +
-{{:​im:​other:​integrationcases:​框架图.png?​nolink|}} +
- +
-SDK 的集成步骤比较简单,对于有开发基础的开发者,应该无需手把手教了。 +
- +
----- +
- +
- +
-===== 实现语音连麦 ===== +
- +
-通常,观众上麦请求、主播通过上麦申请等一系列操作都是通过消息服务来完成的。任意模式下,进入房间后可以允许听众上麦,用户发出上麦申请,房主同意后,听众可上麦,角色由听众变为了主播。主播要遵循房间模式来实现自己的功能。 +
- +
-会议属性:在语音聊天室 Demo 中,抢麦、主持、自由麦等模式均是通过会议属性实现的,包括各个模式中的上麦者,也是会议属性实现的。当会议属性发生更改时,会广播给房间内所有人。 +
- +
----- +
- +
-==== 创建语聊房间 ==== +
-首先创建者通过 AppServer 创建并加入语聊房间,IM 聊天室。在房主通过 AppServer 创建并进入房间后,通过音视频提供的会议属性接口修改房间的会议属性,从而自定义一些房间的属性。 +
- +
-我们可以通过一张图,来了解创建语聊房间接口的调用逻辑: +
- +
-{{:​im:​other:​integrationcases:​创建语聊房间1.png?​nolink|}} +
- +
-上图中每步涉及到的 iOS/Android 接口如下,其中部分调用到了 AppServer 的接口,开发者需要自己实现 AppServer 功能。 +
- +
- +
-^步骤 ​                                 ^%%iOS API%%  ^%%Android API%%^ +
-|1.创建语聊房间 ​                        ​|%%AppServer API%%|| +
-|2.[[im:server:basics:​conferencemanage#​创建会议| 创建conference]] |%%AppServer API http://​a1-hsb.easemob.com/​{orgname}/​{appname}/​conferences POST%%|| +
-|3.创建 chatroom ​                      ​|%%AppServer API  http://​a1.easemob.com/​{orgname}/​{appname}/​chatrooms POST%%|| +
-|4.创建成功返回conference ID,chatroom ID|%%AppServer API%%|| +
-|5.加入 conference ​                     |[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_conference_manager-p.html#​a465bd08db130e2d10d9bf0d418871bac|EMClient.sharedClient.conferenceManager joinConferenceWithConfId:​ password: completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMConferenceManager.html#​aa04a85ab5f36f3f4ac14dc23ac18afb8|EMClient.getInstance().conferenceManager().joinConference(conferenceId,​ password, callback);​]]| +
-|6.加入 chatroom ​                       |[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_chatroom_manager-p.html#​a4091826df825b9f1825f2ea97c4fb3e2|EMClient.sharedClient.roomManager joinChatroom:​ completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMChatRoomManager.html#​af2d592b0801dbc333c0c60bd551e150d|EMClient.getInstance().chatroomManager().joinChatRoom(chatRoomId,​ callback);​]]| +
-|7.设置会议属性 ​                         |[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_conference_manager-p.html#​a7e29cc54c08e9cab13a3b58df89eea80|EMClient.sharedClient.conferenceManager setConferenceAttribute:​ value: completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMConferenceManager.html#​a785be01c2f30dbe661fb91c9c8cac7a9|EMClient.getInstance().conferenceManager().setConferenceAttribute(key,​ value, callback);​]]| +
- +
----- +
- +
-==== 加入聊房间 ==== +
- +
-当房主创建语聊房间后,其他人通过 AppServer 看到有房间被创建,可以输入房间密码加入到房间中。当加入房间后,就会收到会议属性变更的通知,从而得到会议属性。 +
- +
-我们可以通过一张图,来了解观众进入语聊房间接口的调用逻辑: +
- +
-{{:​im:​other:​integrationcases:​进入房间1.png?​nolink|}} +
- +
-上图中每步涉及到的 iOS/Android 接口如下,其中部分调用到了 AppServer 的接口,开发者需要自己实现 AppServer 功能。 +
- +
-^步骤^%%iOS API%%^%%Android API%%^ +
-|1.获取语聊房间列表|%%AppServer ​ API%%||  +
-|2.加入 conference ​                     |[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_conference_manager-p.html#​a465bd08db130e2d10d9bf0d418871bac|EMClient.sharedClient.conferenceManager joinConferenceWithConfId:​ password: completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMConferenceManager.html#​aa04a85ab5f36f3f4ac14dc23ac18afb8|EMClient.getInstance().conferenceManager().joinConference(conferenceId,​ password, callback);​]]| +
-|3.加入 chatroom ​                       |[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_chatroom_manager-p.html#​a4091826df825b9f1825f2ea97c4fb3e2|EMClient.sharedClient.roomManager joinChatroom:​ completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMChatRoomManager.html#​af2d592b0801dbc333c0c60bd551e150d|EMClient.getInstance().chatroomManager().joinChatRoom(chatRoomId,​ callback);​]]| +
-|4.同步会议属性|[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_e_m_conference_manager_delegate-p.html|EMConferenceManagerDelegate#​-conferenceAttributeUpdated:​attributes:​]] |[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMConferenceAttribute.html|EMConferenceListener#​onAttributesUpdated(attributes);​]]| +
- +
----- +
- +
- +
-==== 上麦 ==== +
- +
-已在语聊房间的观众通过 IMServer 发送 message 向房主发起上麦请求,房主同意后,通过 MediaServer 改变会议属性,将观众上麦成为主播,成为主播后就能说话进行推流。房间内其他的人都能收到推流通知并进行订阅。 +
- +
-我们可以通过一张图,来了解观众上麦接口的调用逻辑: +
- +
-{{:​im:​other:​integrationcases:​上麦1.png?​nolink|}} +
- +
-上图中每步涉及到的 iOS/Android 接口如下: +
- +
-^步骤 ​        ​^%%iOS API%%       ​^%%Android API%%^ +
-|1.请求上麦 ​   |[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_chat_manager-p.html#​ad139d7ad31d934a721a979955baf1868|EMClient.sharedClient.chatManager sendMessage:​ progress: completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMChatManager.html#​ad50be7183f088c415b9507bc7ce792e6|EMClient.getInstance().chatManager().sendMessage(msg);​]]| +
-|2.改变角色属性|[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_conference_manager-p.html#​ac613f23e6f13a14f8c40f12f5c1b45f9|EMClient.sharedClient.conferenceManager changeMemberRoleWithConfId:​ memberNames:​ role: completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMConferenceManager.html#​a52a1e73bc4b588bc57227c7a57512409|EMClient.getInstance().conferenceManager().grantRole(targetRole);​]]| +
-|3.上麦成为主播|[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_e_m_conference_manager_delegate-p.html#​ada8c07dac796d492a5165b28b50fb02c|EMConferenceManagerDelegate#​-roleDidChanged:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​interfacecom_1_1hyphenate_1_1EMConferenceListener.html#​a6df0e567fc534314cee3008c310dfe72|EMConferenceListener#​onRoleChanged(role);​]]| +
-|4.推流 ​      ​|[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_conference_manager-p.html#​a4a621606d73a0ea1fab14aa336446a6b|EMClient.sharedClient.conferenceManager publishConference:​ streamParam:​ completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMConferenceManager.html#​aa087a548e2d8f79ce06f50927decc137|EMClient.getInstance().conferenceManager().publish(param,​callback);​]]| +
-|5.收到推流通知|[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_e_m_conference_manager_delegate-p.html#​aaec86cf13eaa8930fa5261c1f3848785|EMConferenceManagerDelegate#​-streamDidUpdate:​ addStream:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​interfacecom_1_1hyphenate_1_1EMConferenceListener.html#​ad06a034d00575fbf41798b98bebe6089|EMConferenceListener#​onStreamAdded(stream);​]]| +
-|6.订阅 ​      ​|[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_conference_manager-p.html#​a97e899177d4a7abcc49d8d7ea5152039|EMClient.sharedClient.conferenceManager subscribeConference:​ streamId: remoteVideoView:​ completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMConferenceManager.html#​a405c38df38cbb0e6bf11420ff80540e0|EMClient.getInstance().conferenceManager().subscribe(stream,​surface,​callback);​]]| +
- +
----- +
- +
- +
-==== 下麦、销毁房间 ==== +
-当主播在麦上时,如果想要下麦,同样通过 IMServer 向房主发送 message 发起下麦请求,这里无需房主同意,默认直接下麦。若房主主动将主播下麦,则没有之前这步,房主直接通过 MediaServer 改变会议属性,将主播下麦成为观众,主播成为观众后就停止推流。房主调用 AppServer 销毁房间,进而销毁conference、chatroom。 +
- +
-我们可以通过一张图,来了解主播下麦、房主销毁语聊房间接口的调用逻辑: +
- +
-{{ :​im:​other:​integrationcases:​下麦1.png?​nolink |}} +
- +
-上图中每步涉及到的 iOS/Android 接口如下,其中部分调用到了 AppServer 的接口,开发者需要自己实现 ​ AppServer 功能 +
- +
- +
-^步骤^%%iOS API%%^%%Android API%%^ +
-|1.请求下麦|[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_chat_manager-p.html#​ad139d7ad31d934a721a979955baf1868|EMClient.sharedClient.chatManager sendMessage:​ progress: completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMChatManager.html#​ad50be7183f088c415b9507bc7ce792e6|EMClient.getInstance().chatManager().sendMessage(msg);​]]| +
-|2.改变角色属性|[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_conference_manager-p.html#​ac613f23e6f13a14f8c40f12f5c1b45f9|EMClient.sharedClient.conferenceManager changeMemberRoleWithConfId:​ memberNames:​ role: completion:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMConferenceManager.html#​a52a1e73bc4b588bc57227c7a57512409|EMClient.getInstance().conferenceManager().grantRole(targetRole);​]]| +
-|3.下麦成为观众|[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_e_m_conference_manager_delegate-p.html#​ada8c07dac796d492a5165b28b50fb02c|EMConferenceManagerDelegate#​-roleDidChanged:​]]|[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​interfacecom_1_1hyphenate_1_1EMConferenceListener.html#​a6df0e567fc534314cee3008c310dfe72|EMConferenceListener#​onRoleChanged(role);​]]| +
-|4.停止推流|[[http://​www.easemob.com/​apidoc/​ios/​chat3.0/​protocol_i_e_m_conference_manager-p.html#​a679bced8da6fa7b293626c0c3243cfe8|EMClient.sharedClient.conferenceManager unpublishConference:​ streamId: completion:​]] |[[http://​www.easemob.com/​apidoc/​android/​chat3.0/​classcom_1_1hyphenate_1_1chat_1_1EMConferenceManager.html#​a926c631717ce04a6c2a31401c8e095f7|EMClient.getInstance().conferenceManager().unpublish(publishId,​callback);​]]| +
-|5.销毁语聊房间|%%AppServer API%%|| +
-|6.销毁conference|%%AppServer API http://​a1-hsb.easemob.com/​{orgname}/​{appname}/​conferences/​{confrId} DELETE%%|| +
-|7.销毁chatroom|%%AppServer API http://​a1.easemob.com/​{orgname}/​{appname}/​chatrooms/​{groupid} DELETE%%|| +
- +
----- +
- +
- +
-===== 本地混音 ===== +
-本地混音是指将几种不同的声音在发送端混在一起。例如常见的K歌场景,就需要将人唱歌的声音和歌曲的背景音乐进行混音处理。所以,在实现了基本的连麦功能后,我们还需要增加背景音乐的混音、播放控制。 +
- +
-在这里,主播可以在自己的客户端上选择要播放的音乐,然后通过 SDK 的 startAudioMixing 接口在本地与主播语音混音后播放给连麦听众和普通听众。并且连麦语音与背景音乐播放互不干扰,帮助用户活跃房间内的气氛。在默认情况下,背景音乐是循环播放的。 +
- +
-有些开发者希望以语音社交切入泛娱乐市场,也有一些市场上的视频社交玩家,希望加入语音聊天室,来进一步拓展市场版图。由于该场景方案是基于环信音视频 SDK 实现,可以同时满足以上两种需求。 +
- +
----- +
- +
-===== 多种连麦模式 ===== +
- +
-在语音聊天室 Demo 中,提供了三种模式,自由麦模式、主持模式、抢麦模式(开发者还可以基于此扩展更多模式玩法)。这三种模式就是通过会议属性区分的,当用户进入房间后,就可以知道当前的房间属于哪种模式。 +
- +
-自由麦模式:主播用户可以自由打开和关闭发言,实现起来较为简单,就不介绍了。 +
- +
-这里主要介绍一下,主持模式和抢麦模式的实现逻辑: +
-  * [[im:​other:​integrationcases:​host|主持模式]] +
-   +
-  * [[im:​other:​integrationcases:​robmic|抢麦模式]] +
- +
- +
----- +
-<WRAP group> +
-<WRAP half column>​ +
-上一章:[[im:​extensions:​value:​rtmsgcallback|增值服务]] +
-</​WRAP>​ +
- +
-<WRAP half column>​ +
-下一页:[[im:​other:​integrationcases:​host|主持模式]] +
-</​WRAP>​ +
-</​WRAP>​+