Maverick and Buhe. This post was first published in the RTC developer community, and you can visit the community to exchange ideas with the authors.

At the same time, we welcome those interested in real-time audio and video technology to participate in 👉 Audio website Agora SDK application experience contest

With the further evolution of technology and infrastructure, a large proportion of offline education and conferences have evolved into online education and conferences, breaking through the shackles of space. Demand growth and diversity of the outbreak scene further expansion also has a very big challenge on technology, is different from the traditional video conference solution, existing programs more consider compatibility, platform diversity, mobile, etc., on the link of product have become increasingly rich, from real-time to record, in late to information retrieval and analysis. In most online education and video conference scenarios, real-time audio and video interaction and whiteboard are necessary functions. However, it takes a long time and requires a high threshold of research and development to realize them. Especially, content recording and subsequent playback in real-time scenarios are quite challenging.

In the first article of this series, the author shared the realization of a simple but practical online classroom on the Web browser side, combining the real-time audio and video interaction capability of The Audio Net Agora SDK with the online whiteboard capability of the White SDK.

Online classrooms are now on the market

The classrooms of all the well-known online education companies in the market are composed of three parts: RTC, whiteboard and real-time message.

  • Real-time audio and video: the cornerstone of distance learning and teacher-student interaction.
  • Whiteboard: an important carrier for teachers to explain key points in class.
  • Real-time message: a platform for information exchange between teachers and students.

From the functional point of view, it is RTC + whiteboard + real-time message. From the underlying technology, it is real-time signaling + real-time audio and video.

Fast implementation of a practical online classroom

The whole development process is divided into two parts. The first is the introduction of audio and video SDK and the implementation of Web browser Demo. Then, on this basis, we introduce the white board SDK to realize the white board function in online classroom.

I. Introduction of audio and video SDK

Audio and video program choose sound network as the technical program, first from www.agora.io/cn/download… Download the latest SDK from sonnet for backup.


1. We choose the Web version of [Video Call/Live Video SDK] to download, and the latest version of this tutorial is V2.6.0 at the time of writing. Download it and unzip it. There are some files like this:

├── ├─ bass exercises ── bass Exercises ── bass Exercises ── bass Exercises ── bass Exercises ── bass Exercises ── bass Exercises ── bass Exercises └─ jquery.txt 2 directories, 6 filesCopy the code

2. Agorartcsdk-2.6.0.js is the SDK main file, along with a simple Demo project, we can use Chrome browser to open the index.html file, the browser will display the following page

3. Need a sound network AppId to next experiment was carried out, go to the dashboard. Agora. IO/cn/signup/register a project and then create a test project, you can get the AppId.

4. After registering on the official website, we go back to this page and copy the AppId into this input box. First click the Join button to Join a channel of the test project specified by the AppId.

5. After clicking, it will prompt you whether you can use the microphone and camera permission, which is to protect the user’s privacy. Here we click “Allow”. We noticed that the contents of the local camera were displayed on the right side of the screen.

In addition, open another browser window and repeat steps 4 ~ 5. Something interesting happens. We see two video screens in two browser Windows respectively. We can imagine a one-to-one teaching scenario where teachers and students can see each other’s faces and hear each other’s voices.

2. Introduce the whiteboard SDK

White SDK is selected as the technical solution of this time. The document center is developer.herewhite.com/#/

1. We introduced JavaScript files and CSS files of the whiteboard SDK in the way of CDN introduction. Add to the head tag of the current index.html file

<title>Agora Web Sample</title>
<! -- Start adding new code -->
<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>
<! -- End of new code -->
Copy the code

2. Adding a specific whiteboard requires two parameters, uUID and token. We put two inputs in the tag to enter these two parameters, add a button to join the room, add the following code under the original button:

<button id="unpublish" class="btn btn-primary" onclick="unpublish()">Unpublish</button>
<! -- Start adding new code -->
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>
<! -- End of new code -->
Copy the code

3. Add the join_room function to the original javascript code, the logic is also relatively simple:

  1. Create the WhiteWebSdk object
  2. Call the joinRoom method to join a specific whiteboard. This whiteboard is determined by the parameters in the preceding two input boxes. The UUID is a global whiteboard, and the token is the necessary verification information to join the whiteboard. The room object holds a set of apis for manipulating the whiteboard, and here the room object is bound to a div with the ID whiteboard.
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'));
  });
}
Copy the code
  1. Let’s add one in the body<div>The white board will be displayed 400px wide and 300px high when successfully added<div>In the now.
<body>
<! -- Start adding new code -->
<div id="whiteboard" style="width: 400px; height: 300px;"></div>
<! -- End of new code -->
Copy the code

5. Where did the UUID and room token in Step 3 come from? Go to Console.herewhite.com and sign up for a developer account. You receive an SDK token that allows you to create a room by calling the REST API. We add the following code at the beginning of our javascript file.

  1. Through the REST API cloudcapiv4.herewhite.com/room create a room, the return value is the familiar uuid and room token
  2. We assign them to the previous two input boxes for easy viewing and recording.
<script language="javascript">
// Start adding new code
var sdkToken = 'WHITEcGFydG5lcl9pZD1DYzlFNTJhTVFhUU5TYmlHNWJjbkpmVThTNGlNVXlJVUNwdFAmc2lnPTE3Y2ZiYzg0ZGM5N2FkNDAxZmY1MTM0ODMxYTdhZTE2ZG Q3MTdmZjI6YWRtaW5JZD00JnJvbGU9bWluaSZleHBpcmVfdGltZT0xNTY2MDQwNjk4JmFrPUNjOUU1MmFNUWFRTlNiaUc1YmNuSmZVOFM0aU1VeUlVQ3B0UC ZjcmVhdGVfdGltZT0xNTM0NDgzNzQ2Jm5vbmNlPTE1MzQ0ODM3NDYzMzYwMA';

var url = 'https://cloudcapiv4.herewhite.com/room?token=' + sdkToken;
var requestInit = {
  method: 'POST'.headers: {
    "content-type": "application/json",},body: JSON.stringify({
    name: 'My first White Room'.limit: 100.// Room size is limited})}; 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);
  })
// Add new code end
Copy the code

6. Open the index.html in the browser again, and the blank in the upper part is part of the whiteboard. Click “Join Whiteborad” and then you can use the mouse to write on the whiteboard after successfully joining the whiteboard.

Third, Demo effect

1. Before joining



2. After joining


3. Experience interactive classes

1. We open another window of the browser, copy room UUID and Room Token in the previous window and overwrite the values in the new window. Click “Join Whiteborad” in the new window, then the two Windows will be added to the same whiteboard. Scribbles in any window are instantly visible in the other window.

2. Let’s take a look at the final result. I believe that after adjusting the style, based on the powerful cloud capabilities of Agora and Netless, this online classroom is ready for production.

Finally, we have uploaded the complete code of the Demo to Github, welcome you to fork and modify, to achieve your unique business scenario product:

Github.com/netless-io/…

In the next installment of this series, we will be sharing the recordings and playback of the live online classroom.