AUI Kits低代码音视频应用UI组件方案及示例_音视频终端 SDK(Apsara Video SDK)-阿里云帮助中心

AUI Kits是一个低代码应用方案，专注于提供互动直播、互动课堂、远程监考场景化的音视频应用UI组件，公开源码支持定制化修改。您可以基于Demo源码进行二次开发，可有效节约您的开发时间和成本。

互动直播

Demo体验

场景	样式	平台	角色	开发参考	体验入口
互动直播	竖屏样式	Android	主播端观众端	Android端竖屏样式接入
		iOS	主播端观众端	iOS端竖屏样式接入
		Web	观众端	Web端竖屏样式接入	-
		微信小程序	观众端	微信小程序接入	-
	横屏样式	Windows	主播端	Windows开播小助手使用说明	-
		macOS	主播端	macOS开播小助手使用说明	-
		Android	观众端	Android端横屏样式接入
		iOS	观众端	iOS端横屏样式接入
		Web	观众端	Web端横屏样式接入	-

功能说明

功能一：直播间列表

展示应用下所有的直播间，以及直播间的标题、封面图、主播昵称、状态、热度。

界面预览

功能二：主播端开播

调整开播效果，支持调节美颜特效、摄像头方向。
聊天互动，支持设置全员禁言。
连麦管理，支持接受/拒绝连麦申请；连麦过程中支持管理观众的设备，例如摄像头、麦克风等。

竖屏样式（互动直播）

竖屏样式封装了直播间创建功能，支持设定直播间标题、公告、类型。

横屏样式（企业直播）

横屏样式封装了共享屏幕功能，支持采集指定桌面画面进行推流。

功能三：观众端观看

直播间观看，若直播已结束，支持观看回放。
聊天互动。

竖屏样式（互动直播）

竖屏样式封装了若干场景UI组件，仅作交互展示，需要您对接业务系统。

关注主播
点赞直播间
分享直播

横屏样式（企业直播）

移动设备套件封装了若干场景UI组件，仅作交互展示，需要您对接业务系统。

点赞直播间
分享直播

功能四：主播端-观众端音视频连麦

申请连麦，若主播同意连麦，则观众二次确认后上麦。
连麦互动，支持调节美颜特效，管理设备，例如摄像头、麦克风等。

竖屏样式（互动直播）

横屏样式（企业直播）

体验流程

竖屏样式（互动直播）

主播端

观众端

主题：开播与互动

平台：Android、iOS

操作步骤：

扫描上述Demo二维码并进行下载安装，完成安装后打开应用互动直播。
在登录页面输入用户昵称，单击进入，进入直播间列表页面。
在直播间列表页面单击创建直播间，进入直播间创建页面。
在创建直播间页面填入直播间标题，选择直播间类型，单击“创建直播间”，进入直播预览页面。
若需要体验连麦功能，需要选择连麦直播。
在直播预览页面内单击开始直播，待3秒倒计时后开始推流。
在开始直播之前，您可以单击美颜调节美颜特效，单击翻转设定摄像头方向，
进入开播页面后，您可以做如下互动、设定操作。
单击对话框键入文本发布聊天消息。
单击美颜按钮调节美颜特效。
单击菜单按钮进行直播间管理。
当有观众申请连麦时，在主播端会展示询问弹窗，单击确认即可邀请观众开始连麦。
连麦过程中可以单击连麦按钮管理连麦状态。
在开播页面单击关闭图标，然后单击确认，即可结束并退出直播间。

主题：观看与互动

平台：Android、iOS、Web、微信小程序

操作步骤：

扫描上述Demo二维码并进行下载安装，完成安装后打开应用互动直播。
在登录页面输入用户昵称，单击进入，进入直播间列表页面。
在直播间列表页面单击任意直播间，进入观看页面。
进入观看页面后，您可以做如下互动、设定操作。
单击对话框键入文本发布聊天消息，若直播已结束或处于禁用状态，则无法发送消息。
若直播已结束，单击查看回放开始回放直播内容。
单击连麦图标向主播申请连麦，主播同意连麦请求后上麦；若直播已结束或当前直播间类型为普通直播，则无该功能。
连麦过程中可以单击连麦按钮管理连麦状态，单击美颜按钮调节美颜特效。
在观看页面单击关闭图标，然后单击确认，即可结束并退出直播间。

