Демистификация WebRTC — Настройка проекта

Давайте создадим приложение для видеочата и обмена файлами

Установить связь в режиме реального времени немного сложно. Как упоминалось в предыдущей статье, не существует стандартного метода сигнализации для подключения пиров. Мы можем использовать WebSockets или промежуточное приложение, такое как WhatsApp или Discord. Выбор за нами. Кроме того, чистой сигнализации недостаточно. Есть много вещей, которые нужно учитывать, чтобы установить соединение WebRTC.

Начиная с этой статьи, мы будем создавать приложение под названием Magny. Magny — это демонстрационный проект, призванный показать, на что способен WebRTC. Он имеет три основных функции:

• Видеозвонок
• Текстовый чат
• Передача файла

Magny — это веб-проект, поэтому для его разработки мы будем использовать Node.JS. Его фреймворком будет Vite, инструмент сборки, разработанный для современных веб-проектов. Вместо Javascript будет использоваться TypeScript, так как он обладает многими современными функциями и может обеспечить модульный проект, который легче исследовать. Без лишних слов давайте настроим нашу среду разработки.

Настраивать

Прежде чем мы начнем, убедитесь, что в вашей системе установлен Node.JS. Если он не установлен, вы можете установить его отсюда. Если вы новичок, было бы идеально установить версию LTS.

Когда Node.JS готов, давайте создадим наш проект. Откройте свой терминал и перейдите в папку, в которой вы хотите создать свой проект.

npm create vite@latest

Эта команда запросит у вас имя проекта. Мы назвали его magny . Затем вам будет предложено выбрать фреймворк и вариант. Выберем vanilla фреймворк и vanilla-ts вариант. После этого наш проект создан. Перейдите в папку проекта и установите необходимые пакеты узла:

cd magny
npm install

Перед запуском проекта давайте откроем проект в редакторе кода. Мы будем использовать код Visual Studio. Поскольку нам может понадобиться запустить наш проект на разных устройствах, измените package.json следующим образом:

Добавив флаг --host в сценарий разработки, мы можем получить доступ к проекту с нашего телефона, если компьютер и телефон подключены к одной сети. Чтобы увидеть наш проект:

npm run dev

Вы увидите, что ваш проект запущен, и терминал предоставит вам два URL-адреса для просмотра вашего проекта. Вы можете перейти на локальный хост или IP-адрес локальной сети вашего устройства. Однако браузер не позволит вам получить доступ к устройству камеры, если вы протестируете приложение в локальной сети IP. Это связано с тем, что локальная сеть не обеспечивает подключение с помощью SSL, а браузер не разрешает доступ к устройству при небезопасных подключениях. Мы будем тестировать приложение на разных устройствах, когда будем развертывать его в Netlify.

Если вы посмотрите на проект, вы увидите шаблон, предоставленный Vite. Так как нам нужен чистый лист, удалите counter.ts и typescript.svg. Чтобы разместить иконки на кнопках, нам понадобится Font Awesome Kit. Зарегистрируйтесь в Font Awesome, и они отправят вам ваш набор по электронной почте. Вам просто нужно поставить комплект перед закрывающим тегом body.

Поскольку мы сосредоточимся на WebRTC, я заранее подготовил пользовательский интерфейс. Вы можете клонировать его из ветки Github ниже:

Как видно из рисунка выше, мы стремимся установить видеочат с удаленным узлом. Процесс будет очень простым. Сначала мы запустим нашу веб-камеру, и это также создаст файл RTCPeerConnection . Совершив звонок, приложение создаст кандидатов SDP и ICE и загрузит их в базу данных Firestore. Нам нужно только доставить идентификатор вызова удаленному узлу. Удаленный узел вставит идентификатор вызова и ответит на вызов. Продолжим создание локального подключения.

Создание однорангового соединения и потоков

Во-первых, нам нужно создать одноранговое соединение и создать некоторую информацию для подключения к удаленному одноранговому узлу. Идите вперед и создайте файл с именем connect.ts . Вы заметите, что файл выдает ошибку, как только он создается. Это связано с тем, что в этом варианте Vite есть система, в которой компилируется только файл main.ts. Другие файлы TypesScript являются своего рода файлами классов, и они должны экспортировать простые переменные или функции.

Перед установкой соединения нам нужно инициализировать новый RTCPerConnection, который предоставляется парой STUN-серверов. Мы можем использовать много серверов STUN, но мы продолжим использовать серверы, предоставленные Google. iceCandidatePoolSize позволяет нам создавать кандидатов ICE еще до создания предложения. Сколько ICE-кандидатов мы получим, зависит от содержимого соединения. В этом случае мы добавим дорожки камеры к нашему соединению и заранее получим пару кандидатов ICE. Говоря о камерах, давайте добавим и наше видео, и видео удаленного партнера.

