(Почти) безполезен стрийминг от уеб камера от браузър. Част 2. WebRTC

Някак в одной от стари и вече изоставени статии, написах за това колко лесно и естествено можете да излъчвате видео от платно чрез websockets. В тази статия говорих накратко за това как да заснемете видео от камера и звук от микрофон с помощта на API на MediaStream, как да кодирате получения поток и да го изпратите чрез websockets към сървъра. В действителност обаче те не правят това, за излъчвания те използват или специален софтуер, който трябва да бъде инсталиран и конфигуриран: направо това може да бъде Софтуер за отворено разпространение, или използват WebRTC, който работи веднага, т.е. не изисква инсталирането на никакви плъгини a la flash player, които ще бъдат изрязани от браузъра Chromium още през декември.

Днес ще говорим за WebRTC.

Уеб комуникацията в реално време (WebRTC) не е единичен протокол, а цяла колекция от стандарти, протоколи и JavaScript API, които заедно осигуряват peer-to-peer видео-аудио комуникация в реално време и могат също да се използват за прехвърляне на всякакви двоични данни. Обикновено браузърите действат като партньори, но може да бъде и мобилно приложение, например. За да се организира p2p комуникация между клиенти, е необходима поддръжка на браузъра за различни видове видео и аудио кодиране, поддръжка на много мрежови протоколи, осигуряващи взаимодействие между хардуера и браузъра (чрез слоеве на ОС): уеб камери, звукови карти. Цялата тази смесица от технологии е скрита зад JavaScript API абстракцията за удобство на програмиста.

Всичко се свежда до три API:

• API на MediaStream — демонтиран миналия път, днес ще пиша малко повече за него. Служи за получаване на видео/аудио потоци от хардуера

• RTCPeer връзка — осигурява комуникация между два клиента (p2p)

• RTCDataChannel - служи за прехвърляне на произволни данни между два клиента

Подготовка на аудио и видео потоци за предаване

Всичко започва с „улавянето“ на медийните потоци на уеб камерата и микрофона. Разбира се, необработените потоци не са подходящи за организиране на телеконференция, всеки поток трябва да бъде обработен: подобрете качеството, синхронизирайте аудио с видео, поставете маркировки за синхронизиране във видео потока и осигурете битрейт, съответстващ на постоянно променящата се честотна лента на канала . Браузърът се грижи за всичко това, разработчикът дори не трябва да се притеснява за осигуряването на кодиране за медийни потоци. В модерния браузър вече има софтуерни слоеве за заснемане, подобряване на качеството (премахване на ехото и шума от звука, подобряване на картината), видео и аудио кодиране. Схемата на слоевете е показана на фиг. 1:

Ориз. 1. Слоеве на аудио и видео обработка в браузъра

Цялата обработка се извършва директно в самия браузър, без допълнителни. не са необходими добавки. Нещата обаче все още не са толкова розови за 2020 г. Има браузъри, които все още не поддържат напълно API на MediaStream, можете да следвате връзката и да видите таблицата за съвместимост най-долу. IE в частност отново е разочароващ.

Можете да правите много интересни неща с получените потоци: можете да клонирате, да променяте разделителната способност на видеото, да манипулирате качеството на звука, можете да вземете и „прикачите“ потока Media Stream към маркирайте и вижте себе си на html страницата. Или можете да нарисувате поток върху канава и да зададете WebGL или CSS3 и да приложите различни филтри към видеото, да заснемете обработеното видео от канава и след това да го изпратите по мрежата до сървъра, да прекодирате и публикувате на всички (здравей bigo live, twitch и други). Тук няма да анализирам как се правят подобни неща, ще дам няколко примера, намерени в мрежата:

https://jeeliz.com/ - момчетата правят CV в реално време в Javascript. Те имат едно цяло арсенал различни js библиотеки за работа с видео поток върху платно: откриване на лица, обекти, прилагане на филтри (маски, като в Instagram) и т.н. Отличен пример за това как можете да обработвате видео в реално време директно в браузъра без допълнителни плъгини.

Canvas captureStream API - API документация за заснемане на видео поток от платно. Вече се поддържа в Chrome, Opera и Firefox

RTCPeer връзка

И така, стигнахме до въпроса, но как всъщност да прехвърлите видеоклипа на друг потребител? Излиза на преден план RTCPeer връзка. Накратко, на почти тази стъпка трябва да създадете обект RTCPeerConnection:

const peerConnection = new RTCPeerConnection({
  iceServers: [{
    urls: 'stun:stun.l.google.com:19302'
  }]
});

Посочваме iceServers като една от опциите - това е сървър, който помага да се осигури връзка между два браузъра зад NAT'om. Тоест проблемът е решен тук: как да разберете ip-то на събеседника, ако той стои зад NAT на своя доставчик? Протоколът ICE идва на помощ, всъщност ICE изобщо не се отнася за WebRTC, но повече за това по-късно.

Преди това имахме потребителски медийни потоци:

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
  // Usermedia-потоки, обычно это видео и аудио 
  const tracks = stream.getTracks();

   for (const track of tracks) {
     // каждый трек присоединяем к peerConnection
     peerConnection.addTrack(track);
   }
}).catch(console.error);

След това събитието onnegotiationneeded се задейства на peerConnection, в чийто манипулатор трябва да създадем оферта (от гледна точка на SDP - протокол за описание на сесия) и да я присвоим на peerConnection чрез метода setLocalDescription. За SDP - какво е това и за форматите на офертите и отговорите - ще говорим допълнително.

След присвояване на LocalDescription peerConnection, браузърът "сглобява" кандидати за лед, тоест намира различни начини за комуникация чрез NAT. Събитието onicegatheringstatechange се задейства. В манипулатора на onicegatheringstatechange разрешаваме връзка към потока на webrtc-signaling-сървъра за обмен на описанието на сесията между партньори:

peerConnection.oniceconnectionstatechange = (event) => {
      console.log('Connection state: ', peerConnection.iceConnectionState);

      if (peerConnection.iceConnectionState === 'connected') {
        // Можем активировать кнопку Start broadcast
        setBroadcasting(true);
        setBroadcastingBtnActive(true);
      }
    };

// Событие срабатывает сразу, как только добавился медаиапоток в peerConnection
peerConnection.onnegotiationneeded = (event) => {
      // Создаем и назначаем SDP offer
      peerConnection.createOffer().
        then((offer) => peerConnection.setLocalDescription(offer)).
        catch(console.error);
    };

// Событие срабатывает каждый раз, как появляется ICE кандидат
peerConnection.onicegatheringstatechange = (ev) => {
      let connection = ev.target;

      // Now we can activate broadcast button
      if (connection.iceGatheringState === 'complete') {
        let delay = 50;
        let tries = 0;
        let maxTries = 3;

        let timerId = setTimeout(function allowStreaming() {
          if (isOnline) {
            setBroadcastingBtnActive(true);
            return;
          }

          if (tries < maxTries) {
            tries += 1;
            delay *= 2;
            timerId = setTimeout(allowStreaming, delay);
          } else {
            // TODO: show user notification
            console.error("Can't connect to server");

            alert("Can't connect to server");
          }
        }, delay);
      }
    };

Webrtc-signaling-сървърът е сървърът, необходим за обмен на описанието на сесията между двама партньори, той може да бъде най-простият websocket или xhr-сървър на всеки PL. Задачата му е проста: да приеме описание на сесия от един партньор и да го прехвърли на друг.

След обмена на описания на сесията и двете страни са готови за излъчване и получаване на видео потоци, от страната, която получава видеопотока, събитието ontrack се задейства на peerConnection, в манипулатора на който получените песни могат да бъдат присвоени на и погледнете любимия си събеседник. Допълнителна теория и подробности.

Линкове и литература:

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection - документация RTCPeer връзка

https://github.com/pion/webrtc - внедряване на WebRTC протоколи в движение

https://webrtcforthecurious.com/ - книга от създателите на pion

https://hpbn.co/ - Книга за работа в мрежа с високопроизводителен браузър. Подробно са разгледани въпросите за осигуряване на висока производителност на уеб приложенията. В края е описан WebRTC. Книгата със сигурност е стара (2013 г.), но не губи своята актуалност.

В следващата част искам да дам малко повече част от теорията и на практика да анализирам приемането и обработката на видео поток на сървъра с помощта на pion, прекодиране в HLS чрез ffmpeg за последващо излъчване към зрителите в браузъра.

За нетърпеливите: моят много груб прототип на излъчване на видео от уеб камера, за да реагира през базиран на pion сървър в twitch (това е само експеримент).

Източник: www.habr.com