阅读 2099

拿去打包上线!一套代码实现1对1 、1对N在线课堂与低延迟大班课

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

iOS 版声网云课堂

除了 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<RoomPhase>() {
            @Override
            public void then(RoomPhase phase) {
                if (phase != RoomPhase.connected) {
                    pb_loading.setVisibility(View.VISIBLE);
                    boardManager.roomJoin(uuid, token, new Callback<RoomJoin>() {
                        @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<any> {
    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 实现具体业务逻辑。

源码与更多

欢迎在测试源码的同时,提出更多关于 Demo 优化、改进的更多想法。我们会对每位提出有效建议的开发者送上丰厚奖励。

点击这里获取Demo源码,了解 Demo 评测奖励


活动预告:想了解如何快速实现在线课堂?2 月 27 日(本周四)下午 15:00,我们将分享Agora SDK 的快速集成。

关注下面的标签,发现更多相似文章
评论