横屏样式（企业直播）

主播端

观众端

主题：开播与互动

平台：Windows、macOS

操作步骤：

部署AppServer后生成唤端URL，详情参见服务端集成。
下载并安装Windows开播小助手。
打开开播小助手，输入步骤 1中获取的唤端URL，单击进入直播间跳转到直播预览页面。
在直播预览页面内单击开始直播，待3秒倒计时后开始推流。
您可以单击设置，跳转到推流的分辨率、帧率、码率档位。
进入开播页面后，您可以做如下设定、互动操作。
- 单击麦克风图标开关麦克风，或单击右侧菜单切换麦克风设备。
- 单击摄像头图标开关摄像头，或单击右侧菜单切换摄像头设备。
- 单击美颜调节美颜特效。
- 单击共享屏幕激活或关闭录屏功能，在弹窗中选择对应的桌面进行采集推流。
当有观众申请连麦时，在主播端会展示询问弹窗，点击确认即可邀请观众开始连麦。
- 连麦过程中可以单击演讲者视图/宫格视图切换连麦合流的布局。
- 连麦过程中可以单击连麦按钮管理连麦状态。
在开播页面单击结束直播，然后单击确认，即可结束并退出直播间。

主题：观看与互动

平台：Android、iOS、Web

操作步骤：

扫描上述Demo二维码并进行下载安装，完成安装后打开应用企业直播。
在登录页面输入用户昵称，单击进入，进入直播间列表页面。
在直播间列表页面单击任意直播间，进入观看页面。
进入观看页面后，您可以做如下互动、设定操作。
- 点击对话框键入文本发布聊天消息，若直播已结束或处于禁用状态，则无法发送消息。
- 若直播已结束，单击查看回放开始回放直播内容。
单击连麦图标向主播申请连麦，主播同意连麦请求后上麦；若直播已结束或当前直播间类型为普通直播，则无该功能。
连麦过程中可以单击连麦按钮管理连麦状态，单击美颜按钮调节美颜特效。
在观看页面点击关闭图标，然后单击确认，即可结束并退出直播间。

互动课堂

Demo体验

平台	角色	开发参考	在线体验
Web	教师端	Web端接入	桌面端浏览器（推荐使用Chrome）请访问互动课堂。
	助教端		桌面端浏览器（推荐使用Chrome）请访问互动课堂。
	学生端		桌面端浏览器（推荐使用Chrome）请访问互动课堂。移动端请扫描访问：

功能说明

功能一：教师登录并创建教室

设定角色，支持“教师”、“助教”和“学生”三种角色。
设定班型，支持“公开课”和“大班课”，若需要音视频连麦请选“大班课”，否则请选“公开课”。
设定教室号。
设定昵称。
设定助教权限（不需要则关闭该功能）。

说明

老师端需使用桌面端浏览器打开，例如Windows系统的Chrome浏览器。若使用移动设备浏览器访问则会切换至学生端。

界面预览

功能二：教师开播

调整开播效果，支持切换摄像头、麦克风设备，支持开启/关闭摄像头、麦克风。
白板互动，支持涂鸦、文本、直线、激光笔等基础教具，支持白板分页。
文档共享，支持上传、播放课件与文档，支持静态、动态转码，完整保留原文档字体和动画效果。
共享屏幕，支持共享指定桌面、窗口、浏览器标签页画面。
多媒体插播，支持播放本地视频文件。
聊天互动，支持设置全员禁言、删除群消息。
成员管理，支持将学生移出教室。
音视频连麦，大班课中支持1v8音视频连麦，老师可以邀请学生上麦，学生可以举手申请上麦。

界面预览

功能三：助教登录指定教室

设定教室号。
设定昵称。

说明

助教端需要使用桌面设备浏览器打开，例如Windows系统的Chrome浏览器。如果使用移动设备浏览器访问则会切换至学生端。

界面预览

功能四：助教进入教室

说明

助教可使用功能以教师设置为准。

