PWA'da Kameraya Nasıl Erişilir

Yayınlanan: 2020-08-19

İçindekiler

PWA'nın donanım özelliklerini detaylandıran makalemizde daha önce yer alan kamera erişimi, giderek daha fazla gördüğümüz öne çıkan özelliklerden biri. Ancak bu yeteneği PWA'nıza düzgün bir şekilde entegre etmek de kolay bir iş değildir, bu nedenle bugünkü makalemizde size tüm bu süreç boyunca rehberlik etmeye çalışacağız:

Önkoşullar

  • ReactJS ve yazılı kılavuzumuz kullanılarak kolayca oluşturulabilen temel bir PWA
  • Sağlam bir HTML ve JavaScript anlayışı

PWA'da Kameraya Nasıl Erişilir

Temeller

webRTC'nin bir API'si olan getUserMedia() ile tanışın

Bir kameraya ve/veya mikrofona doğrudan erişim sağlamak için Web, hemen hemen tüm modern tarayıcılarda yaygın olarak desteklenen getUserMedia() adlı bir API kullanır. Bu API, RTCPeerConnection ve RTCDataChannel ile birlikte, gerçek zamanlı iletişimi sağlayan tarayıcılarda yerleşik bir çerçeve olan WebRTC'nin parçalarıdır.

Temel olarak, API'nin ( navigator.mediaDevices.getUserMedia(constraints) ) yaptığı şey, kullanıcıdan telefonun ses ve video girişine (örn. mikrofon, web kamerası, kamera, vb.) erişim izni istemesidir. API, hangi izni kullanarak daha fazla manipüle edilebilecek yerel adlı bir MediaStream JavaScript nesnesi oluşturur.

Örnekler

Örneğin, bir düğmemiz olduğunu varsayalım: 

 <button>Yüzümü göster</button>

Ve hangi düğmenin tıklanması navigator.mediaDevices.getUserMedia() yöntemini çağırır (ses girişi olmadan): 

 navigator.mediaDevices.getUserMedia({
 video: doğru
})

Heck, kısıtlamalarla da çıldırabiliriz: 

 navigator.mediaDevices.getUserMedia({
  video: {
    minAspectRatio: 1.333,
    minFrameRate: 30,
    genişlik: 1280,
    yükseklik: 720
  }
})

Ek olarak, video nesnesinde tarayıcıya cihazın hangi kamerasını kullanacağını söyleyen bir facingMode özelliği belirtebiliriz: 

 {
  video: {
    ...
    bakanMod: {
//Arka kamerayı kullan
      kesin: 'çevre'
    }
  }
}

Veya 

 {
 video : {
  …
//Ön kamerayı kullan
  faceMode: 'kullanıcı'
 }
}

Notlar :

  • API yalnızca güvenli bir kaynakta (HTTPS) kullanılabilir
  • Geçerli cihazda desteklenen kısıtlamaların bir listesini almak için şunu çalıştırın: 
 navigator.mediaDevices.getSupportedConstraints()

karmaşık kısım

Artık temelleri sağlam bir şekilde anladığımıza göre, gelişmiş kısma geçelim. Bu kısımda PWA'mızda bir buton oluşturmaya çalışacağız ve buna tıkladığımızda kameramızı açıp daha fazla iş yapmamızı sağlayacak.

[Get access to camera] düğmesini oluşturma

Önce index.html dosyamızdaki <button> ile başlayalım: 

 <button>Kameraya erişim sağlayın</button>
<video otomatik oynatma></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Not :

  • Otomatik oynatma, medya akışının ilk karede otomatik olarak oynatılmasını ve donmamasını söylemek için oradadır.
  • Adapter-latest.js, uygulamaları özellik değişikliklerinden ve önek farklılıklarından izole eden bir altlıktır.

Düğmeye tıklayarak gerçek zamanlı olarak video akışı yapın

Düğmeye tıklandığında bir videoyu gerçek zamanlı olarak yayınlamak için, click olayı yayınlandığında çağrılacak olan bir EventListener gerekecek: 

 document.querySelector('#get-access').addEventListener('tıklama', zaman uyumsuz işlev init(e) {
  denemek {
 }
yakalamak (hata) {
 }
})

