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

Часть 2: Как реализовать WebRTC с помощью JavaScript и Node.js в Backend

Учебники из этой серии

1. Понимание WebRTC
2. Реализация WebRTC в коде (это руководство)

В предыдущем руководстве мы узнали об основах WebRTC.

Эта статья изначально была опубликована на сайте Simple Coding

В этом руководстве мы узнаем, как реализовать эти концепции в коде и создать веб-сайт для онлайн-видеоконференций.

Живая демонстрация

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

Примечание:-

• В настоящее время веб-сайт поддерживает только 2 человек в комнате.

видео

Вы также можете посмотреть следующее видео, чтобы узнать, как пользоваться этим сайтом.

Требования

Если вы не читали предыдущее руководство, настоятельно рекомендуется прочитать его перед тем, как приступить к этому руководству.

Мы будем использовать следующее: -

• Node.Js (версия 12.14.1) - среда выполнения для JS
• Socket.IO (версия 1.2.0) - для сигнализации в WebRTC
• Express.Js: (версия 4.17.1) - BackEnd Framework
• Редактор кода (рекомендуется Microsoft Visual Studio Code)
• Хороший браузер (рекомендуется Google Chrome)

Мы будем использовать Node.Js с Express.Js Framework для бэкэнда. Если вы не знакомы с Node.Js и Express.Js, но знаете любую другую платформу MVC, НЕ БОЛЬШЕ. Мы постарались объяснить так, чтобы вы могли понять, даже если вы никогда не работали с Node.Js и Express.Js

Шаг 1. Настройка проекта

Начнем с настройки проекта.

Шаг 1.1. Скачать Node.Js

• Вы можете скачать Node.Js для своей платформы, щелкнув ссылку это. При загрузке Node.Js на ваш компьютер автоматически устанавливается NPM (Диспетчер пакетов узлов). NPM - это менеджер пакетов по умолчанию для Node.Js

Шаг 1.2. Создайте проект узла

• Создать новую папку. Эта папка будет корневым каталогом для нашего проекта.
• Откройте в этой папке терминал / CMD и выполните команду npm init.
• Непрерывно нажимайте Enter Key, чтобы пропустить дополнительные конфигурации для проекта, и напишите YES при появлении запроса.
• Это создаст файл package.json в корневом каталоге проекта. Этот файл будет содержать всю необходимую информацию о нашем проекте, такую ​​как зависимости проекта.

Шаг 1.3. Установка зависимостей

• В терминале выполните следующую команду. Он установит зависимости - Express.JS и socket.IO в наш проект.

npm install [email protected] [email protected] --save

• Флаг --save сохранит имя и версии этих зависимостей в package.json для дальнейшего использования.
• После завершения выполнения указанной выше команды вы увидите папку node_modules, созданную в корневом каталоге проекта. Эта папка содержит только что установленные зависимости.

На этом мы закончили настройку проекта. Ниже представлена ​​структура проекта на данном этапе.

Шаг 2. Создание BackEnd

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

• Нам нужен бэкэнд-сервер для сигнализации.
• Определенная информация - информация о кандидате (сетевая) и медиакодеки должны быть обменены между двумя одноранговыми узлами, прежде чем между ними может быть установлено прямое соединение с помощью WebRTC.
• Сигнализация относится к механизму, с помощью которого два одноранговых узла обмениваются этой информацией.

Вышеупомянутые моменты говорят нам, что мы должны реализовать механизм, с помощью которого два клиента (браузера) могут отправлять сообщения друг другу. Для этого воспользуемся Socket.IO. Socket.IO подходит для изучения сигналов WebRTC благодаря встроенной концепции «комнат». Давайте сначала обсудим, что такое Socket.IO

Socket.IO

• Socket.IO состоит из двух частей - client Library & server Library. Очевидно, что client library используется на стороне клиента, а server library используется на стороне сервера.
• Socket.IO помогает реализовать следующее. Допустим, к серверу подключены четыре клиента. Когда сервер получает новое сообщение от одного клиента, он должен уведомить всех остальных клиентов, а также переслать это сообщение другому клиенту. Это похоже на групповой чат.
• В Socket.IO каждое сообщение, отправленное на сервер или полученное с сервера, связано с событием. Итак, если клиент отправляет сообщение на сервер о конкретном событии, сервер пересылает это сообщение только тем клиентам, которые прослушивают это соответствующее событие.
• Есть несколько зарезервированных мероприятий. Однако мы также можем определять пользовательские события. Чтобы узнать о зарезервированных мероприятиях, вы можете перейти по ссылке эта.
• Кроме того, клиенты могут присоединиться к комнате и попросить сервер отправить сообщение только тем клиентам, которые присоединились к определенной комнате.

Теперь, когда мы обсудили Socket.IO, мы можем приступить к реализации внутреннего сервера.

Шаг 2.1. Создайте файл index.js

• В платформе Express index.js по умолчанию является отправной точкой для нашего сервера. Итак, создайте файл index.js на корневом уровне нашего проекта.

Шаг 2.2. Создайте общую папку и папку просмотров

• Создайте следующие папки на корневом уровне нашего проекта
  * public - содержит статические файлы, такие как файлы CSS и JS для внешнего интерфейса
  * views - содержит представления для внешнего интерфейса
• Наш сайт будет содержать только одну страницу. Внутри папки views создайте файл index.ejs, который будет содержать HTML-код для внешнего интерфейса. Экспресс использует ejs в качестве механизма создания шаблонов.
• Структура проекта теперь будет выглядеть следующим образом

Шаг 2.3. Инициализировать Express и HTTP-сервер

• Теперь мы должны инициализировать Express, HTTP-сервер и Socket.IO для нашего бэкэнда. Для этого вставьте следующий код в index.js, расположенный на корневом уровне проекта.

Шаг 2.3. Реализуйте Socket.IO

• Пришло время внедрить Socket.IO в бэкэнд.
• Вставьте следующий код в index.js файл

Итак, теперь мы внедрили бэкэнд нашего сайта. Ниже приведен полный код index.js.

Шаг 3. Создание FrontEnd нашего сайта

Теперь давайте создадим интерфейс нашего веб-сайта.

Шаг 3.1. Создайте файл HTML

• Давайте создадим HTML-файл для нашего интерфейса.
• Мы определим CSS и Javascript для интерфейса в public/css/styles.css и public/js/main.js соответственно. Следовательно, мы должны импортировать эти файлы. В бэкэнде мы явно устанавливаем public в качестве каталога по умолчанию для обслуживания статических файлов. Следовательно, мы будем импортировать файлы из css/styles.css & js/main.js в HTML.
• Мы также импортируем клиентскую библиотеку для socket.io
• Мы также импортируем adapter.js для WebRTC, потому что реализации WebRTC все еще развиваются, и потому что каждый браузер имеет разные уровни поддержки кодеков и функций WebRTC. Адаптер представляет собой прокладку JavaScript, которая позволяет записать ваш код в соответствии со спецификацией, чтобы он просто работал во всех браузерах с поддержкой WebRTC.
• Мы обсуждали серверы STURN / TURN в предыдущих руководствах. Мы импортируем URL-адреса TURN / STUN из public/js/config.js. Мы создадим этот файл позже в этом руководстве.
• Вставьте следующий код в views/index.ejs

Шаг 3.2. Добавьте код CSS

• Мы не объясняем код CSS.
• Вставьте следующий код в public/css/styles.css

Шаг 3.3. Добавьте файл JS

• Теперь давайте добавим JavaScript в наш интерфейс. У нас уже был файл public/js/main.js в index.ejs. Именно в этом файле мы реализуем различные методы использования WebRTC и client library of Socket.IO.
• Между двумя клиентами будет осуществляться обмен множеством сообщений, прежде чем между ними будет установлено прямое соединение. Мы видели это в деталях в предыдущем уроке, когда приводили пример Эми и Бернадетт. Настоятельно рекомендуется прочитать этот пример. Мы просто реализовали каждый шаг, упомянутый в этой статье, с помощью Socket.IO.
• Вставьте следующий код в public/js/main.js

Шаг 3.4. Добавьте URL-адреса STUN / TURN в config.js

• Чтобы сделать этот веб-сайт в реальном мире, мы должны указать конфигурацию TURN / STUN на RTCPeerConnection(). Есть много компаний, которые предоставляют бесплатные серверы STUN / TURN. Мы будем использовать серверы, предлагаемые XirSys.
• Шаги по получению URL-адресов TURN / STUN от XirSys упомянуты в этом файле README.
• Вставьте полученные конфигурации в public/js/config.js
• Вот как будет выглядеть config.js. (URL-адреса будут разными

Поздравляю!

Вы создали веб-сайт для проведения веб-конференций. Чтобы развернуть свой сайт на localhost и протестировать его, выполните следующие действия.

• Откройте терминал в корневом каталоге нашего проекта.
• Выполните следующую команду - node index.js.
• Откройте Google Chrome и посетите localhost:8000. Введите название комнаты (скажем, foo). Вы должны увидеть свое видео.
• Откройте новую вкладку и посетите localhost:8000. Введите то же название комнаты (foo). Теперь вы должны увидеть два видеоэлемента.

Вы можете найти полный код в этом репозитории GitHub.