Cum să accesați camera într-un PWA

Publicat: 2020-08-19

Cuprins

Prezentat anterior în articolul nostru care detaliază capabilitățile hardware ale PWA, accesul la cameră este una dintre caracteristicile cele mai proeminente pe care le vedem din ce în ce mai multe. Dar, nici integrarea corectă a acestei capacități în PWA nu este o sarcină ușoară, motiv pentru care în articolul nostru de astăzi, vom încerca să vă ghidăm prin întregul proces:

Cerințe preliminare

  • Un PWA de bază care poate fi creat cu ușurință folosind ReactJS și ghidul nostru scris
  • O înțelegere solidă a HTML și JavaScript

Cum să accesați camera într-un PWA

Cele elementare

Vă prezentăm getUserMedia() — un API al webRTC

Pentru a obține acces direct la o cameră și/sau un microfon, Web-ul folosește un API numit getUserMedia() care este acceptat pe scară largă în aproape toate browserele moderne. Acest API, împreună cu RTCPeerConnection și RTCDataChannel , fac parte din WebRTC - un cadru integrat în browsere care permite comunicarea în timp real.

Practic, ceea ce face API-ul ( navigator.mediaDevices.getUserMedia(constraints) ) este că solicită utilizatorului permisiunea de a accesa intrarea audio și video a telefonului (de exemplu, microfon, cameră web, cameră etc.). Folosind această permisiune, API-ul generează un obiect JavaScript MediaStream numit local care poate fi manipulat în continuare.

Exemple

Să spunem, de exemplu, că avem un buton: 

 <button>Arătați-mi fața</button>

Și făcând clic pe ce buton se apelează metoda navigator.mediaDevices.getUserMedia() (fără intrare audio): 

 navigator.mediaDevices.getUserMedia({
 video: adevarat
})

La naiba, putem să ne dezvăluim și cu constrângerile: 

 navigator.mediaDevices.getUserMedia({
  video: {
    minAspectRatio: 1,333,
    minFrameRate: 30,
    latime: 1280,
    inaltime: 720
  }
})

În plus, putem specifica o proprietate facingMode în obiectul video care spune browserului ce cameră a dispozitivului să folosească: 

 {
  video: {
    ...
    faceingMode: {
//Folosiți camera din spate
      exact: „mediu”
    }
  }
}

Sau 

 {
 video : {
  …
//Folosiți camera frontală
  faceingMode: „utilizator”
 }
}

Note :

  • API-ul este disponibil numai pe o origine securizată (HTTPS)
  • Pentru a obține o listă cu constrângerile acceptate pe dispozitivul curent, rulați: 
 navigator.mediaDevices.getSupportedConstraints()

Partea complicată

Acum că avem o înțelegere solidă a elementelor de bază, să trecem la partea avansată. În această parte, vom încerca să creăm un buton în PWA și, când facem clic pe care, ne deschide camera și ne permite să lucrăm în continuare.

Crearea butonului [Get access to camera]

Mai întâi, să începem cu <button> din index.html nostru: 

 <button>Obțineți acces la cameră</button>
<video redare automată></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Notă :

  • Redarea automată este acolo pentru a spune fluxului media să se joace automat și să nu se înghețe la primul cadru.
  • Adaptor-latest.js este un shim pentru a izola aplicațiile de modificările specificațiilor și diferențele de prefix.

Redați în flux video în timp real făcând clic pe butonul

Pentru a reda în flux un videoclip în timp real când facem clic pe buton, va trebui să adăugăm un EventListener care va fi apelat la eliberarea evenimentului de click : 

 document.querySelector('#get-access').addEventListener('click', funcția asincronă init(e) {
  încerca {
 }
prinde (eroare) {
 }
})

