WebRTC jest otwartą technologią webową stworzoną przez Google. Pozwala ona na przesyłanie mediów i danych w czasie rzeczywistym pomiędzy przeglądarkami i urządzeniami mobilnymi bez dedykowanego serwera do przesyłu danych.
Więcej o technologii można dowiedzieć się z tej prezentacji. My przejdziemy od razu do praktyki. W pierwszej części utworzymy projekt oraz dowiemy się jak przesłać video z kamery na lokalną stronę www.
Szkielet projektu
Będzie nam potrzebny NodeJS oraz edytor kodu, ja tradycyjnie stawiam na Visual Studio Code, przyda się też nam wiedza o TypeScript. Zaczynamy od utworzeniu projektu i uruchomienia w nim szeregu komend.
npm init -y npm install --save-dev typescript parcel-bundler prettier eslint npx tsc -init npx eslint --init
Tworzymy również plik .prettierrc z konfiguracją dla prettiera i wrzucamy tam nasze ulubione reguły formatowania.
{ "trailingComma": "es5", "tabWidth": 4, "semi": true, "singleQuote": true }
Następnie tworzymy plik index.html, otwieramy w VSC i za pomocą skrótu html:5 tworzymy szkielet strony. Dostosujmy jej tytuł oraz dorzućmy od razu puste pliki ze skryptami oraz css – src/app.ts oraz css/main.css.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Clockwork Web Chat</title> <link rel="stylesheet" href="/css/main.css" /> </head> <body> <script src="./src/app.ts"></script> </body> </html>
Możemy odpalić komendę npx parcel ./index.html i odwiedzić localhost:1234, by sprawdzić, czy wszystko się odpowiednio zestawia, pliki .ts i .css są zaciągane.
Player wideo w HTML
Dodajmy teraz do strony HTML element video, ważne, by ustawić atrybut autoplay, by video zaczęło być streamowane, gdy tylko dane z kamery będą dostępne.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Clockwork Web Chat</title> <link rel="stylesheet" href="/css/main.css" /> </head> <body> <h1>WebRTC w akcji</h1> <video autoplay playsinline></video> <script src="./src/app.ts"></script> </body> </html>
TypeScript
WebRTC jest częścią standardu, więc wszystkie niezbędne biblioteki i typingi mamy dostępne od ręki, w pliku lib.dom.d.ts.
Zaczniemy od pobrania uchwytów to mediów. Na chwilę obecną interesuje nas tylko video. Tworzymy nowy obiekt typu MediaStreamConstraints i oznaczamy flagę video, a następnie pobieramy strumień wybranych mediów.
const mediaStreamConstraints: MediaStreamConstraints = { video: true, }; const localVideo = document.querySelector('video'); navigator.mediaDevices .getUserMedia(mediaStreamConstraints)
getUserMedia zwraca promese, więc warto od razu dodać obsługę błędów.
navigator.mediaDevices .getUserMedia(mediaStreamConstraints) .then(mediaStream => { }) .catch(error => { console.log('Getting user media failed', error); });
Finalnie dodajemy mediaStream jako źródło dla naszego elementu video. Przy okazji tworzymy zmienną, która będzie odnosić się do mediaStream. Przyda się ona w następnej części.
const mediaStreamConstraints: MediaStreamConstraints = { video: true, }; const localVideo = document.querySelector('video'); let localStream; navigator.mediaDevices .getUserMedia(mediaStreamConstraints) .then(mediaStream => { localStream = mediaStream; localVideo.srcObject = mediaStream; }) .catch(error => { console.log('Getting user media failed', error); });
Powyższy kod wystarczy też, by przesłać już obraz z kamery do elementu video. Wystarczy odpalić npx parcel ./index.html i odwiedzić localhost:1234. Chrome zapyta, czy dajemy przeglądarce dostęp do kamery, a gdy się zgodzimy powinniśmy zobaczyć streamowany na żywo obraz. Tak jak niżej, oczywiście z poprawką obrazu z kamery 😉

Tak naprawdę do tej pory nie użyliśmy WebRTC, tylko standardowych bibliotek do przesyłu mediów. To się jednak zmieni już w następnej części.
Interesuje Cię TypeScript? Wprowadzenie do tego języka jest jednym z darmowych kursów dostępnych na kursy.clockworkjava.pl.
Kod projektu jest dostępny na github – https://github.com/clockworkjava/webrtc-video-chat