Cara Mengakses Kamera di PWA

Diterbitkan: 2020-08-19

Daftar Isi

Sebelumnya ditampilkan dalam artikel kami yang merinci kemampuan perangkat keras PWA, akses kamera adalah salah satu fitur yang lebih menonjol yang semakin sering kami lihat. Tetapi untuk mengintegrasikan kemampuan ini dengan benar ke dalam PWA Anda juga bukanlah tugas yang mudah, itulah sebabnya dalam artikel kami hari ini, kami akan mencoba memandu Anda melalui seluruh proses ini:

Prasyarat

  • PWA dasar yang dapat dengan mudah dibuat menggunakan ReactJS dan panduan tertulis kami
  • Pemahaman yang kuat tentang HTML dan JavaScript

Cara Mengakses Kamera di PWA

Dasar

Memperkenalkan getUserMedia() — API webRTC

Untuk mendapatkan akses langsung ke kamera dan/atau mikrofon, Web menggunakan API yang disebut getUserMedia() yang didukung secara luas di hampir semua browser modern. API ini, bersama dengan RTCPeerConnection dan RTCDataChannel , adalah bagian dari WebRTC — kerangka kerja yang dibangun ke dalam browser yang memungkinkan komunikasi waktu nyata.

Pada dasarnya, apa yang dilakukan API ( navigator.mediaDevices.getUserMedia(constraints) ) adalah meminta izin kepada pengguna untuk mengakses input audio dan video telepon (mis., mikrofon, webcam, kamera, dll). Menggunakan izin mana, API menghasilkan objek JavaScript MediaStream yang disebut lokal yang dapat dimanipulasi lebih lanjut.

Contoh

Katakanlah, misalnya, kami memiliki tombol: 

 <button>Tampilkan wajahku</button>

Dan mengklik tombol mana yang memanggil metode navigator.mediaDevices.getUserMedia() (tanpa input audio): 

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

Heck, kita bisa menjadi liar dengan kendala juga: 

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

Selain itu, kita dapat menentukan properti facingMode di objek video yang memberi tahu browser kamera perangkat mana yang akan digunakan: 

 {
  video: {
    ...
    menghadapiMode: {
//Gunakan kamera belakang
      tepat: 'lingkungan'
    }
  }
}

Atau 

 {
 videonya : {
  …
//Gunakan kamera depan
  menghadapiMode: 'pengguna'
 }
}

Catatan :

  • API hanya tersedia di sumber yang aman (HTTPS)
  • Untuk mendapatkan daftar batasan yang didukung pada perangkat saat ini, jalankan: 
 navigator.mediaDevices.getSupportedConstraints()

Bagian yang rumit

Sekarang setelah kita memiliki pemahaman yang kuat tentang dasar-dasarnya, mari beralih ke bagian lanjutan. Di bagian ini, kami akan mencoba membuat tombol di PWA kami dan, setelah mengkliknya, itu akan membuka kamera kami dan memungkinkan kami melakukan pekerjaan lebih lanjut.

Membuat tombol [Get access to camera]

Pertama, mari kita mulai dengan <button> di index.html kita : 

 <button>Dapatkan akses ke kamera</button>
<putar otomatis video></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Catatan :

  • Putar otomatis ada di sana untuk memberi tahu aliran media untuk memutar otomatis dan tidak membeku pada bingkai pertama.
  • Adapter-latest.js adalah alat untuk melindungi aplikasi dari perubahan spesifikasi dan perbedaan awalan.

Streaming video secara real-time dengan mengklik tombol

Untuk melakukan streaming video secara real-time saat mengklik tombol, kita perlu menambahkan EventListener yang akan dipanggil saat event click dikeluarkan: 

 document.querySelector('#get-access').addEventListener('klik', fungsi asinkron init(e) {
  mencoba {
 }
tangkap (kesalahan) {
 }
})