成员管理，支持将学生移出教室。
辅助教学，白板翻页、课件更新。
聊天互动，支持设置全员禁言、删除群消息。

界面预览

功能五：学生登录指定教室

设定教室号。
设定昵称。

界面预览

学生端需使用移动端浏览器打开，例如Android端的钉钉。若使用桌面端浏览器访问则会切换至老师端。

功能六：学生观看

直播间观看，根据不同班型展示不同布局和画面。
聊天互动。
音视频连麦，学生可以举手申请和老师连麦，或者接受老师发来的连麦邀请。

界面预览

体验流程

教师端

助教端

学生端

主题：开播与互动

平台：Windows浏览器、macOS浏览器

操作步骤：

使用桌面端浏览器（推荐使用Chrome）访问互动课堂。
选择班型并输入用户昵称，单击进入教室，若之前已创建了教室，请输入教室号。
进入教室后，在页面左上角获取教室号发给学生用户，以便学生端登录至指定教室。
进入开播页面后，您可以做如下设定、互动操作。
- 系统默认创建互动白板作为主画面，您可以绘制或添加白板页面。
- 单击麦克风图标开关麦克风，或点击右侧菜单切换麦克风设备。
- 单击摄像头图标开关摄像头，或点击右侧菜单切换摄像头设备。
- 单击共享屏幕/结束共享激活或关闭录屏功能，在弹窗中选择对应的桌面、窗口或浏览器标签页进行采集推流。
- 单击课件选择本地文档课件，上传并转码完成后即可播放指定文档内容。
调试好音视频设备后，单击右下角开始上课。
单击右下角结束课程，然后单击确认，即可结束并退出课堂。

主题：协助与观看

平台：Windows浏览器、macOS浏览器

操作步骤：

使用桌面端浏览器（推荐使用Chrome）访问互动课堂。
选择助教角色，输入教室号，输入用户昵称（例如assistant），单击进入教室。
1. 若该教室未启用助教功能，或当前用户昵称与该教室助教昵称不符，则无法进入教室。
进入教室后，在页面左上角获取教室ID发给学生用户，用于学生端登录至指定教室。
进入开播页面后，您可以做如下设定、互动操作：
1. 系统默认创建互动白板并作为主画面，您可以绘制或添加白板页面（需要教师端开启该权限）。
2. 您可以点击课件选择本地文档课件，上传转码完成后即可播放指定文档内容（需要教师端开启该权限）。
3. 成员管理，将学生移除教室（需要教师端开启该权限）。
4. 聊天互动，支持设置全员静音、删除群消息（需要教师端开启该权限）。

主题：观看与互动

平台：Windows浏览器、macOS浏览器、Android浏览器、iOS浏览器

操作步骤：

扫描上述Demo二维码，打开学生端登录页面。
在登录页面输入教室号与用户昵称，单击进入教室。
进入教室后，您可以做如下互动、设定操作。
- 系统自动拉取直播画面，若未能自动播放需要手动单击播放控件；若老师端尚未开播，请等待开播后观看。
- 单击对话框键入文本发布聊天消息；若直播已结束或处于禁用状态，则无法发送消息。
关闭浏览器即可退出课堂。

远程监考

Demo体验

平台	角色	在线体验
Web	监考端	访问远程监考考试Demo创建考场，生成监考端和学生端入场链接。
Web	学生端	访问远程监考考试Demo创建考场，生成监考端和学生端入场链接。

功能说明

功能一：创建考场

创建考场，Demo将自动为您生成含有1个监考老师、5个考生的考场。您可以根据实际需求自定义学生人数。

功能二：监考端

查看考场内所有学生的画面。
进行全员静音，或指定学生静音。
进行全员实时口播。
指定音频文件进行全员系统广播。
双击某个学生画面后，学生画面由小屏切换至大屏，进入高清观察模式。
进入高清观察模式后，老师可以选择与学生开启一对一连麦。
结束考试。

功能三：学生端

自动执行老师侧的系统指令，如开启连麦、接收口播、播放系统广播等。
离线录制，即当学生断网后，将自动开启本地视频录制，并在网络恢复后上传至云端。

