Jak uzyskać dostęp do kamery w PWA

Opublikowany: 2020-08-19

Spis treści

Dostęp do kamery, o którym wcześniej wspominaliśmy w naszym artykule szczegółowo opisującym możliwości sprzętowe PWA, jest jedną z ważniejszych funkcji, których widzimy coraz więcej. Jednak prawidłowe zintegrowanie tej możliwości z PWA również nie jest łatwym zadaniem, dlatego w naszym dzisiejszym artykule postaramy się przeprowadzić Cię przez cały proces:

Warunki wstępne

  • Podstawowe PWA, które można łatwo utworzyć za pomocą ReactJS i naszego pisemnego przewodnika
  • Dobra znajomość HTML i JavaScript

Jak uzyskać dostęp do kamery w PWA

Podstawy

Przedstawiamy getUserMedia() — API webRTC

Aby uzyskać bezpośredni dostęp do kamery i/lub mikrofonu, sieć wykorzystuje API o nazwie getUserMedia() , które jest powszechnie obsługiwane w prawie wszystkich nowoczesnych przeglądarkach. Ten interfejs API, wraz z RTCPeerConnection i RTCDataChannel , jest częścią WebRTC — struktury wbudowanej w przeglądarki, która umożliwia komunikację w czasie rzeczywistym.

Zasadniczo to, co robi API ( navigator.mediaDevices.getUserMedia(constraints) ) to monitowanie użytkownika o pozwolenie na dostęp do wejścia audio i wideo telefonu (np. mikrofonu, kamery internetowej, kamery itp.). Korzystając z tego uprawnienia, interfejs API generuje obiekt JavaScript MediaStream o nazwie lokalny , który można dalej manipulować.

Przykłady

Powiedzmy na przykład, że mamy przycisk: 

 <button>Pokaż moją twarz</button>

A kliknięcie przycisku wywołuje metodę navigator.mediaDevices.getUserMedia() (bez wejścia audio): 

 navigator.mediaDevices.getUserMedia({
 wideo: prawda
})

Heck, możemy również szaleć z ograniczeniami: 

 navigator.mediaDevices.getUserMedia({
  wideo: {
    minAspectRatio: 1,333,
    minFrame: 30,
    szerokość: 1280,
    wysokość: 720
  }
})

Dodatkowo w obiekcie wideo możemy określić właściwość facingMode , która informuje przeglądarkę, z której kamery urządzenia ma korzystać: 

 {
  wideo: {
    ...
    Tryb licowania: {
//Użyj tylnej kamery
      dokładnie: 'środowisko'
    }
  }
}

Lub 

 {
 wideo : {
  …
//Użyj przedniego aparatu
  FaceMode: 'użytkownik'
 }
}

Uwagi :

  • Interfejs API jest dostępny tylko z bezpiecznego źródła (HTTPS)
  • Aby uzyskać listę obsługiwanych ograniczeń na bieżącym urządzeniu, uruchom: 
 navigator.mediaDevices.getSupportedConstraints()

Skomplikowana część

Teraz, gdy dobrze rozumiemy podstawy, przejdźmy do części zaawansowanej. W tej części postaramy się stworzyć przycisk w naszym PWA, który po kliknięciu otworzy naszą kamerę i pozwoli nam na dalszą pracę.

Tworzenie przycisku [Get access to camera]

Najpierw zacznijmy od <button> w naszym index.html : 

 <button>Uzyskaj dostęp do aparatu</button>
<autoodtwarzanie wideo></wideo>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Uwagi :

  • Autoodtwarzanie jest po to, aby strumień multimediów był odtwarzany automatycznie i nie zawieszał się na pierwszej klatce.
  • Adapter-latest.js to podkładka chroniąca aplikacje przed zmianami specyfikacji i różnicami przedrostków.

Przesyłaj strumieniowo wideo w czasie rzeczywistym, klikając przycisk

Aby przesyłać strumieniowo wideo w czasie rzeczywistym po kliknięciu przycisku, musimy dodać EventListener , który będzie wywoływany po wystąpieniu zdarzenia click : 

 document.querySelector('#get-access').addEventListener('klik', funkcja asynchroniczna init(e) {
  próbować {
 }
złapać (błąd) {
 }
})

Następnie wywołuje navigator.mediaDevices.getUserMedia() i prosi o strumień wideo za pomocą kamery internetowej urządzenia: 

 document.querySelector('#get-access').addEventListener('klik', funkcja asynchroniczna init(e) {
  próbować {
    const stream = czekaj navigator.mediaDevices.getUserMedia({
      dźwięk: fałszywy,
      wideo: prawda
    })
    const videoTracks = stream.getVideoTracks()
    const track = videoTracks[0]
    alert(`Pobieranie wideo z: ${track.label}`)
    document.querySelector('video').srcObject = strumień
    document.querySelector('#get-access').setAttribute('ukryty', true)
// Strumień wideo jest zatrzymywany przez track.stop() po 3 sekundach odtwarzania.
    setTimeout(() => { track.stop() }, 3 * 1000)
  } złapać (błąd) {
    alert(`${nazwa.błędu}`)
    konsola.error(błąd)
  }
})

Ponadto, jak określono powyżej w sekcji Podstawowe , możesz również określić dodatkowe wymagania dotyczące strumienia wideo: 

 navigator.mediaDevices.getUserMedia({
  wideo: {
    obowiązkowe: { minAspectRatio: 1,333, maxAspectRatio: 1,334, faceMode: 'user'},
    opcjonalny: [
      { minFrame: 60 },
      { maxSzerokość: 640 },
      { maksymalna wysokość: 480 }
    ]
  }
}, successCallback, errorCallback);

Tworzenie płótna

Dzięki elementowi <video> połączonemu z <canvas> możesz dalej przetwarzać nasz strumień wideo w czasie rzeczywistym. Obejmuje to możliwość wykonywania różnych efektów, takich jak stosowanie niestandardowych filtrów, kluczowanie kolorem (tzw. „efekt zielonego ekranu”) — wszystko za pomocą kodu JavaScript.

Jeśli chcesz przeczytać więcej na ten temat, Mozilla napisała szczegółowy przewodnik na temat manipulowania wideo za pomocą płótna, więc nie zapomnij go sprawdzić!

Zrób migawkę płótna za pomocą takePhoto() i grabFrame()

Nowe metody takePhoto i grabFrame w interfejsie API getUserMedia mogą zostać użyte do przechwycenia migawki aktualnie przesyłanego strumieniowo wideo. Nadal istnieją znaczące różnice między tymi dwiema metodami:

Zasadniczo grabFrame po prostu przechwytuje następną klatkę wideo — uproszczona i nie tak wydajna metoda robienia zdjęć. Z drugiej strony metoda takePhoto wykorzystuje lepszą metodę przechwytywania klatek, która polega na przerwaniu bieżącego strumienia wideo w celu użycia „najwyższej dostępnej rozdzielczości aparatu fotograficznego” w celu przechwycenia obrazu typu Blob.

W poniższych przykładach narysujemy przechwyconą klatkę do elementu canvas za pomocą metody grabFrame : 

 var grabFrameButton = document.querySelector('button#grabFrame');
var canvas = document.querySelector('canvas');

grabFrameButton.onclick = grabFrame;

funkcja grabFrame() {
  imageCapture.grabFrame()
  .then(function(imageBitmap) {
    console.log('Ramka przechwycona:', imageBitmap);
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    canvas.classList.remove('ukryty');
  })
  .catch(funkcja(błąd) {
    console.log('grabFrame() błąd: ', błąd);
  });
}

W tym przykładzie używamy metody takePhoto() : 

 var takePhotoButton = document.querySelector('button#takePhoto');
var canvas = document.querySelector('canvas');

weźPhotoButton.onclick = weźZdjęcie;

// Pobierz obiekt Blob z aktualnie wybranego źródła kamery i
// wyświetl to z elementem img.
funkcja weźZdjęcie() {
  imageCapture.takePhoto().then(function(blob) {
    console.log('Zrobiono zdjęcie:', blob);
    img.classList.remove('ukryty');
    img.src = URL.createObjectURL(blob);
  }).catch(funkcja(błąd) {
    console.log('takePhoto() błąd:', błąd);
  });
}

Aby zorientować się, jak powyższe metody wyglądają w działaniu, zalecamy Simple Image Capture; i alternatywnie, PWA Media Capture jest również dobrym przykładem tego, jak wyglądałaby podstawowa funkcja przechwytywania multimediów w PWA.

Wniosek

W tym samouczku przedstawiliśmy podstawy, a także kilka zaawansowanych sztuczek do implementowania funkcji kamery w PWA. Reszta zależy tylko od Twojej wyobraźni, aby jak najlepiej wykorzystać tę funkcję.

Sprzedawcom Magento, którzy chcą opracować sklep nowej generacji oparty na PWA, w SimiCart zapewniamy kompletne rozwiązania PWA dostosowane do Twoich potrzeb.

Poznaj simicart PWA