在线教育开发实践（一）：实时视频与白板教学

Kahn 发布于2019-08-02 16:12 / 1899人阅读

摘要：本系列的第一篇文章，笔者分享了在浏览器端，结合声网的实时音视频互动能力与的在线白板能力，来实现一个简单但实用的在线教室。一引入音视频音视频方案选择声网作为本次的技术方案，先从下载声网最新的备用。

作者：maverick、buhe，本文首发于 RTC 开发者社区

随着技术和基础设施的进一步演进，线下的教育、会议已有很大比重演进为线上的教育和会议，突破了空间的桎梏。需求的多样性爆发增长和场景的进一步拓宽也对技术产生了非常大的挑战，有别于传统视频会议的方案，现有方案更多考虑兼容性、平台多样性、移动化等，在产品的链路上也变的愈加丰富，从实时到录制、在到后期的信息检索和分析。在绝大部分在线教育、视频会议场景中，实时音视频互动与白板都是必备功能，然而实时音视频互动与白板都是需要很长时间和较高研发门槛才能实现的，尤其是实时场景下的内容记录和后续的回放更是颇有挑战。

本系列的第一篇文章，笔者分享了在 Web 浏览器端，结合声网Agora SDK 的实时音视频互动能力与 White SDK 的在线白板能力，来实现一个简单但实用的在线教室。

现在市场上的在线教室

市面上所有的知名在线教育公司的教室都是由 RTC、白板、实时消息三部分组成。

实时音视频：远程上课、师生互动的基石。

白板：老师上课、讲解要点的重要载体。

实时消息：师生信息交流的平台。

从功能角度来看，就是 RTC + 白板 + 实时消息。从底层技术来看，就是实时信令+实时音视频。

快速实现一个实用的在线教室

整个开发流程分为两个部分。首先是引入音视频 SDK 并实现 Web 浏览器端 Demo。然后，我们在此基础上引入白板 SDK，实现在线教室中的白板功能。

一、引入音视频 SDK

音视频方案选择声网作为本次的技术方案，先从 https://www.agora.io/cn/downl... 下载声网最新的 SDK 备用。

1.我们选择【视频通话/视频直播 SDK】的 Web 版本进行下载，本教程写作时最新版本是 v2.6.0 版本。下载下来进行解压，其中有这样一些文件：

├── AgoraRTCSDK-2.6.0.js

├── assets

│   ├── mute48.png

│   └── sound48.png

├── index.html

└── vendor

   ├── bootstrap.min.css

   └── jquery.js

2 directories, 6 files

2.其中 AgoraRTCSDK-2.6.0.js 是 SDK 主体文件，附带还有一个简单的 Demo 工程，我们可以用 Chrome 浏览器打开 index.html 文件，浏览器显示如下页面

3.需要一个声网的 AppId 才可以进行下一步试验，去 https://dashboard.agora.io/cn... 注册一个项目然后创建一个测试项目，就可以获取到这个 AppId 了。

4.去官网注册好之后，我们回到这个页面，复制 AppId 到这个输入框内，首先点击 Join 按钮，加入该 AppId 指定的测试项目的某个 channel ，channel 默认是 1000 ，这里我们使用默认值。

5.点击后会提示是否可以使用麦克风和摄像头权限，这是为了保护用户的隐私，这里我们点击【允许】。我们发现本地摄像头的内容显示在了屏幕的右侧。

另外再打开一个浏览器窗口，重复 4 ～ 5 步骤，比较有趣的事情就发生了，我们在两个浏览器窗口上分别看到了两个视频画面，其实一个是本地画面，一个远端的画面。我们可以想象成一对一教学的场景，老师和学生可以互相看到对方的脸听到对方的声音。

二、引入白板 SDK

白板方案选择 White SDK 作为本次的技术方案，文档中心：https://developer.herewhite.com/#/

1.我们用 CDN 引入的方式引入白板 SDK 的 JavaScript 文件和 css 文件。在当前的 index.html 文件的 head 标签中加入

Agora Web Sample

2.加入一个特定的白板需要 uuid 和 token 两个参数，我们在标签中放置两个 input 用于输入这两个参数，加入一个按钮用于加入房间，在原有的 button 下面加入如下代码：



Room UUID: 
Room Token:

3.在原有 javascript 代码中加入 join_room 函数，逻辑也是比较简单的：

创建 WhiteWebSdk 对象

调用 joinRoom 方法加入某个特定的白板，这个白板由前面两个 input 框中的参数确定，uuid 为全局确定一个白板，token 则是加入这个白板的必备验证信息，当调用成功结束后得到 room 对象，room 对象持有对白板操作的一系列 API ，这里把他 room 绑定在 id 为 whiteboard 的 div 上。

function join_room() {
  document.getElementById("join_room").disabled = true;
  var whiteWebSdk = new WhiteWebSdk();
  whiteWebSdk.joinRoom({
    uuid: room_uuid.value,
    roomToken: room_token.value,
  }).then(function(room) {
    room.bindHtmlElement(document.getElementById("whiteboard"));
  });
}

