一、现在市场上的在线教室都是怎么样的
市面上所有的知名在线教育公司的教室都是由RTC、白板、IM 三部分组成
- 音视频：远程上课的基石。
- 白板：老师上课的课件载体。
- IM：师生信息交流的平台。
整体就是 RTC + IM +白板，从底层看来就是实时信令+实时音视频媒体。
音视频方案选择声网作为本次的技术方案，先从 https://www.agora.io/cn/download/ 下载声网最新的 SDK 备用。
- 我们选择【视频通话/视频直播 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
- 其中 AgoraRTCSDK-2.6.0.js 是 SDK 主体文件，附带还有一个简单的 demo 工程，我们可以用 chrome 浏览器打开 index.html 文件，浏览器显示如下页面
-
需要一个声网的 AppId 才可以进行下一步试验，去 https://dashboard.agora.io/cn/signup/ 注册一个项目然后创建一个测试项目，就可以获取到这个 AppId 了。
-
去官网注册好之后，我们回到这个页面，复制 AppId 到这个输入框内，首先点击 Join 按钮，加入该 AppId 指定的测试项目的某个 channel ，channel 默认是 1000 ，这里我们使用默认值。
-
点击后会提示是否可以使用麦克风和摄像头权限，这是为了保护用户的隐私，这里我们点击【允许】。我们发现本地摄像头的内容显示在了屏幕的右侧。
另外再打开一个浏览器窗口，重复 4 ～ 5 步骤，比较有趣的事情就发生了，我们在两个浏览器窗口上分别看到了两个视频画面，其实一个是本地画面，一个远端的画面。我们可以想象成一对一教学的场景，老师和学生可以互相看到对方的脸听到对方的声音。
白板方案选择 white sdk 作为本次的技术方案，文档中心：https://developer.herewhite.com/#/
- 我们用 cdn 引入的方式引入白板 SDK 的 javascript 文件和 css 文件。在当前的 index.html 文件的 head 标签中加入
<title>Agora Web Sample</title>
<!-- 新加入代码开始 -->
<link rel="stylesheet" href="https://sdk.herewhite.com/white-web-sdk/2.0.0-beta.3.css">
<script src="https://sdk.herewhite.com/white-web-sdk/2.0.0-beta.3.js"></script>
<!-- 新加入代码结束 -->- 加入一个特定的白板需要 uuid 和 token 两个参数，我们在 body 标签中放置两个 input 用于输入这两个参数，加入一个按钮用于加入房间，在原有的 button 下面加入如下代码：
<button id="unpublish" class="btn btn-primary" onclick="unpublish()">Unpublish</button>
<!-- 新加入代码开始 -->
Room UUID: <input id="room_uuid" type="text" size="32"></input>
Room Token: <input id="room_token" type="text" size="32"></input>
<button id="join_room" class="btn btn-primary" onclick="join_room()">Join Whiteborad</button>
<!-- 新加入代码结束 -->- 在原有 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 中加入一个 div 用来容纳白板吧，白板成功加入后就会显示在这个 400px 宽、300px 高的 div 中了。
<body>
<!-- 新加入代码开始 -->
<div id="whiteboard" style="width: 400px; height: 300px;"></div>
<!-- 新加入代码结束 -->- 步骤 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 框，方便查看和记录。
<script language="javascript">
// 新加入代码开始
var sdkToken = 'WHITEcGFydG5lcl9pZD1DYzlFNTJhTVFhUU5TYmlHNWJjbkpmVThTNGlNVXlJVUNwdFAmc2lnPTE3Y2ZiYzg0ZGM5N2FkNDAxZmY1MTM0ODMxYTdhZTE2ZGQ3MTdmZjI6YWRtaW5JZD00JnJvbGU9bWluaSZleHBpcmVfdGltZT0xNTY2MDQwNjk4JmFrPUNjOUU1MmFNUWFRTlNiaUc1YmNuSmZVOFM0aU1VeUlVQ3B0UCZjcmVhdGVfdGltZT0xNTM0NDgzNzQ2Jm5vbmNlPTE1MzQ0ODM3NDYzMzYwMA';
var url = 'https://cloudcapiv4.herewhite.com/room?token=' + sdkToken;
var requestInit = {
method: 'POST',
headers: {
"content-type": "application/json",
},
body: JSON.stringify({
name: '我的第一个 White 房间',
limit: 100, // 房间人数限制
}),
};
fetch(url, requestInit)
.then(function (response) {
return response.json();
})
.then(function (json) {
room_uuid.value = json.msg.room.uuid;
room_token.value = json.msg.roomToken;
console.log("room uuid", json.msg.room.uuid, json.msg.roomToken);
})
// 新加入代码结束- 重新用浏览器打开 index.html ，上半部分的空白则是白板的部分，我们点击【Join Whiteborad】按钮，成功加入白板后就可以使用鼠标在白板上进行涂写了。
1、我们打开浏览器的另一个窗口，将上一窗口中的 room uuid 和 room token 复制并覆盖新窗口中的值，点击新窗口中的【Join Whiteborad】按钮，则两个窗口加入到同一块白板中，任何一个窗口的涂写都瞬间在另一个窗口中显现。
2、我们看看最终的效果吧。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent