PWAでカメラにアクセスする方法

公開: 2020-08-19

目次

PWAのハードウェア機能について詳しく説明した記事で以前に取り上げられたカメラアクセスは、私たちがますます目にしている最も顕著な機能の1つです。 ただし、この機能をPWAに適切に統合することも簡単な作業ではありません。そのため、本日の記事では、このプロセス全体をガイドします。

前提条件

  • ReactJSと私たちの書面によるガイドを使用して簡単に作成できる基本的なPWA
  • HTMLとJavaScriptの確かな理解

PWAでカメラにアクセスする方法

基礎

getUserMedia()の紹介—webRTCのAPI

カメラやマイクに直接アクセスするために、WebはgetUserMedia()と呼ばれるAPIを使用します。これは、ほとんどすべての最新のブラウザーで広くサポートされています。 このAPIは、 RTCPeerConnectionおよびRTCDataChannelとともに、リアルタイム通信を可能にするブラウザーに組み込まれたフレームワークであるWebRTCの一部です。

基本的に、API（ navigator.mediaDevices.getUserMedia(constraints) ）が行うことは、電話のオーディオおよびビデオ入力（マイク、Webカメラ、カメラなど）にアクセスする許可をユーザーに求めることです。 APIは、どの権限を使用して、さらに操作できるローカルと呼ばれるMediaStreamオブジェクトを生成します。

例

たとえば、ボタンがあるとします。 

 <button>顔を見せて</button>

そして、どのボタンをクリックすると、 navigator.mediaDevices.getUserMedia()メソッドが呼び出されます（音声入力なし）。 

 navigator.mediaDevices.getUserMedia（{
 ビデオ：true
}）

ちなみに、制約を回避することもできます。 

 navigator.mediaDevices.getUserMedia（{
  ビデオ： {
    minAspectRatio：1.333、
    minFrameRate：30、
    幅：1280、
    高さ：720
  }
}）

