Начало работы с общением в режиме реального времени с открытым исходным кодом
Если вы еще не слышали, WebRTC - это способ получения и обмена видео, аудио и другими данными пользователей в режиме реального времени. Расшифровка веб-коммуникация в реальном времени, это первая в своем роде - с API JavaScript для получения мультимедийных данных пользователя, создания одноранговых соединений и открытия каналов данных прямо в браузере. До выпуска WebRTC в 2011 году для выполнения этих задач требовалось несколько разработчиков и много C #.
Теперь, почти 10 лет спустя, WebRTC стал стандартом для обмена мультимедийными данными в Интернете и на мобильных устройствах. Стандартизованный Консорциумом World Wide Web (W3C) и Инженерной группой Интернета (IETF), он имеет встроенную поддержку HTML5, имеет открытый исходный код и полностью бесплатен. Все это означает, что вы можете начать использовать его сегодня, не устанавливая никаких плагинов или пакетов.
В этом посте я расскажу вам об API, которые позволяют WebRTC выполнять всю эту работу, и предоставлю несколько простых фрагментов кода, чтобы вы познакомились с типами данных и с тем, как начать их использовать.
Примечание: с WebRTC много чего происходит, особенно с одноранговыми соединениями и каналами данных. Я буду давать ссылки повсюду, чтобы узнать больше об этих инструментах, их контекстах и некоторых конфигурациях, необходимых для их использования.
Три API WebRTC
WebRTC использует три JavaScript API:
MediaStreamилиgetUserMedia- позволяет разработчикам получать доступ к пользовательским медиапотокам: веб-камере, микрофону и экрану (разумеется, с разрешения пользователя).RTCPeerConnection- разрешает аудио- и видеосвязь между пользователями через одноранговые соединения.RTCDataChannel- использует одноранговое соединение для обеспечения обмена любыми другими общими данными между пользователями в реальном времени.
MediaStream
MediaStream лежит в основе возможностей WebRTC для совместного использования видео / аудио / экрана. Начать пользоваться этим невероятно легко. Поскольку этот API уже доступен в браузере, вам просто нужно позвонить в getUserMedia:
Как видите, он находится в глобальном объекте navigator как метод на mediaDevices. Передайте несколько аргументов, чтобы получить конкретный носитель, который вы хотите - здесь мы получаем как видео, так и аудио от пользователя, без каких-либо ограничений на размер видео или аудио, частоту кадров, соотношение сторон и т. Д. Подробнее о пользовательских медиа-ограничениях на MDN ».
getUserMedia возвращает обещание с медиапотоком этого пользователя, который представляет собой объект, который выглядит следующим образом:
В прототипе вы видите, что у этого потока есть доступ к множеству удобных методов, таких как getAudioTracks и getVideoTracks, которые можно использовать в нашем потоке для дальнейшей обработки и потенциально манипулирования мультимедиа (см. API веб-аудио для идей о том, что вы можете делаю со звуковой дорожкой).
Получив доступ к этому медиапотоку, мы также можем отобразить его с помощью тега <video> в нашем HTML. Однако вы собираетесь сохранить возвращенный поток в своем коде, просто укажите это место в атрибуте ref: <video ref={usersSavedMediaStream} />.
Узнайте больше об использовании MediaStream и getUserMedia в Flavio Copes.
RTCPeerConnection
Итак, у нас есть медиафайлы пользователя, но как нам поделиться ими? Введите одноранговое соединение. RTCPeerConnection представляет собой соединение между компьютером локального пользователя и компьютером удаленного однорангового пользователя с методами для подключения, поддержания и закрытия соединения. Вы можете установить одноранговое соединение, создав новый экземпляр RTCPeerConnection и передав свои конфигурации:
Конфигураций может быть много, но единственной абсолютно необходимой является iceServers, которая будет содержать массив объектов URL, содержащих информацию о серверах STUN и TURN, используемых в процессе поиска кандидатов ICE. Вау, это был полный рот! На самом базовом уровне кандидат ICE - это информация о сети, которой обмениваются одноранговые узлы. При установлении однорангового соединения два удаленных компьютера договариваются о наилучшем соединении между собой. Подробнее о кандидатах ICE и серверах STUN / TURN читайте в статье Шервина Сима из Temasys ».
Теперь, несмотря на то, что API позволяет вам устанавливать эти одноранговые соединения, вам также необходимо использовать какую-то сигнализацию для облегчения однорангового соединения через сервер. WebRTC не включает API для этого, однако существует множество вариантов. Я не буду вдаваться в подробности установления соединения между одноранговыми узлами, но я могу порекомендовать Socket.IO в качестве варианта веб-сокета на основе Node.js, и вы можете узнать больше о сигнализации здесь, в MDN.
Вы могли подумать, что это довольно сложное звучание - и вы правы. С момента первого выпуска WebRTC было разработано множество библиотек, чтобы скрыть некоторые из этих сложностей и немного упростить одноранговые соединения в реальном времени. Simple-Peer - хорошо известная библиотека с открытым исходным кодом для этого, и у производителя также есть хорошая библиотека для сигнализации, названная Simple-Signal (которая использовала Socket.IO). Кроме того, вы можете ознакомиться с этим сборником модулей и ресурсов WebRTC.
RTCDataChannel
Последний API в WebRTC - это тот, который позволяет разработчикам открывать канал между двумя одноранговыми узлами, через который мы можем отправлять и получать другие данные, например текст для чата в реальном времени или даже передачу файлов любых файлов с одного компьютера на другой. , например обмен файлами через торрент. Это очень похоже на веб-сокеты, представленные через WebSocket API и включенные в функции Socket.IO.
Для начала вам понадобится одноранговое соединение, открытое через RTCPeerConnection (или библиотеку, которая сделает это за вас). Установив такое соединение, вы можете вызвать createDataChannel на локальном узле и ondatachannel на удаленном узле:
Заключение
Это был общий обзор функций, доступных вам через WebRTC. Приступить к работе с пользовательскими мультимедийными данными с getUserMedia довольно просто, в то время как сложность быстро возрастает при установлении одноранговых соединений и каналов передачи данных между пользователями. Вам нужно будет использовать сторонний API для обработки сигналов сервера (например, Socket.IO), и вы можете использовать другую библиотеку для помощи в навигации по сложности RTCPeerConnection и RTCDataChannel, например Simple-Peer.
Хотя для начала использования этого набора мощных API может потребоваться немного времени, это отличный, хорошо документированный, доступный и бесплатный способ обеспечить видео- и аудиосвязь в реальном времени, обмен файлами и любые другие одноранговые сети. удаленный обмен в ваше приложение.
Более подробное руководство по WebRTC можно найти в этих двух ресурсах:
