Создание приложений для видеочата WebRTC

Создание приложений для видеочата WebRTC Программирование и разработка

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

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

Наше внимание будет сосредоточено в основном на SimpleWebRTC как платформе. Позже мы кратко рассмотрим другие коммерческие альтернативы и альтернативы с открытым исходным кодом, которые могут помочь вам добиться того же.

Что такое WebRTC

WebRTC (Web Real Time Communication) — это проект с открытым исходным кодом, который позволяет одноранговую связь в реальном времени между веб-браузерами для потоковой передачи видео, аудио и данных в реальном времени по сети. Современные настольные и мобильные браузеры, такие как Google Chrome, Mozilla Firefox, Safari, Opera и другие браузеры на основе Chromium, уже изначально реализовали эту технологию. Это хорошая новость, поскольку пользователям не нужно устанавливать сторонний плагин или приложение для доступа к технологии.

Более старые версии браузеров и устаревшие браузеры, такие как Internet Explorer, не имеют этой технологии. Пользователям необходимо будет использовать современные браузеры. Вы можете проверить полный список поддерживаемых браузеров :

В январе 2021 года спецификация WebRTC 1.0 была переведена из статуса кандидата в рекомендации консорциумом World Wide Web. Это замечательное достижение, учитывая, что технология была впервые представлена ​​публике 10 лет назад.

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

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

Как работает сигнализация для веб-браузеров

Само определение WebRTC — это одноранговая связь между веб-браузерами. На самом деле большинство браузеров работают на компьютерах, которые работают за устройством NAT (преобразование сетевых адресов) и, возможно, за межсетевой экран. Устройство NAT, обычно это маршрутизатор или модем, позволяет компьютерам с частными IP-адресами подключаться к Интернету через один общедоступный IP-адрес.

Устройства NAT защищают персональные компьютеры от прямого использования злоумышленниками через Интернет через IP-адрес. К сожалению, он также блокирует подключение устройств с частными IP-адресами к другому частному IP-устройству через Интернет.

Для решения этой проблемы инженерной группой Интернета был предложен протокол ICE (Interactive Connectivity Establishment), позволяющий частным IP-компьютерам обнаруживать и подключаться к другим частным компьютерам через общедоступную сеть.

Это предполагает использование общедоступного сервера сигнализации, к которому могут легко подключиться оба клиента. Одноранговые компьютеры подключаются к этому серверу и используют его для обмена IP-адресами и портами, необходимыми для источников и приемников данных. Обладая этой информацией, они могут установить прямое соединение друг с другом и начать потоковую передачу видео, аудио и данных.

Чтобы настроить сигнализацию WebRTC

Чтобы настроить сигнализацию WebRTC, фреймворк ICE требует, чтобы вы предоставили два типа серверов, подробно описанных ниже.

1. Сервер STUN

Сервер STUN (Session Traversal Utilities for NAT) делает именно то, что я только что описал выше. Это просто место для встреч, где компьютеры могут обмениваться контактной информацией. После обмена информацией между одноранговыми компьютерами устанавливается соединение, а затем сервер STUN не участвует в остальной части разговора.

Вот пример сценария, который запускается на клиенте и позволяет браузеру инициировать соединение через STUN-сервер. Сценарий позволяет предоставить несколько URL-адресов серверов STUN в случае сбоя одного из них:

function createPeerConnection() {
  myPeerConnection = new RTCPeerConnection({
    iceServers: [
      {
        urls: "stun:stun.stunprotocol.org",
      },
    ],
  });
}

Соединения, устанавливаемые через серверы STUN, являются наиболее идеальным и экономичным типом связи WebRTC. Пользователи практически не понесут никаких эксплуатационных расходов. К сожалению, соединение может не устанавливаться для некоторых пользователей из-за типа устройства NAT, которое использует каждый одноранговый узел. В такой ситуации протокол ICE требует, чтобы вы предоставили запасной вариант, который представляет собой другой тип сервера сигнализации, известный как сервер TURN.

2. Сервер TURN

ПОВОРОТ (Обход с помощью реле NAT) сервер является расширением сервера STUN. От своего предшественника он отличается тем, что обрабатывает весь сеанс связи.

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

Ниже приведено графическое изображение всего процесса сигнализации, включающего сначала сервер STUN, а затем сервер TURN в качестве запасного варианта:

Ниже приведено графическое изображение всего процесса сигнализации

Создание собственного приложения для видеочата

Хотя можно настроить собственное решение для видеочата, используя простой код JavaScript и бесплатные общедоступные серверы STUN, не все смогут подключаться друг к другу на вашей платформе. Использование серверов TURN обязательно, если вы хотите обеспечить надежный сервис для всех своих пользователей.

Читайте также:  В чем разница между UX и UI?

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

Что такое SimpleWebRTC

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

  • SimpleWebRTC SDK: интерфейсная библиотека
  • Хостинг: серверы STUN / TURN и SFU (Selective Forward Unit)
  • Техническая поддержка
  • Разработка индивидуальных приложений и консультационные услуги по WebRTC
  • Однопользовательская и локальная инфраструктура
  • Talky : бесплатное приложение для видеочата, полностью построенное на SimpleWebRTC

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

Ниже приведены примеры снимков экрана некоторых пользовательских проектов видеочатов

Фото: Talky

Ниже приведены примеры снимков экрана некоторых пользовательских проектов видеочатов2

Фото: приложение для веб-обучения

Основные сервисы WebRTC, предоставляемые платформой SimpleWebRTC, включают:

  • безопасная потоковая передача видео, голоса и совместного использования экрана
  • сквозное шифрование
  • поддержка до 30 одновременных пользователей
  • неограниченное количество комнат

Что касается цен, они предлагают следующие планы :

  • Малая группа: до 6 участников, от 5 долларов в месяц
  • Большая группа: до 30 участников, от 3 долларов в месяц.

Преимущество плана для малых групп заключается в том, что по сравнению с планом для больших групп доступно сквозное шифрование. При использовании плана для малых групп 60–80% сеансов являются одноранговыми соединениями, при которых потоки мультимедиа никогда не касаются серверов. Потребление полосы пропускания для таких типов сессий не взимается.

В тарифных планах для больших групп трафик маршрутизируется через сервер, называемый SFU (Selective Forwarding Unit), где измеряются все потоки.

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

Предпосылки

Клиентская библиотека SimpleWebRTC зависит от React и экосистемы Redux. Вам необходимо обладать фундаментальными навыками в следующих областях:

  • React
  • Redux
  • Asynchronous Redux Libraries — such as Redux Thunk, Redux Saga and Redux Observables

Будущие версии SDK SimpleWebRTC будут включать поддержку других фреймворков, таких как React Native, Angular, Flutter и Vue.js. Также есть планы по выпуску решения для видеочата «без кода», которое позволит пользователям автоматически развертывать собственную фирменную версию Talky.

Создание учетной записи

Перейдите на страницу регистрации simplewebrtc.com и зарегистрируйте новую учетную запись. Вам будет предоставлено 2 ГБ полосы пропускания плюс еще 3 ГБ, если вы подпишетесь на их информационный бюллетень. Этого допуска должно быть достаточно для разработки и тестирования вашего приложения для видеочата.

Перейдите на страницу регистрации simplewebrtc.com и зарегистрируйте новую учетную запись

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

С помощью этого ключа API вы можете начать создавать собственное приложение

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

Сборка и запуск примера приложения

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

Затем вам необходимо установить как минимум следующие зависимости Redux:

npm install redux redux-thunk react-redux

Наконец, установите клиентскую библиотеку, предоставленную SimpleWebRTC:

npm install @andyet/simplewebrtc

После установки пакета вам необходимо обновить index.jsфайл следующим образом:

import { Provider } from "react-redux";
import React from "react";
import ReactDOM from "react-dom";
import * as SWRTC from "@andyet/simplewebrtc";

// ====================================================================
// IMPORTANT SETUP
// ====================================================================
// Replace `YOUR_PUBLISHABLE_API_KEY` here with the Publishable API Key
// you received when signing up for SimpleWebRTC
// --------------------------------------------------------------------
const API_KEY = "YOUR_PUBLISHABLE_API_KEY";
// ====================================================================

const ROOM_NAME = "YOUR_ROOM_NAME";
const ROOM_PASSWORD = "YOUR_ROOM_PASSWORD";
const CONFIG_URL = `https://api.simplewebrtc.com/config/guest/${API_KEY}`;

const store = SWRTC.createStore();

ReactDOM.render(
  <Provider store={store}>
    <SWRTC.Provider configUrl={CONFIG_URL}>
      {/* Render based on the connection state */}
      <SWRTC.Connecting>
        <h1>Connecting...</h1>
      </SWRTC.Connecting>

      <SWRTC.Connected>
        <h1>Connected!</h1>
        {/* Request the user's media */}
        <SWRTC.RequestUserMedia audio video auto />

        {/* Enable playing remote audio. */}
        <SWRTC.RemoteAudioPlayer />

        {/* Connect to a room with a name and optional password */}
        <SWRTC.Room name={ROOM_NAME} password={ROOM_PASSWORD}>
          {(props) => {
            /* Use the rest of the SWRTC React Components to render your UI */
          }}
        </SWRTC.Room>
      </SWRTC.Connected>
    </SWRTC.Provider>
  </Provider>,
  document.getElementById("app")
);

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

Вместо этого мы рассмотрим полный пример проекта, который вы можете загрузить с GitHub, где вы сможете увидеть, как все это собрано воедино. После загрузки вам необходимо будет ввести свой ключ API public/index.html, как показано ниже:

<!DOCTYPE html>
<htmllang="en">
  <head>
    <!-- IMPORTANT SETUP -->
    <!-- Change the YOUR_API_KEY section of the config URL to match your API key -->
    <metaname="simplewebrtc-config-url"
      content="https://api.simplewebrtc.com/config/guest/<PLACE YOUR API KEY HERE>"
    />
  </head>
  <body>
    ...
  </body>
</html>

Ниже приведены пошаговые инструкции по настройке примера приложения:

# Download sample app to your workspace
git@github.com:simplewebrtc/simplewebrtc-talky-sample-app.git

# Install Package dependencies
cd simplewebrtc-talky-sample-app
npm install

# Edit public/index.html as described above

# Start the dev server
npm start

Браузер должен открыться автоматически localhost:8000. Настройка видеочата состоит из трех основных этапов:

  1. укажите название комнаты
  2. разрешить процесс камеры и микрофона
  3. присоединяйся к звонку
Читайте также:  Как спланировать проект программирования за 8 простых шагов

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

осле того, как вы выполните вышеуказанные шаги

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

Развертывание

Для развертывания simplewebrtc-talky-sample-appвам необходимо запустить команду npm run build. Это создаст distпапку. Скопируйте содержимое этой папки и загрузите через FTP на свою платформу веб-хостинга. Вы также можете использовать такую ​​службу, как Netlify, для размещения приложения для вас. Однако процесс развертывания отличается. Вам необходимо сделать следующее:

  1. Разветвите или загрузите в simplewebrtc-talky-sample-appсвою учетную запись GitHub. Убедитесь, что вы указали htmlсвой ключ API.
  2. Перейдите на панель управления Netlify, нажмите » Новый сайт из Git», выберите GitHub, авторизуйте Netlify для доступа к вашей учетной записи GitHub, а затем найдите и выберите свой simplewebrtc-talky-sample-appрепозиторий.
  3. На странице настроек сборки, убедитесь, что команда сборкиявляется npm run buildи опубликовать каталог является dist. Нажмите кнопку » Развернуть сайт«.

Через несколько минут Netlify загрузит исходный код, установит зависимости, выполнит команду сборки и развернет ее в уникальном поддомене на своей платформе. Отсюда вы можете поделиться этим URL-адресом с любым человеком в мире, с которым хотите пообщаться в видеочате.

Альтернативы SimpleWebRTC

Как и было обещано, мы закончим с некоторыми альтернативами SimpleWebRTC.

Daily

Daily.co — это альтернативная коммерческая платформа, которая предоставляет разработчикам видео API в реальном времени. Это самый простой процесс настройки, если вы хотите быстро разместить собственное приложение webRTC. Все, что вам нужно сделать, это зарегистрировать учетную запись и приобрести уникальный поддомен на своей платформе.

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

После настройки комнаты вы можете создать HTML-файл и скопировать следующий код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <script src="https://unpkg.com/@daily-co/daily-js"></script>
    <script>
      callFrame = window.DailyIframe.createFrame();
      callFrame.join({ url: "https://you.daily.co/hello" });
    </script>
  </body>
</html>

В callFrame.join({ url: «https://you.daily.co/hello» })строке вам нужно заменить youна свой поддомен и helloимя вашей комнаты. Вы можете открыть страницу локально в своем браузере, и у вас будет возможность совершать видеозвонки. Однако вам необходимо разместить эту страницу на общедоступном сервере, чтобы другие пользователи могли связываться с вами.

Вышеупомянутая установка выполняется быстро и быстро, если вам нужно связаться с удаленной командой. Однако, если вам нужно создать настраиваемое приложение для видеочата с вашим собственным брендом или с настраиваемыми интерфейсными функциями, вам необходимо использовать интерфейсную библиотеку daily-js :

npm install @daily-co/daily-js

Для работы с этой библиотекой вашему приложению потребуется такой пакет, как webpack или Rollup. К сожалению, пользователям Vite и Parcel не повезло. В их репозитории GitHub есть полный образец приложения React, который вы можете проверить. Есть инструкции о том, как настроить приложение и как развернуть его в Netlify.

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

Другие альтернативы

Есть много других альтернатив SimpleWebRTC и Daily, которые я перечислю далее. К коммерческим относятся:

  • Xirsys
  • Twilio
  • Vonage
  • Frozen Mountain

Twilio, Vonage и Frozen Mountain предоставляют разработчикам интерфейсные библиотеки и внутренние серверы, необходимые для создания и запуска решения для видеочата в реальном времени. Xirsys предоставляет только внутренние серверы, то есть серверы STUN и TURN. Вам нужно будет использовать библиотеку с открытым исходным кодом, такую ​​как PeerJS, чтобы клиентская библиотека могла подключиться к ней.

В Интернете доступно множество библиотек WebRTC с открытым исходным кодом. Однако большинство из них активно не поддерживается, за исключением следующего:

  • PeerJS
  • Open EasyRTC

Руководствуясь этим руководством по Google Codelabs, вы можете использовать простой JavaScript и несколько библиотек Node.js для создания простого приложения для видеочата. Однако есть много крайних случаев, не охваченных руководством, которые вам придется решить самостоятельно.

Заключение

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

Ключевой вопрос, который стоит задать себе, — стоит ли тратить время на создание собственного индивидуального решения в реальном времени. Если вы не планируете сделать WebRTC своим основным бизнесом, вам, вероятно, сначала потребуется проконсультироваться с компанией, у которой есть опыт работы с этой технологией.

Оцените статью
bestprogrammer.ru
Добавить комментарий