В прошлом году мы наблюдали значительный рост использования виртуальных встреч, и существующие платформы не могут удовлетворить индивидуальные потребности каждого. Кроме того, создание собственного многофункционального решения для ваших нужд с нуля — не лучший вариант, поскольку вам нужно управлять множеством задач, и здесь на помощь приходит VideoSDK.live.

С помощью video SDK вы можете создать индивидуальное приложение для видеочата со всеми необходимыми вам функциями. В этом руководстве мы увидим, как создать приложение для видеочата с помощью Javascript.

Предпосылки

  1. Node.js v12+
  2. NPM v6+ (поставляется с более новыми версиями Node)
  3. У вас должна быть учетная запись SDK для видео для создания токенов. Посетите видео SDK панель управления, чтобы сгенерировать токен.

Структура проекта

root 
├── index.html
├── assets
│    ├── css
│    │    ├── index.css
│    ├── js
│         ├── index.js

Шаг 1. Добавление VideoSDK

Обновите файл index.html файлом <script ... />, как показано, чтобы добавить VideoSDK Javascript SDK в свой проект.

Если вы не хотите использовать <script ... />, вы можете использовать npm для установки VideoSDK в свой проект.

npm install @videosdk.live/js-sdk
//or you can use yarn
yarn add @videosdk.live/js-sdk

Шаг 2: Создание пользовательского интерфейса

Для интерфейса у нас будут простые кнопки «Присоединиться» и «Создать собрание», которые будут присоединяться и создавать новую комнату собрания соответственно.

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

Вы можете получить полный пользовательский стиль CSS отсюда.

Мы объявим все переменные DOM, которые нам понадобятся, в файле index.js.

Шаг 3: Реализация встречи

Чтобы начать реализацию встречи, нам понадобится token, поэтому, если у вас его нет, вы можете сгенерировать его здесь.

  1. Теперь обновите свой токен в файле index.js, как показано, чтобы добавить token в скрипт и добавить валидатор.

2. У нас есть token. Теперь мы добавим meetingHandler, которые создадут конференц-зал или присоединятся к нему.

3. Теперь meetingId либо генерируется, либо обновляется введенным пользователем значением. После этого запускается startMeeting, который отвечает за инициализацию собрания с необходимой конфигурацией и присоединение к собранию.

4. Теперь мы создадим представление локального участника.

5. Чтобы показать удаленных участников, мы добавим прослушиватели событий на meeting, которые будут уведомлять нас, когда участник присоединяется к собранию или покидает его.

6. Наконец, мы добавим прослушиватели событий к кнопкам-переключателям и кнопке выхода.

Запустите и протестируйте

Для запуска приложения вам понадобится live-server. Если он у вас еще не установлен, вы можете сделать это, используя:

npm install -g live-server

После того, как вы установили live-server, просто запустите его, используя:

live-server

Заключение

Благодаря этому мы успешно создали приложение для видеочата, используя SDK для видео на Javascript. Если вы хотите добавить такие функции, как обмен сообщениями в чате, совместное использование экрана, вы всегда можете ознакомиться с нашей документацией. Если у вас возникнут трудности с реализацией, вы можете посмотреть пример на GitHub или связаться с нами в нашем сообществе разногласий.