WebRTC

Video Chat z WebRTC i TypeScript #1 – początek projektu

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 😉

WebRTC

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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *