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