[JS] Jak wyświetlić obraz z kamery za pomocą Javascript?

W dzisiejszych czasach można korzystać z wielu różnych komunikatorów, które pozwalają na przesył obrazu wideo między użytkownikami, m.in. Skype czy Google Hangouts. W tym artykule przedstawię sposób na dobranie się do kamery użytkownika za pomocą kodu Javscript.

Sekcja 1Korzystamy z navigator.getUserMedia()

Aby móc korzystać z dobrodziejstw kamery (zainstalowanej w większości laptopów czy też innych) należy użyć metody navigator.getUserMedia(). Ze względu na fakt, że nie posiada ona w pełni ukończonej specyfikacji, musimy pamiętać o tym, aby korzystać z wersji z prefixami (co będzie można zobaczyć w kodzie poniżej).

Funkcja navigator.getUserMedia() przyjmuje 3 parametry:

1. Obiekt z danymi o typie urządzenia z którego chcemy skorzystać (kamera lub mikrofon, albo obydwa naraz),
2. Funkcję sukcesu (success callback),
3. Funkcję z obsługą błędu (error callback).

Ostatni parametr nie jest wymagany, ale dobrym zwyczajem jest zadbanie o obsługę błędów w swoim kodzie Javascript.

Sekcja 2Przykładowy kod Javascript zapewniający obsługę kamery

Poniższy przykład będzie prosty. Celem kodu poniżej będzie wyświetlenie obrazu z kamery w oknie przeglądarki. Najpierw kod HTML:

1
2

<input type="button" id="share" value="Wyświetl obraz z kamery"/>
<video id="video" autoplay/>

Jak widać, nic szczególnego. Przycisk oraz tag >video< gdzie będziemy zamieszczać strumień wideo z naszej kamery. Kod JS obsługujący taki kod HTML wygląda następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// pobieramy odpowiednią wersję metody getUserMedia w zależności od przeglądarki
// i przypisujemy ją do zmiennej globalnej
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
 
// jeśli funkcjonalność jest dostępna w przeglądarce
if (navigator.getUserMedia) {
  // pobierz referencję do przycisku
  var screenShareButton = document.getElementById('share');
 
  // przypisz funkcję do wywołania gdy będzie miało miejce kliknięcie w przycisk
  screenShareButton.addEventListener('click', function () {
    // definiujemy dane jakich potrzebujemy oraz określamy co z nimi zrobimy
    navigator.getUserMedia({
      audio : false, // nie chcemy mieć dźwięku z mikrofonu
      video : { // chcemy mieć wideo o określonych maksymalnych wymiarach
        optional  : [],
        mandatory : {
          maxWidth  : 1280,
          maxHeight : 720
        }
      }
    }, function (stream) { // funkcja sukcesu (success callback)
      // zmieniamy źródło danych w tagu video
      document.getElementById('video').src = window.URL.createObjectURL(stream);
      // ukrywamy przycisk
      screenShareButton.classList.add('hidden');
    }, function () { // funkcja z obsługą błędu
      alert('Niemożliwe jest pokazanie obrazu z kamery. Prawdopodobnie korzystasz z przeglądarki, która nie posiada tej funkcjonalności');
    });
  });
}

Wydaje mi się że kod został dobrze opisany za pomocą komentarzy. Pokrótce tylko powiem, że powyższy kod sprawdza czy funkcjonalność udostępniania obrazu z kamery istnieje w przeglądarce i jeśli istnieje, to następuje udostępnienie streamingu z obrazu kamery i wyświetlenie go w oknie przeglądarki.

Sekcja 3Podsumowanie

Powyższy kod jest tylko wstępem do bardzo wielu możliwości wykorzystania kamery w aplikacjach internetowych. Za pomocą tego kodu, można spróbować utworzyć własny komunikator a'la Google Hangouts albo aplikację do obserwowania swojego domu, gdy jest się poza nim. Jak to się mówi: "Sky is the limit" 🙂

Mam nadzieję, że ten artykuł zaciekawił Ciebie i zainspirował do działania. Warto dodać, że powyższy kod będzie działał tylko w przeglądarkach: Firefox, Google Chrome oraz Opera.