Практика разработки онлайн-класса (1): видео в реальном времени и обучение на доске

RTC

Автор: maverick, buhe, эта статья впервые опубликована вСообщество разработчиков RTC, вы можете посетить сообщество, чтобы обменяться опытом разработки с двумя авторами.

В то же время к участию приглашаются небольшие партнеры, заинтересованные в аудио- и видеотехнологиях в реальном времени.👉 Конкурс эссе о пользовательском опыте Shengwang Agora SDK

С дальнейшим развитием технологий и инфраструктуры большая часть офлайн-обучения и конференций превратилась в онлайн-обучение и конференции, преодолевая космические оковы. Взрывной рост спроса и дальнейшее расширение сценариев также поставили перед технологиями большие задачи.В отличие от традиционных решений для видеоконференций, существующие решения в большей степени учитывают совместимость, разнообразие платформ, мобильность и т. д. от реального времени к записи, к поиску и анализу информации на более позднем этапе. В большинстве сценариев онлайн-обучения и видеоконференций аудио- и видеовзаимодействие в реальном времени и интерактивная доска являются важными функциями.Однако аудио- и видеовзаимодействие в реальном времени и интерактивная доска требуют длительного времени и высокого порога исследований и разработок, особенно в режиме реального времени. Запись контента и последующее воспроизведение еще более сложны.

В первой статье этой серии автор поделился реализацией простого, но практичного онлайн-класса на стороне веб-браузера, сочетающего возможности аудио- и видео-взаимодействия в реальном времени Agora SDK и возможности интерактивной доски White SDK.

Онлайн-классы уже на рынке

ff.png

Классы всех известных на рынке онлайн-образовательных компаний состоят из трех частей: RTC, доска и новости в реальном времени.

  • Аудио и видео в режиме реального времени: краеугольный камень удаленных занятий и взаимодействия учителя и ученика.
  • Whiteboard: важный перевозчик для преподавателей для обучения и объяснения ключевых точек.
  • Новости в режиме реального времени: платформа для обмена информацией между учителями и учениками.

С функциональной точки зрения это RTC + доска + обмен сообщениями в реальном времени. С точки зрения базовой технологии, это сигнализация в реальном времени + аудио и видео в реальном времени.

Быстро внедрить практичный онлайн-класс

Весь процесс разработки делится на две части. Во-первых, представить SDK для аудио и видео и реализовать демонстрацию на стороне веб-браузера. Затем на этой основе мы представляем SDK доски для реализации функции доски в онлайн-классе.

1. Знакомство с SDK для аудио и видео

Аудио- и видеорешение выбирает звуковую сеть в качестве технического решения на этот раз, начиная сwoohoo.agora.IO/capable/download…Загрузите последнюю резервную копию звуковой сети SDK.

ee.png

1. Мы выбрали [Video Call / Live Video Web Version SDK], чтобы загрузить последнюю версию этого руководства Tutorial, - версия 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, и к нему прилагается простой демонстрационный проект.Мы можем открыть файл index.html в браузере Chrome, и браузер отобразит следующую страницу

dd.png

3. APHID нужна звуковая сеть может быть следующим тестом, пойтиdashboard.agora.io/cn/signup/Вы можете получить этот AppID, зарегистрировав проект, а затем создавая тестовый проект.

4. После регистрации на официальном сайте возвращаемся на эту страницу, копируем AppId в это поле ввода, сначала нажимаем кнопку «Присоединиться», чтобы присоединиться к каналу тестового проекта, указанному AppId, канал по умолчанию 1000, здесь мы используйте значение по умолчанию.

5. После нажатия вам будет предложено, можете ли вы использовать разрешения микрофона и камеры.Это сделано для защиты конфиденциальности пользователей.Здесь мы нажимаем [Разрешить]. Мы обнаружили, что содержимое локальной камеры отображалось в правой части экрана.

Кроме того, откройте еще одно окно браузера и повторите шаги с 4 по 5. Произошло более интересное: мы увидели два видеоизображения в двух окнах браузера соответственно, причем одно из них локальное, а другое удаленное. Мы можем представить сценарий индивидуального обучения, в котором учителя и ученики могут видеть лица друг друга и слышать голоса друг друга.

2. Знакомство с Whiteboard SDK

Решение Whiteboard на этот раз выбирает White SDK в качестве технического решения Центр документации:developer.herewhite.com/#/

1. Мы представляем файлы JavaScript и файлы css пакета SDK для белой доски посредством введения CDN. Добавить в тег head текущего файла index.html

<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>
<!-- 新加入代码结束 -->

2. Для добавления специальной доски требуется два параметра uuid и токен, мы<body>Поместите два входа в метку, чтобы ввести эти два параметра, добавьте кнопку для присоединения к комнате и добавьте следующий код под исходной кнопкой:

<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>
<!-- 新加入代码结束 -->

3. Добавьте функцию join_room в исходный код javascript, и логика относительно проста:

  1. Создайте объект WhiteWebSdk
  2. Вызовите метод joinRoom, чтобы присоединиться к определенной интерактивной доске. Доска определяется параметрами в первых двух полях ввода. UUID — это глобальная доска. Маркер — это необходимая информация для проверки для присоединения к интерактивной доске. Когда вызов завершается успешно, объект room получен. , объект room содержит ряд API для операций с доской, и здесь привязывает свою комнату к 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'));
  });
}
  1. Мы добавляем<div>Используемая для размещения доски, она будет успешно добавлена ​​к этой доске шириной 400 пикселей и высотой 300 пикселей.<div>бинго.
<body>
<!-- 新加入代码开始 -->
<div id="whiteboard" style="width: 400px; height: 300px;"></div>
<!-- 新加入代码结束 -->

5. Откуда взялись uuid и токен комнаты на шаге 3? Сначала перейдите кconsole.herewhite.comЗарегистрируйте учетную запись разработчика, вы получите токен sdk, через который вы сможете вызывать REST API для создания комнаты. Мы добавляем следующий код в начало файла javascript.

  1. Через REST-APIcloudcapiv4.herewhite.com/roomСоздайте комнату, возвращаемое значение — знакомый uuid и токен комнаты.
  2. Мы назначаем их двум передним полям ввода для удобства просмотра и записи.
<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);
  })
//  新加入代码结束

6. Снова откройте index.html в браузере. Пустое место в верхней половине является частью доски. Мы нажимаем кнопку [Присоединиться к доске]. После успешного добавления доски вы можете использовать мышь, чтобы рисовать на доске. доска.

3. Демонстрационный эффект

1. Перед присоединением

cc.png

2. После присоединения

bb.png

1. Открываем другое окно браузера, копируем Room UUID и Room token в предыдущем окне и переопределяем значение в новом окне, нажимаем кнопку [Join WhiteBorad] в новом окне, добавляем два окна в один и тот же блок. На доске любые окна записываются в одно мгновение, чтобы появиться в другом окне.

2. Давайте посмотрим на окончательный эффект Я считаю, что после настройки стиля, основанного на мощных облачных возможностях Agora и Netless, такой онлайн-класс может быть готов к продукту.

aa.png

Наконец, мы загрузили полный код демо-версии на Github, Вы можете разветвить и изменить продукт, чтобы реализовать свой уникальный бизнес-сценарий:

GitHub.com/netless-IO/…

В следующем выпуске этой серии мы представим запись и воспроизведение онлайн-классов в прямом эфире, так что следите за обновлениями.

Категории