Apoi, apelează navigator.mediaDevices.getUserMedia() și solicită un flux video folosind camera web a dispozitivului: 

 document.querySelector('#get-access').addEventListener('click', funcția asincronă init(e) {
  încerca {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: fals,
      video: adevarat
    })
    const videoTracks = stream.getVideoTracks()
    const track = videoTracks[0]
    alert(`Se primesc videoclip de la: ${track.label}`)
    document.querySelector('video').srcObject = flux
    document.querySelector('#get-access').setAttribute('hidden', true)
//Fluxul video este oprit de track.stop() după 3 secunde de redare.
    setTimeout(() =&gt; { track.stop() }, 3 * 1000)
  } captură (eroare) {
    alert(`${error.name}`)
    console.error(eroare)
  }
})

În plus, așa cum este specificat mai sus în secțiunea de bază , puteți specifica și mai multe cerințe pentru fluxul video: 

 navigator.mediaDevices.getUserMedia({
  video: {
    obligatoriu: { minAspectRatio: 1.333, maxAspectRatio: 1.334, facingMode: 'user'},
    opțional: [
      { minFrameRate: 60 },
      { Lățime maximă: 640 },
      { Înălțime maximă: 480 }
    ]
  }
}, succesCallback, errorCallback);

Crearea unei pânze

Cu elementul <video> combinat cu o <canvas> , puteți procesa în continuare fluxul nostru video în timp real. Aceasta include capacitatea de a efectua o varietate de efecte, cum ar fi aplicarea de filtre personalizate, chroma-keying (alias „efectul de ecran verde”) - toate folosind codul JavaScript.

În cazul în care doriți să citiți mai multe despre acest lucru, Mozilla a scris un ghid detaliat despre manipularea videoclipurilor folosind canvas, așa că nu uitați să îl verificați!

Capturați un instantaneu al pânzei folosind takePhoto() și grabFrame()

Noile metode takePhoto și grabFrame ale API-ului getUserMedia pot fi folosite pentru a captura un instantaneu al videoclipului în flux. Există încă diferențe semnificative între cele două metode:

Practic, ceea ce face grabFrame este că prind pur și simplu următorul cadru video - o metodă simplistă și nu la fel de eficientă de a capta fotografii. Metoda takePhoto , pe de altă parte, folosește o metodă mai bună de captare a cadrelor, care este prin întreruperea fluxului video curent pentru a utiliza „cea mai mare rezoluție disponibilă a camerei fotografice” a camerei pentru a captura o imagine Blob.

În exemplele de mai jos, vom desena cadrul capturat într-un element de canvas folosind metoda grabFrame : 

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

grabFrameButton.onclick = grabFrame;

funcția grabFrame() {
  imageCapture.grabFrame()
  .then(function(imageBitmap) {
    console.log('Cadru prins:', imageBitmap);
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    canvas.classList.remove('hidden');
  })
  .catch(funcție(eroare) {
    console.log('eroare grabFrame(): ', eroare);
  });
}

Și în acest exemplu, folosim metoda takePhoto() : 

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

takePhotoButton.onclick = takePhoto;

// Obține un blob de la sursa camerei selectată în prezent și
// afișează asta cu un element img.
funcția takePhoto() {
  imageCapture.takePhoto().then(function(blob) {
    console.log('Am făcut fotografia:', blob);
    img.classList.remove('ascuns');
    img.src = URL.createObjectURL(blob);
  }).catch(funcție(eroare) {
    console.log('eroare takePhoto(): ', eroare);
  });
}

Pentru a vă face o idee despre cum arată metodele de mai sus în acțiune, vă recomandăm Simplu Image Capture; și, alternativ, PWA Media Capture este, de asemenea, un bun exemplu despre cum ar arăta o funcție de bază de captură media în PWA.

Concluzie

În acest tutorial, v-am prezentat elementele de bază, precum și câteva trucuri avansate pentru implementarea funcțiilor camerei în PWA. Restul depinde doar de imaginația ta pentru a profita la maximum de această funcție.

Pentru comercianții Magento care doresc să dezvolte un magazin PWA de ultimă generație, aici, în SimiCart, oferim soluții PWA complete, adaptate nevoilor dumneavoastră.

Explorați simicart PWA