Daha sonra, navigator.mediaDevices.getUserMedia() 'yı çağırır ve cihazın web kamerasını kullanarak bir video akışı ister: 

 document.querySelector('#get-access').addEventListener('tıklama', zaman uyumsuz işlev init(e) {
  denemek {
    const akışı = navigator.mediaDevices.getUserMedia'yı bekle({
      ses: yanlış,
      video: doğru
    })
    const videoTracks = stream.getVideoTracks()
    const track = videoTracks[0]
    alert(`Video alınıyor: ${track.label}`)
    document.querySelector('video').srcObject = akış
    document.querySelector('#get-access').setAttribute('gizli', doğru)
//Video akışı, oynatmadan 3 saniye sonra track.stop() tarafından durdurulur.
    setTimeout(() =&gt; { track.stop() }, 3 * 1000)
  } yakalama (hata) {
    uyarı(`${hata.name}`)
    konsol.hata(hata)
  }
})

Ek olarak, yukarıda Temel bölümünde belirtildiği gibi, video akışı için daha fazla gereksinim de belirleyebilirsiniz: 

 navigator.mediaDevices.getUserMedia({
  video: {
    zorunlu: { minAspectRatio: 1.333, maxAspectRatio: 1.334, faceMode: 'user'},
    isteğe bağlı: [
      { minFrameRate: 60 },
      { maxWidth: 640 },
      { maksimum Yükseklik: 480 }
    ]
  }
}, SuccessCallback, errorCallback);

Tuval oluşturma

<canvas> ile birleştirilmiş <video> öğesiyle, gerçek zamanlı video akışımızı daha fazla işleyebilirsiniz. Bu, özel filtreler uygulama, renk anahtarlama ("yeşil ekran efekti" olarak da bilinir) gibi çeşitli efektleri JavaScript kodunu kullanarak gerçekleştirme yeteneğini içerir.

Bununla ilgili daha fazla bilgi edinmek isterseniz, Mozilla, tuval kullanarak video düzenleme hakkında ayrıntılı bir kılavuz yazdı, bu yüzden göz atmayı unutmayın!

takePhoto() ve grabFrame() kullanarak tuvalin anlık görüntüsünü yakalayın

getUserMedia API'sinin yeni takePhoto ve grabFrame yöntemleri, o anda akan videonun anlık görüntüsünü yakalamak için kullanılabilir. İki yöntem arasında hala önemli farklılıklar vardır:

Temel olarak, grabFrame yaptığı, bir sonraki video karesini yakalamaktır - bu, fotoğraf çekmenin basit ve verimli bir yöntemi değildir. Öte yandan, takePhoto yöntemi, bir Blob görüntüsü yakalamak için kameranın "mevcut en yüksek fotoğrafik kamera çözünürlüğünü" kullanmak için mevcut video akışını keserek kareleri yakalamak için daha iyi bir yöntem kullanır.

Aşağıdaki örneklerde, yakalanan çerçeveyi grabFrame yöntemini kullanarak bir canvas öğesine çizeceğiz: 

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

grabFrameButton.onclick = grabFrame;

function kapmakFrame() {
  imageCapture.grabFrame()
  .then(function(imageBitmap) {
    konsol.log('Alınan çerçeve:', imageBitmap);
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    canvas.classList.remove('gizli');
  })
  .catch(işlev(hata) {
    konsol.log('grabFrame() hatası: ', hata);
  });
}

Ve bu örnekte, takePhoto() yöntemini kullanıyoruz: 

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

takePhotoButton.onclick = takePhoto;

// Seçili olan kamera kaynağından bir Blob alın ve
// bunu bir img öğesiyle göster.
işlev takePhoto() {
  imageCapture.takePhoto().then(function(blob) {
    konsol.log('Fotoğraf çekildi:', blob);
    img.classList.remove('gizli');
    img.src = URL.createObjectURL(blob);
  }).catch(işlev(hata) {
    konsol.log('takePhoto() hatası:', hata);
  });
}

Yukarıdaki yöntemlerin çalışırken nasıl göründüğü hakkında bir fikir edinmek için Basit Görüntü Yakalama'yı öneririz; ve alternatif olarak, PWA Media Capture, PWA'daki temel medya yakalama özelliğinin nasıl görüneceğine dair iyi bir örnektir.

Çözüm

Bu öğreticide, PWA'nızda kamera özelliklerini uygulamaya yönelik temel bilgilerin yanı sıra bazı gelişmiş püf noktalarını da tanıttık. Gerisi bu özellikten en iyi şekilde yararlanmak için sadece hayal gücünüze kalmış.

Yeni nesil PWA destekli bir mağaza geliştirmek isteyen Magento tüccarları için burada SimiCart'ta ihtiyaçlarınıza göre hazırlanmış eksiksiz PWA çözümleri sunuyoruz.

simicart PWA'yı keşfedin