一套代码实现1对1 、1对N在线课堂与低延迟大班课

尽管疫情还未结束，但很多学生已经在线开启了新的一学期。很多教育巨头为老师与学生搭建的在线教学场景，都是通过声网 Agora SDK 实现的。为了方便更多用户可以基于 Agora SDK 快速实现多种在线教学场景，我们现已开源声网云课堂 Demo，大家可在文末获取源码。

除了 demo 开源，我们也提供了Web、Android、iOS 应用供大家体验。推荐老师使用 Web 端应用，学生可使用以上任一版本。

Web（推荐用Chrome访问）：solutions.agora.io/education/w…

iOS：App Store 搜索“声网云课堂”

Android：华为应用市场搜索“声网云课堂”，或扫码下载（密码：123）

场景与功能
声网云课堂 Demo 实现的教学场景包括：

1 对 1 互动教学：1 位老师对 1 名学生进行专属线上辅导教学，老师和学生能实时音视频互动。
1 对 N 在线小班课：1 位教师对多名学生进行在线辅导教学，最多支持 16 名学生。
低延迟大班课：1 位老师进行教学，多名学生实时观看和收听，学生人数无上限。与此同时，学生可以“举手”发言，与老师进行实时音视频互动。

除了支持实时音视频的互动，本示例项目还支持在线课堂中许多必不可少的功能。我们仅以 Web 端来介绍一下。
教学白板：在以上三个场景中，都支持白板功能。1 对 1 互动教学中，老师和学生都可以操作白板；1 对 1 在线小班课、低延迟大班课中，可以授权学生操作白板。

共享PPT等文件：老师可以在授课的同时，共享 PPT、PDF、word、图片、mp4、mp3 等多媒体文件。学生端只能观看，不能上传。

屏幕共享：老师可以发起屏幕共享，展示桌面、网页或其他应用窗口。

文字消息：除了连麦以外，学生还可以通过文字消息在课堂中提问交流。

录制回放：老师登录 Web端，可以进行课程录制。在白板的下方，有录制按钮，制完成后，在右侧的消息窗口中会自动弹出回放地址。

另外，老师端还支持一些控制学生端音视频流的权限，比如在 1 对 N 在线小班课中，老师还可以访问学生列表，开启或关闭学生的麦克风，比如在希望某个学生发言，那么就可以直接开启对方的麦克风。接下来，我们来通过 Demo 中的代码来看一下如何实现以上各个功能。
源码讲解
以下功能我们会主要基于Java 代码来进行讲解。
这个示例中，课程的直播、师生的连麦，都是基于 Agora SDK 实现的。我们通过以下代码可以让用户加入RTC频道，实现音视频的互通。
@Override
public void joinChannel(Map<String, String> data) {
sdk.joinChannel(data.get(TOKEN), data.get(CHANNEL_ID), null, Integer.valueOf(data.get(USER_ID)));
}
复制代码在课堂中的文字消息、控制指令（比如学生发出申请使用白板）等，都是基于 Agora 实时消息RTM SDK 实现的。在这里我们集成 RTM SDK 后，通过以下代码让用户加入 RTM 频道。
public void joinChannel(String rtcToken) {
RtmManager.instance().joinChannel(new HashMap<String, String>() {{
put(SdkManager.CHANNEL_ID, getChannelId());
}});
RtcManager.instance().joinChannel(new HashMap<String, String>() {{
put(SdkManager.TOKEN, rtcToken);
put(SdkManager.CHANNEL_ID, getChannelId());
put(SdkManager.USER_ID, getLocal().getUserId());
}});
}
复制代码大家可以参考 Demo 中的白板部分的代码来实现白板功能，如下所示：
public void initBoard(String uuid, String token) {
if (TextUtils.isEmpty(uuid)) return;
boardManager.getRoomPhase(new Promise() {
@Override
public void then(RoomPhase phase) {
if (phase != RoomPhase.connected) {
pb_loading.setVisibility(View.VISIBLE);
boardManager.roomJoin(uuid, token, new Callback() {
@Override
public void onSuccess(RoomJoin res) {
RoomParams params = new RoomParams(uuid, res.roomToken);
boardManager.init(whiteSdk, params);
}

@Override
public void onFailure(Throwable throwable) {
ToastManager.showShort(throwable.getMessage());
}
});
}
}

@Override
public void catchEx(SDKError t) {
ToastManager.showShort(t.getMessage());
}
});
}