Setelah itu, ia memanggil navigator.mediaDevices.getUserMedia() dan meminta aliran video menggunakan webcam perangkat: 

 document.querySelector('#get-access').addEventListener('klik', fungsi asinkron init(e) {
  mencoba {
    const stream = menunggu navigator.mediaDevices.getUserMedia({
      suara: salah,
      video: benar
    })
    const videoTracks = stream.getVideoTracks()
    const track = videoTracks[0]
    alert(`Mendapatkan video dari: ${track.label}`)
    document.querySelector('video').srcObject = aliran
    document.querySelector('#get-access').setAttribute('hidden', benar)
//Stream video dihentikan oleh track.stop() setelah 3 detik pemutaran.
    setTimeout(() =&gt; { track.stop() }, 3 * 1000)
  } tangkap (kesalahan) {
    alert(`${error.name}`)
    konsol.error(kesalahan)
  }
})

Selain itu, seperti yang ditentukan di atas di bagian Dasar , Anda juga dapat menentukan lebih banyak persyaratan untuk streaming video: 

 navigator.mediaDevices.getUserMedia({
  video: {
    wajib: { minAspectRatio: 1.333, maxAspectRatio: 1.334, menghadapiMode: 'pengguna'},
    opsional: [
      { minFrameRate: 60 },
      { lebar maks: 640 },
      { maxHeigth: 480 }
    ]
  }
}, successCallback, errorCallback);

Membuat kanvas

Dengan elemen <video> yang digabungkan dengan <canvas> , Anda dapat memproses lebih lanjut streaming video real-time kami. Ini termasuk kemampuan untuk melakukan berbagai efek seperti menerapkan filter khusus, chroma-keying (alias "efek layar hijau") — semuanya dengan menggunakan kode JavaScript.

Jika Anda ingin membaca lebih lanjut tentang ini, Mozilla telah menulis panduan terperinci tentang Memanipulasi video menggunakan kanvas jadi jangan lupa untuk memeriksanya!

Tangkap snapshot kanvas menggunakan takePhoto() dan grabFrame()

Metode takePhoto dan grabFrame baru dari getUserMedia API dapat digunakan untuk mengambil snapshot dari video streaming saat ini. Masih ada perbedaan yang signifikan antara kedua metode:

Pada dasarnya, yang dilakukan oleh grabFrame adalah mengambil bingkai video berikutnya — metode pengambilan foto yang sederhana dan tidak seefisien. Metode takePhoto , di sisi lain, menggunakan metode yang lebih baik untuk menangkap bingkai yaitu dengan menginterupsi aliran video saat ini untuk menggunakan "resolusi kamera fotografi tertinggi yang tersedia" kamera untuk menangkap gambar Blob.

Dalam contoh di bawah ini, kita akan menggambar bingkai yang diambil ke dalam elemen canvas menggunakan metode grabFrame : 

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

grabFrameButton.onclick = ambilFrame;

fungsi ambilFrame() {
  gambarCapture.grabFrame()
  .kemudian(fungsi(imageBitmap) {
    console.log('Bingkai yang diambil:', imageBitmap);
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    canvas.classList.remove('tersembunyi');
  })
  .catch(fungsi(kesalahan) {
    console.log('grabFrame() kesalahan: ', kesalahan);
  });
}

Dan dalam contoh ini, kami menggunakan metode takePhoto() : 

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

takePhotoButton.onclick = ambilFoto;

// Dapatkan Blob dari sumber kamera yang dipilih saat ini dan
// tampilkan ini dengan elemen img.
fungsi ambilFoto() {
  imageCapture.takePhoto().then(fungsi(gumpalan) {
    console.log('Mengambil foto:', gumpalan);
    img.classList.remove('tersembunyi');
    img.src = URL.createObjectURL(gumpalan);
  }).catch(fungsi(kesalahan){
    console.log('takePhoto() kesalahan: ', kesalahan);
  });
}

Untuk mendapatkan gambaran tentang cara kerja metode di atas, kami merekomendasikan Pengambilan Gambar Sederhana; dan sebagai alternatif, PWA Media Capture juga merupakan contoh yang baik tentang seperti apa tampilan fitur media capture dasar di PWA.

Kesimpulan

Dalam tutorial ini, kami telah memperkenalkan kepada Anda dasar-dasar serta beberapa trik lanjutan untuk menerapkan fitur kamera di PWA Anda. Selebihnya terserah imajinasi Anda untuk memanfaatkan fitur ini sebaik mungkin.

Untuk pedagang Magento yang ingin mengembangkan toko bertenaga PWA generasi berikutnya, di SimiCart kami menyediakan solusi PWA lengkap yang disesuaikan dengan kebutuhan Anda.

Jelajahi simicart PWA