В прошлом году мы наблюдали значительный рост использования виртуальных встреч, и существующие платформы не могут удовлетворить индивидуальные потребности каждого. Кроме того, создание собственного многофункционального решения для ваших нужд с нуля — не лучший вариант, поскольку вам нужно управлять множеством задач, и здесь на помощь приходит VideoSDK.live.
С помощью video SDK вы можете создать индивидуальное приложение для видеочата со всеми необходимыми вам функциями. В этом руководстве мы увидим, как создать приложение для видеочата с помощью Javascript.
Предпосылки
- Node.js v12+
- NPM v6+ (поставляется с более новыми версиями Node)
- У вас должна быть учетная запись 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
, поэтому, если у вас его нет, вы можете сгенерировать его здесь.
- Теперь обновите свой токен в файле
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 или связаться с нами в нашем сообществе разногласий.