首页 音视频终端 SDK 开发参考 AUI Kits低代码应用方案 Demo体验

Demo体验

更新时间: 2023-09-01 10:19:03

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

互动直播

Demo体验

样式

平台

角色

开发参考

App体验

竖屏样式（互动直播）

Android

  • 主播端

  • 观众端

Android端竖屏样式接入

image.png

iOS

  • 主播端

  • 观众端

iOS端竖屏样式接入

Web

观众端

Web端竖屏样式接入

-

微信小程序

观众端

微信小程序接入

-

横屏样式（企业直播）

Windows

主播端

Windows开播小助手使用说明

-

macOS

主播端

macOS开播小助手使用说明

-

Android

观众端

Android端横屏样式接入

image.png

iOS

观众端

iOS端横屏样式接入

Web

观众端

Web端横屏样式接入

-

功能说明

功能一：直播间列表

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

界面预览

image.png

功能二：主播端开播

  • 调整开播效果，支持调节美颜特效、摄像头方向。

  • 聊天互动，支持设置全员禁言。

  • 连麦管理，支持接受/拒绝连麦申请；连麦过程中支持管理观众的设备，例如摄像头、麦克风等。

竖屏样式（互动直播）

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

image.png

横屏样式（企业直播）

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

image.pngimage.png

功能三：观众端观看

  • 直播间观看，若直播已结束，支持观看回放。

  • 聊天互动。

竖屏样式（互动直播）

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

  • 关注主播

  • 点赞直播间

  • 分享直播

image.png

横屏样式（企业直播）

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

  • 点赞直播间

  • 分享直播

图片4.png

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

  • 申请连麦，若主播同意连麦，则观众二次确认后上麦。

  • 连麦互动，支持调节美颜特效，管理设备，例如摄像头、麦克风等。

竖屏样式（互动直播）

image.png

横屏样式（企业直播）

图片5.png图片6.png

体验流程

竖屏样式（互动直播）

主播端

观众端

主题：开播与互动

平台：Android、iOS

操作步骤：

  1. 扫描上述Demo二维码并进行下载安装，完成安装后打开应用互动直播。

  2. 在登录页面输入用户昵称，单击进入，进入直播间列表页面。

  3. 在直播间列表页面单击创建直播间，进入直播间创建页面。

  4. 在创建直播间页面填入直播间标题，选择直播间类型，单击“创建直播间”，进入直播预览页面。

    若需要体验连麦功能，需要选择连麦直播。

  5. 在直播预览页面内单击开始直播，待3秒倒计时后开始推流。

    在开始直播之前，您可以单击美颜调节美颜特效，单击翻转设定摄像头方向，

  6. 进入开播页面后，您可以做如下互动、设定操作。

    单击对话框键入文本发布聊天消息。

    单击美颜按钮调节美颜特效。

    单击菜单按钮进行直播间管理。

  7. 当有观众申请连麦时，在主播端会展示询问弹窗，单击确认即可邀请观众开始连麦。

    连麦过程中可以单击连麦按钮管理连麦状态。

  8. 在开播页面单击关闭图标，然后单击确认，即可结束并退出直播间。

主题：观看与互动

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

操作步骤：

  1. 扫描上述Demo二维码并进行下载安装，完成安装后打开应用互动直播。

  2. 在登录页面输入用户昵称，单击进入，进入直播间列表页面。

  3. 在直播间列表页面单击任意直播间，进入观看页面。

  4. 进入观看页面后，您可以做如下互动、设定操作。

    单击对话框键入文本发布聊天消息，若直播已结束或处于禁用状态，则无法发送消息。

    若直播已结束，单击查看回放开始回放直播内容。

  5. 单击连麦图标向主播申请连麦，主播同意连麦请求后上麦；若直播已结束或当前直播间类型为普通直播，则无该功能。

    连麦过程中可以单击连麦按钮管理连麦状态，单击美颜按钮调节美颜特效。

  6. 在观看页面单击关闭图标，然后单击确认，即可结束并退出直播间。

横屏样式（企业直播）

主播端

观众端

主题：开播与互动

平台：Windows、macOS

操作步骤：

  1. 部署AppServer后生成唤端URL，详情参见服务端集成。

  2. 下载并安装Windows开播小助手。

  3. 打开开播小助手，输入步骤 1中获取的唤端URL，单击进入直播间跳转到直播预览页面。

  4. 在直播预览页面内单击开始直播，待3秒倒计时后开始推流。

    您可以单击设置，跳转到推流的分辨率、帧率、码率档位。

  5. 进入开播页面后，您可以做如下设定、互动操作。

    • 单击麦克风图标开关麦克风，或单击右侧菜单切换麦克风设备。

    • 单击摄像头图标开关摄像头，或单击右侧菜单切换摄像头设备。

    • 单击美颜调节美颜特效。

    • 单击共享屏幕激活或关闭录屏功能，在弹窗中选择对应的桌面进行采集推流。

  6. 当有观众申请连麦时，在主播端会展示询问弹窗，点击确认即可邀请观众开始连麦。

    • 连麦过程中可以单击演讲者视图/宫格视图切换连麦合流的布局。

    • 连麦过程中可以单击连麦按钮管理连麦状态。

  7. 在开播页面单击结束直播，然后单击确认，即可结束并退出直播间。

主题：观看与互动

平台：Android、iOS、Web