复制代码老师端的屏幕共享，仅支持在 Web 端发起，以下是 Web 代码是老师端的实现逻辑。
async startScreenShare (token: string) {
this.shareClient = new AgoraRTCClient();
await this.shareClient.createLocalStream({
video: false,
audio: false,
screen: true,
screenAudio: true,
streamID: SHARE_ID,
microphoneId: ‘’,
cameraId: ‘’
})
await this.shareClient.createClient(APP_ID);
await this.shareClient.join(SHARE_ID, this.channel, token);
await this.shareClient.publish();
this.shared = true;
}

复制代码以下 Java 代码是学生端处理屏幕共享流（仅支持观看屏幕共享）的代码。
public void onScreenShareJoined(int uid) {
if (surface_share_video == null) {
surface_share_video = RtcManager.instance().createRendererView(this);
}
layout_whiteboard.setVisibility(View.GONE);
layout_share_video.setVisibility(View.VISIBLE);
removeFromParent(surface_share_video);
surface_share_video.setTag(uid);
layout_share_video.addView(surface_share_video, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
RtcManager.instance().setupRemoteVideo(surface_share_video, VideoCanvas.RENDER_MODE_FIT, uid);
}
@Override
public void onScreenShareOffline(int uid) {
Object tag = surface_share_video.getTag();
if (tag instanceof Integer) {
if ((int) tag == uid) {
layout_whiteboard.setVisibility(View.VISIBLE);
layout_share_video.setVisibility(View.GONE);
removeFromParent(surface_share_video);
surface_share_video = null;
}
}
}
复制代码在线录制只有使用 Web 端的老师才可以发起，以下是 Web 老师端开启云端录制的代码逻辑：
public async start(): Promise {
if (this.resourceId === undefined) {
throw {
recordingErr: {
message: ‘start recording failed’,
},
reason: ‘resourceId is undefined’,
}
}
const response = await AgoraFetch(${PREFIX}/v1/apps/${this.agoraAppId}/cloud_recording/resourceid/${this.resourceId}/mode/${this.mode}/start, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
Authorization: this.basicAuthorization(this.customerId, this.customerCertificate),
},
body: JSON.stringify({
cname: this.channelName,
uid: this.uid,
clientRequest: {
token: this.token,
recordingConfig: this.recordingConfig,
storageConfig: this.storageConfig,
},
})
});
const res = await response.json();
if (typeof res.sid === “string”) {
this.recordId = res.sid;
} else {
throw {
recordingErr: {
message: ‘start recording failed’,
},
reason: ‘recordId is invalid’,
}
}
return res;
}
复制代码FAQ
Q：支持的平台和版本（iOS/Android/Web）
本示例项目支持以下平台和版本：

iOS 10 及以上。

Android 4.4 及以上。

Web Chrome 72 及以上。

注意，目前示例 Demo 还未适配 iPad，所以部分 iPad 运行 Demo 时会出现黑边，需要你根据自己的业务需求在代码中进行调整、适配。

Q：一直报错人数已满（iOS/Android/Web）
这是由于本示例项目没有用户系统，无法及时查询在线人数。本示例项目使用 Agora RTM SDK 查询在线人数。在用户异常退出后，RTM 无法及时知晓该用户状态。一般情况下，需要等待 10 秒左右 RTM 才能更新当前用户状态。如果你有用户系统，就可以不需要使用 RTM 查询在线人数。
Q：音视频无法连接（iOS/Android/Web）
这很有可能是因为 Agora RTC SDK 的 token 配置存在问题。请检查你的 token 配置。请在声网文档中心搜索「校验用户权限」，参考相关文档。
请注意，Agora RTC SDK 的 token 和 channelId 需要对应。如果 channelId 变了，配置的 token 也需要变。
Q：白板连接异常（iOS/Android/Web）
Demo 中的白板采用的是合作伙伴 Netless 的接口，如果发现连接异常，可能是 token 配置有问题。白板的 token 分为 sdkToken 和 roomToken，请在https://developer.netless.link/docs/blog/term/ 搜索这两个关键词，检查 token 的设置是否存在问题。
Q：教室里云端录制（Web）
如果你的团队有后端开发能力，我们建议使用声网本地服务端录制 SDK，将录制功能集成在后端。
如果没有后端开发团队，也可以参考声网文档中心的「云端录制快速开始」，实现云端录制功能。要注意，本示例项目将录制集成在了前端，存在暴露 OSS 访问操作的安全隐患，部署云录制业务也可能存在困难。如遇到问题可以访问 RTC 开发者社区（rtcdeveloper.com），发帖寻求帮助。
声网云端录制服务支持合流录制和单流录制。合流录制是比较简单的集成方案，具体可参考声网文档中心教程。
Q：白板课件管理（Web）
本示例项目中，白板课件管理部署在前端。建议你实现排课业务后，在课程里预先上传课件，Web 端只读取课件即可。
本示例项目中涉及的 OSS 相关的接入，建议参考 stsToken 的上传方案集成（help.aliyun.com/document_de… accessKey 和 secretKey 的上传方案集成，可能存在安全隐患。
注意

本示例源码中，屏幕共享的 UID 固定为 7，你需要根据自己的业务进行调整。

本示例项目中的 channelId 是 MD5 后的，你需要对接自己的环境进行修改。

推荐你使用自己的业务后台管理频道属性，将 Agora RTM SDK 作为指令收发器，配合 Agora Native/Web SDK 实现具体业务逻辑。

一套代码实现1对1 、1对N在线课堂与低延迟大班课相关推荐

拿去打包上线！一套代码实现1对1 、1对N在线课堂与低延迟大班课
最近很多学生已经在线开启了新的一学期.很多教育巨头为老师与学生搭建的在线教学场景,都是通过声网 Agora SDK 实现的.为了方便更多用户可以基于 Agora SDK 快速实现多种在线教学场景,我们 ...
多重影分身：一套代码如何生成多个小程序？
前言影分身术,看过火影的都知道,一个本体,多个分身. 大家肯定要问了,那小程序开发跟影分身术也能扯上关系?没错,那自然就是:一套代码,多个小程序啦. 各位先别翻白眼,且听我细细说来. 如今小程序发展 ...
JetBrains打造的开发神器，一套代码适应多端！
欢迎关注方志朋的博客,回复"666"获面试宝典来源:程序员编程最近正在考虑开发一款APP,今天就看到一款基于多端的 UI 调试工具,一套代码适应多端,真的是太棒了,下面分享给大 ...
一套代码小程序WebNative运行的探索01
前言前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉并且用小程序翻写了之前一个demo:[组件化开发]前端进阶篇之如何编写可维护可升级的代码之前一直在跟业务方打交道 ...
一套代码称霸5大端口，移动金融应用还能这样开发？
在全面拥抱移动互联网的时代,传统金融机构转战移动金融应用已是大势所趋.但银行转型面临的问题非常之多,不仅仅是机构属性复杂和用户留存率的问题,在开发层面也一样陷入了开发效率较低.缺乏统一化标准.运维困难 ...
一套代码小程序WebNative运行的探索02
接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱参考: https://github.com/f ...
官网，一套代码如何运行多端？
前段时间,做了公司一个项目的官网,就官网布局和效果来说,都是比较简单的,唯一一点不好的就是要兼容到ie8,所以很多css3的属性并不能用,只能老老实实按常规操作来. 为了一套代码可以在pc.移动端.i ...
一套代码编译出ios和android,Hippy: Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写一套代码就直接运行于三个平台（iOS、Android 和 Web）...
Hippy 跨端开发框架介绍 Hippy 是一个新生的跨端开发框架,目标是使开发者可以只写一套代码就直接运行于三个平台(iOS.Android 和 Web).Hippy 的设计是面向传统 Web 开 ...
老手机能升级华为鸿蒙,华为正式发布鸿蒙2.0！实现手机、平板等多平台共用一套代码！...
1. 华为发布HarmonyOS 2,向万物互联时代迈进华为消费者业务软件部总裁王成录在HarmonyOS2及华为全场景新品发布会上表示,鸿蒙操作系统是一个全栈解耦的架构,一套代码可以在手机上使用, ...

一套代码实现1对1 、1对N在线课堂与低延迟大班课

一套代码实现1对1 、1对N在线课堂与低延迟大班课相关推荐

最新文章

热门文章