Привет! Эта запись в блоге посвящена старой предрелизной версии Twilio Video SDK, поэтому приведённый ниже код, скорее всего, уже не будет работать. Чтобы получить самую актуальную информацию, ознакомьтесь с кратким руководством по Twilio Video на выбранном вами языке программирования.
Если изображение стоит тысячи слов, то сколько стоит видео? Миллион? Или больше? Именно этот вопрос мы предлагаем разработчикам, таким как вы, решить с помощью Twilio Video, ограниченная бета-версия которого была представлена на конференции Signal. Twilio Video позволяет легко соединять пользователей, фиксируя каждое движение, стон и смех в высококачественном одноранговом видеочате, построенном на базе стандартных технологий, таких как WebRTC.
Однако Twilio Video — это не только серверная инфраструктура и значительное сокращение объёма кода для создания видеоприложений с использованием WebRTC. Новые SDK от Twilio обеспечивают кроссплатформенные видеозвонки между веб-клиентами и нативными мобильными приложениями (изначально поддерживаются iOS и Android), а также кроссплатформенное использование API, таких как канал данных WebRTC, который позволяет передавать произвольные данные между клиентами (например, чат/IP-мессенджер или демонстрацию экрана). Кроме того, у вас будет серверный контроль над беседами с помощью мощного REST API, что позволит разумно управлять клиентским опытом из бэкенд-кода при необходимости.
Миссия Twilio — дать разработчикам возможность навсегда изменить способы общения в мире, и мы считаем, что эта технология — важный шаг на этом пути. Нам не терпится увидеть, что вы создадите с помощью Twilio Video.
В этом руководстве мы покажем, как начать работу с Twilio Video в настольных браузерах, поддерживающих WebRTC (подойдут последние версии Chrome и Firefox). Мы продемонстрируем серверный код, который потребуется для обеспечения работы видео (спойлер: его не так много), и многие JavaScript API, которые будут доступны для создания коммуникационного опыта в браузере. Звучит заманчиво? Тогда приступим!
— Учётная запись Twilio и доступ к бета-программе Video (для всех участников Signal!)
— Установленный Node.js для необходимых серверных компонентов (в этом примере мы используем Node.js, но вспомогательные библиотеки Twilio доступны также на C#, Java, Ruby, PHP и Python)
— Браузер с поддержкой WebRTC — подойдут последние версии Chrome и Firefox
— Базовое приложение для видеозвонков с двумя участниками в браузере
— Бэкенд для генерации токенов доступа с использованием вашей учётной записи Twilio
Давайте начнём!
Большая часть функционала Twilio Video реализуется в браузере, поэтому начнём именно здесь! Создадим одну HTML-страницу, которая станет нашим приложением для видеозвонков. Эта страница будет обслуживаться вашим веб-приложением в неизменном виде, а с небольшим количеством JavaScript и CSS станет полноценным интерфейсом для этого примера.
В директории статических ресурсов нашего приложения есть файл «index.html». Нам понадобятся два блока интерфейса: один для ввода имени пользователя (которое позволит другим пользователям звонить ему по этому имени) и другой для принятия или инициации исходящего видеозвонка.
Вот разметка, необходимая для ввода имени пользователем.
А вот разметка для интерфейса видеозвонка, который изначально скрыт.
JavaScript SDK от Twilio будет вставлять HTML5-видеоэлементы в целевые div-элементы — #me для вашего локального видеопотока и #you для удалённого участника.
В целом разметка (плюс немного CSS) для интерфейса выглядит так.
Теперь мы готовы написать JavaScript-код, который обеспечит работу видеозвонка.
Следующий компонент, который вам понадобится, — это Twilio JavaScript SDK. Этот файл необходимо загружать с CDN, управляемого Twilio. API WebRTC, на которых построены наши инструменты, развиваются очень быстро, и загрузка JS SDK с нашего CDN гарантирует, что у вас всегда будет код, совместимый с последними обновлениями.
Мы подключаем JS SDK с помощью тега script под разметкой интерфейса, но выше закрывающего тега
, вот так:
Далее мы подключаем версию jQuery с CDN, чтобы упростить обработку событий и манипуляции с DOM:
Затем мы создаём тег script, который будет содержать код для управления нашим интерфейсом. Первое, что нам нужно сделать, — это позволить пользователю указать имя, по которому его смогут найти другие пользователи. Это имя является уникальным адресом объекта, который мы называем «Endpoint» в API. Endpoint — это человек или сущность, которая может участвовать в «Conversation» — общем канале связи между несколькими Endpoint. Endpoint может быть браузерным клиентом, как тот, который мы создаём, стационарным телефоном в сети PSTN или приложением для iPad, использующим iOS SDK от Twilio.
Чтобы позволить пользователю указать своё уникальное имя, мы предусмотрели текстовое поле и кнопку в простом интерфейсе формы в нашей разметке. Начнём с привязки обработчика событий к нажатию кнопки вот так.
Когда кнопка нажата, нам нужно создать Endpoint с именем, введённым пользователем. Для этого мы используем конструктор «Twilio.Endpoint» вместе с защищённым токеном доступа, который позволит нашему браузерному клиенту взаимодействовать с Twilio. Этот токен нужно генерировать на сервере, а не в браузере, поэтому мы получим его через Ajax-запрос. Мы рассмотрим этот серверный код чуть позже, но сейчас просто знайте, что он генерирует одноразовый токен для клиента с нашим уникальным именем, чтобы позволить браузеру взаимодействовать с Twilio.
Вот весь код инициализации.
В конце обработчика клика мы передаём созданный Endpoint в функцию «init», которая настроит интерфейс видеозвонка. Давайте посмотрим, как это работает.
После создания нашего endpoint нам нужно настроить его для приёма входящих видеозвонков, а также для инициации исходящих звонков любому другому пользователю. Этот процесс начинается в функции «init», которую мы использовали ранее, — рассмотрим её ключевые шаги.
Первым делом нужно зарегистрировать обработчик событий для входящих звонков через событие «invite».
Этот обработчик событий получает объект «Invitation», который в данном случае мы сразу принимаем (вы также можете отклонить его). Функция «accept» запускает асинхронный процесс подключения вашего браузера к другому клиенту и уведомляет вас о завершении этого процесса с помощью промиса. Когда беседа установлена, мы передаём функцию «showConversation», которая отвечает за отображение видеопотоков беседы в нашем интерфейсе. Мы рассмотрим, как это работает, чуть позже.
Следующее, что нам нужно сделать для инициализации интерфейса звонков, — это привязать обработчики событий для инициации звонка пользователем.
Когда нажимается кнопка #call, мы создаём новую Conversation между нашим endpoint и другим endpoint с именем, введённым пользователем в поле #other-name. Как и при принятии звонка, мы указываем «showConversation» в качестве колбэка, когда наш браузер подключается к вызываемому человеку.
Наконец, нужно указать нашему endpoint начать прослушивание входящих звонков:
«listen» также возвращает промис, но для краткости мы опускаем колбэк-функцию для его обработки. Всё всегда работает с первого раза, верно? Верно?
В целом функция init выглядит так:
Теперь наше приложение готово как принимать, так и совершать звонки. Следующее, что нам нужно сделать, — это отобразить видеопотоки, связанные со звонком, что происходит в функции «showConversation», которую мы рассмотрим далее.
Функция «showConversation» выполняет две задачи: прикрепляет локальный медиапоток (видео с вашей веб-камеры) и удалённый поток (видео с другого участника) к элементам интерфейса. Это делается с помощью функций «attach», которые принимают селектор элемента, к которому будет добавлен тег video с потоками.
Вот как это выглядит:
Теперь весь наш фронтенд-код (в одном HTML-файле) выглядит так:
На этом фронтенд готов, но помните тот токен, который мы получали с сервера через Ajax? Он не сгенерируется сам собой, поэтому давайте перейдём к серверному коду и посмотрим, что нужно сделать для его генерации.
В этом примере наше бэкенд-приложение — это простое веб-приложение на Node.js с использованием популярного фреймворка Express. Мы используем его минимально: создаём HTTP-сервер и настраиваем Express для обработки входящих запросов. Также мы используем встроенное промежуточное ПО Express для обслуживания статических ресурсов (HTML, CSS, JavaScript) из папки «public» нашего приложения. Это позволит отправлять «index.html» в браузер, когда пользователь посещает корневой URL приложения.
Мы определяем только один маршрут, который будет запрашиваться через Ajax из браузера. Этот маршрут генерирует токен доступа, необходимый для взаимодействия нашего браузерного кода с Twilio. Он также инициализирует наше приложение, используя REST API Twilio для генерации защищённой пары ключей, которую мы используем для подписи токена доступа, отправляемого в браузер.
Вот весь наш серверный код:
Большая часть логики генерации токена находится в модуле «token.js», который экспортирует две функции. Функция «initialize» получает ключи, которые мы используем для подписи токена. Функция «generateToken» генерирует защищённую строку токена, которую мы отправляем в браузер.
Вызов «initialize» происходит только один раз при запуске, после чего заполняются переменные уровня модуля SIGNING_KEY_SID и SIGNING_KEY_SECRET. Они понадобятся нам для создания токена. Сейчас мы не будем углубляться в этот код — в конечном итоге вы сможете создавать и сохранять эти значения в личном кабинете, что, вероятно, будет проще, чем использовать REST API для их создания.
На чём мы остановимся подробнее, так это на коде, который генерирует токен доступа для браузера. В конечном итоге этот код вернёт JSON Web Token (JWT), сериализованный в строку, которую мы включим в ответ на маршрут «/token». Давайте посмотрим, какой код нам нужно написать для этого.
Сначала нам нужно создать новый токен доступа — это вспомогательный объект, который поможет нам создать JWT. В этот конструктор нужно передать SID ключа подписи из нашей функции «initialize» (SIGNING_KEY_SID) и ваш Account SID из Twilio (его можно найти в панели управления).
Далее нам нужно настроить генерируемый токен так, чтобы он имел уникальное имя Endpoint и разрешение как принимать, так и отправлять приглашения в беседу:
Нам также нужно предоставить нашему браузерному клиенту возможность создавать токены NAT-траверса для помощи в соединении браузеров по принципу peer-to-peer:
Наконец, мы подписываем и генерируем строковое представление токена:
В целом функция generateToken выглядит так:
Вот и всё! Теперь вы готовы начать совершать и принимать видеозвонки в браузере.
Видео — это первый шаг на долгом пути к открытию масштабируемых IP-коммуникаций для каждого разработчика в каждом приложении. С помощью видео вы сможете соединять своих пользователей в насыщенных беседах, где по проводам передаётся больше эмоций и смысла, чем это возможно в голосовом звонке.
В скором времени вы сможете создавать кроссплатформенные взаимодействия такого рода, соединяя приложения для iOS, Android и веб без швов с использованием одной и той же инфраструктуры. Нам не терпится увидеть, что вы создадите! Пишите нам на help@twilio.com с любыми вопросами, и мы с удовольствием поможем.