我们在 body 中加入一个

用来容纳白板吧，白板成功加入后就会显示在这个 400px 宽、300px 高的

中了。

5.步骤 3 中的 uuid 和 room token 是从哪里来的呢？首先请前往 https://console.herewhite.com 注册一个开发者账户，你就获取到一个 sdk token ，通过 sdk token 就可以调用 REST API 创建一个房间了。我们在 javascript 文件的开头加上如下代码。

通过 REST API https://cloudcapiv4.herewhite.com/room 创建一个房间，返回值就是熟悉的 uuid 和 room token 了

我们把他们赋给前面的两个 input 框，方便查看和记录。

2.加入后

3、体验互动课堂

1.我们打开浏览器的另一个窗口，将上一窗口中的 room uuid 和 room token 复制并覆盖新窗口中的值，点击新窗口中的【Join Whiteborad】按钮，则两个窗口加入到同一块白板中，任何一个窗口的涂写都瞬间在另一个窗口中显现。

2.我们看看最终的效果吧，相信在调整了样式之后，基于 Agora 和 Netless 强大的云端能力，这样的在线教室已经具有产品就绪的能力。

最后，我们已经将该 Demo 的完整代码上传至 Github，欢迎大家 fork 和修改，实现出你独特业务场景的产品：

https://github.com/netless-io/Edu-Classroom-Demo

专线服务私有云多人实时音视频开发如何用vue开发实时音视频全面评估音视频实时通信的开发测试环境中国教育电视台一套直播在线观看家庭教育的责任与未来

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54876.html

在线教育开发实践（一）：实时视频与白板教学

摘要：本系列的第一篇文章，笔者分享了在浏览器端，结合声网的实时音视频互动能力与的在线白板能力，来实现一个简单但实用的在线教室。一引入音视频音视频方案选择声网作为本次的技术方案，先从下载声网最新的备用。作者：maverick、buhe，本文首发于 RTC 开发者社区随着技术和基础设施的进一步演进，线下的教育、会议已有很大比重演进为线上的教育和会议，突破了空间的桎梏。需求的多样性爆发增长和...

ygyooo 2019-08-23 16:57 评论0 收藏0
“小程序+直播”怎样搅动音视频技术生态？

摘要：与原生应用和基于浏览器的应用相比，小程序直播会对音视频技术生态带来哪些影响微信天生的流量优势会给开发者和运营带来机会还是陷阱邀请了若干位有代表性的技术人，分享各自的观点与思考。姜雨晴小程序提供的实时音视频是一种的技术解决方案。责编 / 王宇豪策划 / LiveVideoStack 12月26日晚间，微信小程序开放了直播能力，并首先向社交、教育、医疗、政务民生、金融等五大应用场景开放...

xorpay 2019-07-16 16:17 评论0 收藏0
后疫情时代，UCloud为小站教育打造实时互动“云端”课堂

摘要：目前，小站教育已开设美高择校备考留学规划等全面提升预备役留学生综合实力的课程。后疫情时代，小站教育加快打造更优质的在线语培教学服务，与携手优化现有教学模式。梦想不是简单的梦和想，而是无论顺境逆境，光明黑暗都矢志不渝的激情与渴望。这是小站教育创始人兼CEO王浩平写在公司官网上的话。经历过为留学考6次托福和3次GMAT的回忆，王浩平希望用小站教育帮助更多学子避开自己曾走过的弯路，打开更为广阔的世...

Tecode 2022-06-28 19:00 评论0 收藏0
UCloud WebRTC 来了！支持万人直播的一站式实时音视频解决方案

摘要：宋体同时支持多平台的接入，能满足不同客户端的接入需求。宋体宋体支持万人直播推送宋体宋体利用实时集群直播集群，实现音视频连麦互动可以同时推送万人直播，具体原理如下。有人说：2G 看文字，3G 看图片，4G 看视频，那么对于已经开启序幕的 5G 时代呢？随着短视频、在线课堂、互动直播等音视频应用的崛起，如何适配差异化的网络环境，为用户提供更流畅高清的实时音视频服务成为关注重点。而当前的音视频技术...

AlphaGooo 2019-12-27 12:20 评论0 收藏0
更懂在线互动课堂，UCloud优刻得推出URTC实时音视频

摘要：微软雅黑宋体除在线教育外，也可满足语音和视频社交远程医疗视频会议娱乐直播等多种业务场景需要，后续将持续推出多行业的实时音视频解决方案。微软雅黑宋体目前已上线公测，且每月万分钟内免费，登录优刻得官网即可了解更多产品功能及价格信息。近日，中立云服务平台UCloud优刻得正式推出URTC（UCloud Real-Time Communication）实时音视频产品，依托于UCloud优刻得强大的云...

imtianx 2019-12-27 11:44 评论0 收藏0