さらに、ビデオオブジェクトでfacingModeプロパティを指定して、デバイスのどのカメラを使用するかをブラウザに指示できます。 

 {{
  ビデオ： {
    ..。
    直面しているモード：{
//バックカメラを使用します
      正確：「環境」
    }
  }
}

または

 {{
 ビデオ ： {
  …
//フロントカメラを使用します
  FacingMode：'ユーザー'
 }
}

注：

  • APIは、セキュアオリジン（HTTPS）でのみ使用できます。
  • 現在のデバイスでサポートされている制約のリストを取得するには、次のコマンドを実行します。 
 navigator.mediaDevices.getSupportedConstraints（）

複雑な部分

基本をしっかりと理解したので、高度な部分に移りましょう。 このパートでは、PWAにボタンを作成してみます。ボタンをクリックすると、カメラが開き、さらに作業を行うことができます。

[Get access to camera]ボタンを作成する

まず、index.htmlの<button>から始めましょう： 

 <button>カメラにアクセスする</button>
<動画の自動再生></video>
<script src = "https://webrtc.github.io/adapter/adapter-latest.js"> </ script>

注：

  • 自動再生は、最初のフレームでフリーズせずに自動再生するようにメディアストリームに指示するためにあります。
  • adapter-latest.jsは、仕様の変更やプレフィックスの違いからアプリを保護するためのシムです。

ボタンをクリックしてリアルタイムでビデオをストリーミング

ボタンをクリックしたときにリアルタイムでビデオをストリーミングするには、 clickイベントが発行されたときに呼び出されるEventListenerを追加する必要があります。 

 document.querySelector（'＃get-access'）。addEventListener（'click'、async function init（e）{
  試す {
 }
キャッチ（エラー）{
 }
}）

その後、 navigator.mediaDevices.getUserMedia()を呼び出し、デバイスのWebカメラを使用してビデオストリームを要求します。 

 document.querySelector（'＃get-access'）。addEventListener（'click'、async function init（e）{
  試す {
    const stream = await navigator.mediaDevices.getUserMedia（{
      音声：false、
      ビデオ：true
    }）
    const videoTracks = stream.getVideoTracks（）
    const track = videoTracks [0]
    alert（ `動画の取得元：$ {track.label}`）
    document.querySelector（'video'）。srcObject = stream
    document.querySelector（'＃get-access'）。setAttribute（'hidden'、true）
//ビデオストリームは、再生の3秒後にtrack.stop（）によって停止されます。
    setTimeout（（）=＆gt; {track.stop（）}、3 * 1000）
  } catch（error）{
    alert（ `$ {error.name}`）
    console.error（error）
  }
}）

さらに、上記の「基本」セクションで指定したように、ビデオストリームの要件をさらに指定することもできます。 

 navigator.mediaDevices.getUserMedia（{
  ビデオ： {
    必須：{minAspectRatio：1.333、maxAspectRatio：1.334、faceingMode：'user'}、
    オプション：[
      {minFrameRate：60}、
      {maxWidth：640}、
      {maxHeigth：480}
    ]
  }
}、successCallback、errorCallback）;

キャンバスの作成

<video>要素を<canvas>と組み合わせると、リアルタイムのビデオストリームをさらに処理できます。 これには、カスタムフィルターの適用、クロマキーイング（別名「グリーンスクリーン効果」）などのさまざまな効果をすべてJavaScriptコードを使用して実行する機能が含まれます。

これについてもっと知りたい場合は、Mozillaがキャンバスを使用したビデオの操作に関する詳細なガイドを書いているので、それをチェックすることを忘れないでください！

takePhoto()とgrabFrame() ）を使用してキャンバスのスナップショットをキャプチャします

getUserMedia APIの新しいtakePhotoメソッドとgrabFrameメソッドを使用して、現在ストリーミングしているビデオのスナップショットをキャプチャできます。 2つの方法の間にはまだ大きな違いがあります。

基本的に、 grabFrameが行うことは、単に次のビデオフレームを取得することです。これは、写真をキャプチャするための単純で効率的な方法ではありません。 一方、 takePhotoメソッドは、現在のビデオストリームを中断して、カメラの「利用可能な最高の写真カメラ解像度」を使用してBlob画像をキャプチャするという、より優れたフレームキャプチャ方法を使用します。

以下の例では、 grabFrameメソッドを使用してキャプチャされたフレームをcanvas要素に描画します。 

 var grabFrameButton = document.querySelector（'button＃grabFrame'）;
var canvas = document.querySelector（'canvas'）;

grabFrameButton.onclick = grabFrame;

関数grabFrame（）{
  imageCapture.grabFrame（）
  .then（function（imageBitmap）{
    console.log（'取得したフレーム：'、imageBitmap）;
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext（ '2d'）。drawImage（imageBitmap、0、0）;
    canvas.classList.remove（'hidden'）;
  }）
  .catch（function（error）{
    console.log（'grabFrame（）エラー：'、エラー）;
  }）;
}

この例では、 takePhoto()メソッドを使用します。 

 var takePhotoButton = document.querySelector（'button＃t​​akePhoto'）;
var canvas = document.querySelector（'canvas'）;

takePhotoButton.onclick = takePhoto;

//現在選択されているカメラソースからBLOBを取得し、
//これをimg要素で表示します。
関数takePhoto（）{
  imageCapture.takePhoto（）。then（function（blob）{
    console.log（'写真を撮る：'、blob）;
    img.classList.remove（'hidden'）;
    img.src = URL.createObjectURL（blob）;
  }）。catch（function（error）{
    console.log（'takePhoto（）エラー：'、エラー）;
  }）;
}

上記の方法が実際にどのように見えるかを理解するには、SimpleImageCaptureをお勧めします。 あるいは、PWAメディアキャプチャは、PWAの基本的なメディアキャプチャ機能がどのようになるかを示す良い例でもあります。

結論

このチュートリアルでは、PWAにカメラ機能を実装するための基本といくつかの高度なトリックを紹介しました。 残りは、この機能を最大限に活用するためのあなたの想像力次第です。

次世代のPWAを利用したスト​​アの開発を検討しているMagentoの加盟店向けに、ここSimiCartでは、ニーズに合わせた完全なPWAソリューションを提供しています。

simicartPWAを探索する