开源demo | 快速搭建在线自习室场景

偏执的太偏执、 2022-09-08 03:52 272阅读 0赞

在疫情成为常态的现状下，在线自习室这一能提供安静、整洁的学习环境的新“共享”模式越来越受欢迎。为迎合市场需求，anyRTC也正式推出了在线自习室demo！并开源了代码，希望能够帮助开发者更快速地实现实时互动场景，并创新出更多别具一格的玩法！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center]

## 在线自习室有什么作用呢？ ##

设立在线自习室的最终目的是通过提升大家学习积极性，提升学习的效率。anyRTC 互动直播产品，仅需调用1个API，4行代码，30分钟即可实现实时音视频和互动直播产品。在在线自习室场景中，可无缝实现从观看的直播状态平滑切换为上麦状态。全平台支持，即使用户使用轻应用的微信小程序，也可以快速实现。具体来讲，在线自习室的作用如下：

（1）通过直播功能，上麦同学通过直播自己的学习状态，间接的获取其他人的监督，带动自身学习的积极性，进而提高学习成绩。

（2）不同场景的自习室有不同的玩法，老师以观众身份进入在线自习室观看自习室状态，可以通过文字消息或者图片消息来督促上麦人员进入学习状态，且能为自习生答疑解惑，避免学生走偏。

（3）让观众能看到每个上麦同学的学习状态，激发自身的自律性，快速进入学习氛围。

## anyRTC提供了2种自习直播场景解决方案： ##

**方案一：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 1]

1、该方案全部走实时流，页面布局灵活，即使是观看端，也可以对当前麦上视频布局进行动态切换。

2、上麦的同学一般在4人左右，anyRTC 可以最大支持50人同时上麦，观看人数无限制。

3、频道内所有人员的延迟都在200ms左右。

4、借助云端录制服务可以进行内容审核，保证平台合法合规。  
  
  
**方案二：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 2]

1、上麦同学走RTC实时音视频，观众端可以拉取RTC实时音视频的流，也可以拉取CDN的音视频流。

2、实时音视频流的延迟在200ms左右，CDN观众的流根据协议类型延迟一般在1~60s不等。

3、上麦的同学一般在4人左右，anyRTC 可以最大支持50人同时上麦，观看人数无限制。

4、CDN拉流端布局固定，无法动态修改。

5、借助云端录制服务可以进行内容审核，保证平台合法合规。

两种方案各有千秋，根据自身的场景进行选择，方案一：更注重应用的灵活布局，延迟可控。方案二：更注重成本，观众端多的情况下，更有利于减负企业运营成本。**此次我们的在线自习室demo就是用的方案一来实现的。**

## Demo核心功能： ##

**1.主持人加入房间**  
主持人选择加入没有人的自习室房间，自动上麦后成为主持人并且横屏显示。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 3]

**2.游客加入房间**  
游客可以加入有人的自习室房间，竖屏观看主播们的自习直播。

**3.申请上麦**  
游客加入有人的自习室房间，麦位未满时，可以申请上麦成为主播，并且横屏显示。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 4]

**4.更换麦位**  
主持人离开自习室房间后，会自动把房主交给2号麦位，后面的麦序都依次向前进一位。

**5.开启/关闭麦克风**  
主持人可以开启全体禁言，也可以关闭全体禁言状态。其他主播可以自行关闭自己的麦克风。

**6.大小屏/等分屏切换**  
进入自习室房间的主播或者游客，可以点击其他上麦人员与主持人大屏进行切换，游客也可以再次点击大图变成等分屏显示。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 5]

**7.发送文字消息和图片**  
进入自习室房间的主播或者游客，可以发送文字消息或者图片消息，房间内的大家可以通过文字或者图片消息来进行交流。

**8.退出房间**  
上麦用户点击关闭退出房间。然后可以进入到下一个自习室房间进行观看或者上麦成为主播。

## 如何制作属于自己的在线自习室呢？ ##

Demo中所有音视频实时互动与文字消息、控制指令（如上麦）、直播推流、直播拉流，都是基于anyRTC RTC SDK 、anyRTC 实时消息 RTM SDK 实现的。通过demo分解共分为4步：

1、在工程中导入SDK（RTC和RTM）  
2、初始化SDK  
3、以游客或者主播身份创建房间或进入房间  
4、调用切换角色接口进行连麦或者下麦

基于上面4个步骤操作，我们就能实现基础的直播观看功能了（进入房间，不管什么身份都会自动订阅房间里面的音视频流）。提供多种高级的功能接口，帮助开发者更好的实现个性化业务设计，实现符合自身业务的场景。

在线自习室demo下载体验：https://www.pgyer.com/Qpl6

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/44f4e72c219349259d00f667d3258475.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/b7df7a57d823435da9b88b61cbc0e1ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220829/038bd04762104200828b7205f1209992.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20220829/992cb908fd78484c9c20726c2d079b85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20220829/24d1de1570a94e499d0e073bcb24d973.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20220829/e5dabccf4e4c4e66b3716bbef679c5cd.png