界面预览

体验流程

访问远程监考考试Demo，输入考场名称，单击创建考场，生成监考端和学生端入场链接。
监考老师和考生可以分别通过单击对应的链接或扫描二维码进入考场。
监考端可以做如下互动、操作。
- 单击全员口播，监考老师可以面向所有学生开启全员口播。
- 单击系统广播，监考老师可以面向所有学生播放音频文件。
- 双击某个已经推流的学生画面，弹窗进入高清大屏观察模式。在这个模式下监考老师可以选择与学生进行一对一连麦。
在监考端单击右上角结束考试，然后单击确认，即可结束并退出考试。
学生端关闭浏览器即可退出考试。

音视频通话

Demo体验

平台	角色	开发参考	在线体验
Android、iOS	房间创建者、成员	Android端快速接入 iOS端快速接入

功能说明

功能一：双人音视频通话

1V1双人通话，支持视频通话、音频通话。
通话状态切换，支持视频通话切换为语音通话。

功能二：多人音视频通话

多人音视频通话，单个房间最多支持50人同时在线。
支持自定义视频帧率、码率、分辨率、镜像等相关参数。
房间创建者可设置单人/全体禁言、踢人、邀请成员。

体验流程

双人音视频通话

多人音视频通话

扫描Demo二维码，下载apk，完成安装后打开应用选择互动直播>1V1音视频通话。
在登录页面输入用户ID，支持字母、数字、下划线，单击登录。
输入呼叫用户ID，根据需求选择视频通话或语音通话后，单击开始通话。
在语音通话接通前和接通后，您可以进行挂断、开启/关闭麦克风、开启/关闭扬声器等操作。
在视频通话接通前，您可以进行挂断、切换至语音、摄像头翻转等操作。
在视频通话接通后，您可以看到被呼叫人的小窗画面，并可进行挂断、开启/关闭麦克风、开启/关闭扬声器、开启/关闭摄像头、切换至语音、摄像头翻转、收起主屏幕操作项等操作。

扫描Demo二维码，下载apk，完成安装后打开应用选择互动直播>多人音视频通话。
在登录页面输入用户ID，支持字母、数字、下划线，单击下一步。
在列表页面单击创建房间或加入房间，进入房间创建（加入）和设备调试页面。
在房间创建（加入）和设备参数设置页面可提前对设备进行开启/关闭麦克风、开启/关闭扬声器、开启/关闭摄像头及高级设置（视频分辨率、帧率码率）等操作。
设备设置完后可单击创建房间或加入房间，进入多人音视频通话页面。在音视频通话过程中您可以进行开启/关闭麦克风、开启/关闭扬声器、开启/关闭摄像头、摄像头翻转和镜像、查看成员、邀请成员、结束会议等操作，房间创建者除上述操作外可额外进行移除成员、开启/解除静音等操作。
在通话页面，若是房间创建者单击右上角结束按钮可直接结束会议，若是房间加入者单击右上角结束按钮可直接离开会议。

微短剧

Demo体验

平台	开发参考	App体验
Android	Android端集成
iOS	iOS端集成

功能说明

短视频场景
采用竖屏样式，全屏沉浸式播放，可通过上下滑动进行切换。
微短剧场景
提供抽屉式剧集列表，点击即可跳转至指定剧集。

体验流程

扫描上述Demo二维码并进行下载安装，完成安装后打开应用阿里云播放器。
在播放器首页单击短剧，进入播放页面。
若触发访问媒体等相关授权，请同意授权以便开启对应特性。
观看剧集，在观看过程中您可以做如下互动操作。
说明
下述互动操作中，点赞、评论和分享按钮在本UI组件中仅用于展示，需要集成方自行对接业务接口实现完整功能。
- 单击播放页面，暂停或开始播放。
- 单击点赞按钮，对剧集进行点赞或取消点赞。
- 单击评论按钮，在对话框键入文本并发布评论。
- 单击分享按钮，对剧集进行分享。
- 单击底部剧集列表入口，展示剧集列表，选择剧集后将跳转至指定剧集进行播放。
单集剧集观看完成后，会自动播放下一集。