操作步骤：

  1. 扫描上述Demo二维码并进行下载安装，完成安装后打开应用企业直播。

  2. 在登录页面输入用户昵称，单击进入，进入直播间列表页面。

  3. 在直播间列表页面单击任意直播间，进入观看页面。

  4. 进入观看页面后，您可以做如下互动、设定操作。

    • 点击对话框键入文本发布聊天消息，若直播已结束或处于禁用状态，则无法发送消息。

    • 若直播已结束，单击查看回放开始回放直播内容。

  5. 单击连麦图标向主播申请连麦，主播同意连麦请求后上麦；若直播已结束或当前直播间类型为普通直播，则无该功能。

    连麦过程中可以单击连麦按钮管理连麦状态，单击美颜按钮调节美颜特效。

  6. 在观看页面点击关闭图标，然后单击确认，即可结束并退出直播间。

互动课堂

Demo体验

平台

角色

开发参考

在线体验

Web

教师端

Web端接入

桌面端浏览器（推荐使用Chrome）请访问互动课堂。

学生端

移动端请扫描访问：

image.png

功能说明

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

  • 设定角色，暂时仅支持“教师”。

  • 设定班型，支持“公开课”和“大班课”，若教室内成员数量大于1万请选择“公开课”。

  • 设定教室号。

  • 设定昵称。

界面预览

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

图片8.png

功能二：教师开播

  • 调整开播效果，支持切换摄像头、麦克风设备，支持开启/关闭摄像头、麦克风。

  • 白板互动，支持涂鸦、文本、直线、激光笔等基础教具，支持白板分页。

  • 文档共享，支持上传、播放课件与文档，支持静态、动态转码，完整保留原文档字体和动画效果。

  • 共享屏幕，支持共享指定桌面、窗口、浏览器标签页画面。

  • 聊天互动，支持设置全员禁言。

界面预览

图片9.png

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

  • 设定教室号。

  • 设定昵称。

界面预览

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

图片10.png

功能四：学生观看

  • 直播间观看，画面为主画面（白板、课件或共享屏幕）与摄像头画面合流；若直播已结束，支持观看回放。

  • 聊天互动。

界面预览

image.png

体验流程

教师端

学生端

主题：开播与互动

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

操作步骤：

  1. 使用桌面端浏览器（推荐使用Chrome）访问互动课堂。

  2. 选择班型并输入用户昵称，单击进入教室，若之前已创建了教室，请输入教室号。

  3. 进入教室后，在页面左上角获取教室号发给学生用户，以便学生端登录至指定教室。

  4. 进入开播页面后，您可以做如下设定、互动操作。

    • 系统默认创建互动白板作为主画面，您可以绘制或添加白板页面。

    • 单击麦克风图标开关麦克风，或点击右侧菜单切换麦克风设备。

    • 单击摄像头图标开关摄像头，或点击右侧菜单切换摄像头设备。

    • 单击共享屏幕/结束共享激活或关闭录屏功能，在弹窗中选择对应的桌面、窗口或浏览器标签页进行采集推流。

    • 单击课件选择本地文档课件，上传并转码完成后即可播放指定文档内容。

  5. 调试好音视频设备后，单击右下角上课。

  6. 单击右下角结束课程，然后单击确认，即可结束并退出课堂。

主题：观看与互动

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

操作步骤：

  1. 扫描上述Demo二维码，打开学生端登录页面。

  2. 在登录页面输入教室号与用户昵称，单击进入教室。

  3. 进入教室后，您可以做如下互动、设定操作。

    • 系统自动拉取直播画面，若未能自动播放需要手动单击播放控件；若老师端尚未开播，请等待开播后观看。

    • 单击菜单栏左侧image.png，可以切换上下两个画面的布局。

    • 单击对话框键入文本发布聊天消息；若直播已结束或处于禁用状态，则无法发送消息

    • 若直播已结束，单击查看回放开始回放直播内容。

  4. 关闭浏览器即可退出课堂。

远程监考

Demo体验

平台

角色

在线体验

Web

监考端

访问远程监考考试Demo创建考场，生成监考端和学生端入场链接。

学生端

功能说明

功能一：创建考场

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

功能二：监考端

  • 查看考场内所有学生的画面。

  • 进行全员静音，或指定学生静音。

  • 进行全员实时口播。

  • 指定音频文件进行全员系统广播。

  • 双击某个学生画面后，学生画面由小屏切换至大屏，进入高清观察模式。

  • 进入高清观察模式后，老师可以选择与学生开启一对一连麦。

  • 结束考试。

功能三：学生端

  • 自动执行老师侧的系统指令，如开启连麦、接收口播、播放系统广播等。

  • 离线录制，即当学生断网后，将自动开启本地视频录制，并在网络恢复后上传至云端。

界面预览

图片12.png图片13.png

体验流程

  1. 访问远程监考考试Demo，输入考场名称，单击创建考场，生成监考端和学生端入场链接。

  2. 监考老师和考生可以分别通过单击对应的链接或扫描二维码进入考场。

  3. 监考端可以做如下互动、操作。

    • 单击全员口播，监考老师可以面向所有学生开启全员口播。

    • 单击系统广播，监考老师可以面向所有学生播放音频文件。

    • 双击某个已经推流的学生画面，弹窗进入高清大屏观察模式。在这个模式下监考老师可以选择与学生进行一对一连麦。

  4. 在监考端单击右上角结束考试，然后单击确认，即可结束并退出考试。

    学生端关闭浏览器即可退出考试。

阿里云首页 音视频终端 SDK 相关技术圈