Первая функция начнет получать видео с нашей веб-камеры. Мы включаем как видео, так и аудио. Получив поток с нашей веб-камеры, мы можем перебрать его методом getTracks(). Метод getTracks() даст нам пару треков, поступающих из потока веб-камеры. Мы будем повторять это и добавлять каждый из них в наш peerConnection, чтобы потоки отправлялись на удаленный узел.

Поскольку мы будем тестировать приложение на нашем локальном устройстве, было бы неплохо изменить audio на false, иначе это вызовет эхо.

Вторая функция получает поток удаленного узла. Мы слушаем треки с peerConnection . Мы добавляем каждую дорожку в remoteStream, которая будет отражать видео и аудио в remoteVideo. Теперь приложение должно выглядеть так, когда мы нажимаем кнопку «Запустить веб-камеру».

Мы сделали первый шаг для установления соединения, открыв трассу между пирами. Чтобы связать эти треки, нам нужно подать сигнал удаленному узлу. В нашей предыдущей статье мы сигнализировали удаленному узлу путем копирования и вставки. Однако это решение было бы далеко не идеальным, поскольку нам нужно, чтобы пользователь открывал консоль. Вместо того, чтобы получать весь SDP, мы будем хранить эти объекты SDP и кандидатов ICE в базе данных. Удаленный узел будет получать учетные данные из базы данных. Единственное, что нам нужно отправить, это идентификатор звонка, который состоит из вариантов предложения и ответа. Для этого мы будем использовать базу данных Firestore Firebase.

Создайте и импортируйте проект Firebase

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

После того, как вы вошли в систему, войдите в консоль, нажав на указанную кнопку. Он должен быть в правом верхнем углу. В консоли вы увидите свои проекты (если они есть) и некоторые опции, например демо-проекты. Мы будем создавать новый проект с нуля. Нажмите «Добавить проект».

Для первого шага давайте назовем наш проект «magny». Вы можете назвать его как хотите. Нет такого ограничения, как «это имя занято», потому что Firebase назначит идентификатор для каждого проекта, чтобы каждый из них был уникальным, даже если они имеют одинаковое имя.

На втором этапе вас спросят, хотите ли вы включить Google Analytics для этого проекта. Было бы неплохо включить его, если вы хотите улучшить этот проект. Обратите внимание, что Google Analytics выходит за рамки этого руководства. Если вы включите его, Firebase попросит вас выбрать учетную запись для Analytics. На данный момент достаточно выбрать учетную запись по умолчанию. После выполнения этого шага дождитесь создания проекта, это должно занять несколько секунд.

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

Идите вперед и зарегистрируйте свое приложение с псевдонимом. Мы снова назвали его «magny». На данный момент нет необходимости в хостинге Firebase, но его можно использовать для развертывания нашего приложения, когда мы его завершим.

Подождав пару секунд, пока приложение зарегистрируется, вы увидите некоторые учетные данные для вашего приложения. firebaseConfig будет очень важным, так как наше приложение будет получать доступ к базе данных, используя эти учетные данные. Если вы хотите снова увидеть эти учетные данные, перейдите на главную страницу консоли и нажмите «Настройки проекта».

Здесь вы найдете свои приложения, если прокрутите вниз.

Мы будем использовать npm для получения необходимого SDK. Прежде чем сделать это, нам нужно создать базу данных Firestore.

Перейдите на главную страницу консоли. Вы можете создать Firestore либо из левой панели, либо из поля в середине страницы. Нажмите на любой из них и нажмите кнопку «Создать базу данных».

Поскольку в процессе разработки мы будем много раз тестировать приложение, создайте базу данных в тестовом режиме. Тестовый режим разрешает все запросы на чтение/запись, если учетные данные верны.

В тестовом режиме будут разрешены только запросы, сделанные в течение 30 дней. Через 30 дней вам необходимо изменить правила безопасности, чтобы получить доступ к своим данным.

Наконец, выберите местоположение облака. Есть много вариантов. Выберите ближайший к вам. Выбор местоположения в нескольких регионах был бы идеальным, поскольку они имеют самую широкую поддержку в Firebase.

Результат будет выглядеть следующим образом. Мы закончили с консолью Firebase. Мы будем добавлять коллекции прямо из нашего приложения. Вернемся к нашему приложению.

Для более модульной структуры скопируйте функции камеры в новый файл с именем camera.ts. Чтобы использовать peerConnection, экспортируйте его и импортируйте в camera.ts. Вы можете проверить состояние приложения в ветке ниже:

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

До скорого…