Начало работы с JavaScript SDK Twilio Video

**Код в этой статье устарел, поскольку наш Video SDK находился в бета-версии и обновлен с момента написания этого сообщения. Вместо этого обратитесь к этому руководству, если вам нужна помощь с использованием Twilio Video.**

Twilio Video упрощает создание многопользовательских видеочатов и сводит к минимуму сложный код WebRTC. В документации Twilio есть подробное руководство, которое поможет вам создать готовое к производству приложение для видеосвязи, но мы создадим более простое JavaScript-приложение, чтобы как можно быстрее начать работу.

Если вам нужен только код, вы можете найти его в этом репозитории. Перед запуском этого кода вам необходимо создать бесплатную учетную запись Twilio.

Наше приложение будет иметь две веб-страницы: одну для вас (`local.html`) и одну для другого участника разговора (`remote.html`).

Для начала создайте и откройте файл с именем `local.html` и добавьте следующее:

Эта страница включает div для каждого участника, а также клиентский код для видеочатов Twilio. Нам также понадобится небольшой JavaScript для приема приглашений к разговору и для прикрепления медиа каждого участника к этим div.

Создайте файл с именем `inviteAccepted.js`, который будет содержать одну функцию, используемую обеими страницами для прикрепления удаленных и локальных медиа к соответствующим div:

Функция `onInviteAccepted` вызывается при получении приглашения начать видеочат. Она принимает разговор и прикрепляет медиа участников к их соответствующим элементам на странице.

Теперь давайте напишем код для «локального» участника. Создайте файл с именем `local.js` и добавьте в него следующий код:

В приведенном выше блоке кода мы объявляем переменные, которые нам нужны для использования API Video. Токен доступа мы сгенерируем на вашей панели управления Twilio на следующем шаге. Он передается в `AccessManager`, который обновляет наш токен в любое время и распространяет изменения через любой из поддерживаемых SDK Twilio, инициализированных в приложении. В последнем разделе мы создаем экземпляр клиента для разговоров и слушаем приглашения, которые мы будем автоматически принимать.

Создайте вторую страницу для удаленного участника. Это будет другая сторона разговора.

Создайте и откройте файл с именем `remote.html` и добавьте этот код:

Это идентично `local.html`, за исключением того, что используется другой JavaScript-файл с именем `remote.js`, который автоматически приглашает другого участника к разговору.

Создайте еще один JavaScript-файл с именем `remote.js` и добавьте в него следующий код:

Наш код написан, и мы почти готовы протестировать наше приложение. К этому моменту в вашем каталоге должны быть следующие файлы:

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

Вы можете использовать любое удостоверение, которое вам нравится. Для первого я выберу «localSam», а для второго «remoteSam». Вам также потребуется заменить удостоверение в строке 5 `remote.js` на то, которое вы использовали для генерации первого токена.

Скопируйте и вставьте эти токены доступа в `local.js` и `remote.js`, как показано на GIF выше.

Вам понадобится очень простой HTTP-сервер, работающий на вашей машине, чтобы этот код работал. Я использую модуль npm под названием ws, но если у вас установлен Python, вы также можете просто выполнить эту команду из каталога, где находится ваш код:

Посетите localhost:8000, откройте `local.html` в вашем веб-браузере, а затем откройте `remote.html` в другом окне браузера. Как только `remote.html` загрузится, JavaScript-код пригласит другой клиент к разговору. Как видно на GIF ниже, вы увидите себя дважды на каждой странице.

Теперь у вас есть простое JavaScript-приложение, работающее с Twilio Video, которое вы можете использовать как основу для создания приложения, подобного Skype, или интеграции видеочата в другой ваш проект.

Вам следует попробовать написать веб-сервер для генерации токенов доступа вместо ручного создания. Руководство по JavaScript SDK рассматривает это и многое другое для приближения к готовому к производству решению.

Не стесняйтесь обращаться, если у вас есть вопросы или комментарии, или вы просто хотите похвастаться тем, какие классные вещи вы создали:

— Электронная почта: sagnew@twilio.com

— Twitter: @Sagnewshreds

— Github: Sagnew

— Twitch (стриминг живого кода): Sagnewshreds