JavaScriptを使ってデバイスカメラにアクセスする方法

おい人々!このポストでは、JavaScriptを介して、複数のブラウザのサポートと外部ライブラリの必要なしで、Webページ上のデバイスのカメラにアクセスする方法を示します.

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

ユーザーのカメラにアクセスするにはMediaStream API . このAPIは、ビデオとオーディオを介してこれらのデバイスによってキャプチャにアクセスすることができますstreams .
まず、ブラウザがこのAPIをサポートしているかどうかを確認します.

if (
  "mediaDevices" in navigator &&
  "getUserMedia" in navigator.mediaDevices
) {
  // ok, browser supports it
}

サポートは、現代のブラウザ(もちろん、インターネットエクスプローラなし)でまともです.

ビデオストリーム

カメラによって生成されたビデオストリームをキャプチャするにはgetUserMedia メソッドmediaDevices オブジェクト.
このメソッドは、要求しているメディアの種類(ビデオまたはオーディオ)といくつかの要件を持つオブジェクトを受け取ります.出発するには{video: true} カメラからビデオを得るために.

const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });

この呼び出しはユーザにカメラにアクセスする許可を求めます.ユーザーがそれを否定するならば、それは例外を投げて、流れを返しません.それで、それは内部でされなければなりませんtry/catch この場合を処理するブロック.

返り値Promise , だからあなたはasync/await またはthen ブロック.

ビデオ要件

必要な解像度と最小限度と最大値に関する情報を渡すことで、ビデオの要件を改善できます.

const constraints = {
  video: {
    width: {
      min: 1280,
      ideal: 1920,
      max: 2560,
    },
    height: {
      min: 720,
      ideal: 1080,
      max: 1440,
    },
  },
};

const videoStream = await navigator.mediaDevices.getUserMedia(constraints);

ストリームは、幅と高さの正しい割合になります.それがポートレートモードで携帯電話である場合は、寸法を反転の世話をする.

ページにビデオを表示する

さて、我々がストリームを持っている今、我々はそれで何をすることができますか?
我々は、ページには、ビデオを表示することができますvideo 要素

// considering there is a
// <video autoplay id="video"></video> 
// tag in the page
const video = document.querySelector("#video");
const videoStream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = videoStream;

注意autoplay 属性をvideo タグ.それなしで、あなたは電話する必要がありますvideo.play() 実際に画像を表示し始める.

電話の前後のカメラにアクセスする

デフォルトでgetUserMedia は、システムのデフォルトのビデオ録画デバイスを使用します.2台のカメラ付き携帯電話の場合は、フロントカメラを使用する.
リアカメラにアクセスするにはfacingMode: "environment" ビデオ要件

const constraints = {
  video: {
    width: { ... },
    height: { ... },
    facingMode: "environment"
  },
};

デフォルトはfacingMode: "user" , フロントカメラです.
あなたが既に再生しているビデオでカメラを変えることを望むならば、あなたは他のカメラから流れとそれを取り替える前に、現在の流れを止める必要があります

videoStream.getTracks().forEach((track) => {
  track.stop();
});

スクリーンショットを撮る

あなたがすることができるもう一つの涼しいことは、ビデオ(スクリーンショット)を捕えているビデオです.
たとえば、現在のビデオフレームをキャンバスに描画できます.

// considering there is a
// <canvas id="canvas"></canvas>
// tag in the page
const canvas = document.querySelector("#canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext("2d").drawImage(video, 0, 0);

また、キャンバスのコンテンツを表示することができますimg 要素.
このチュートリアルで作成した例では、キャンバスから動的に画像を作成するボタンを追加し、ページに追加します.以下のようになります.

const img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
screenshotsContainer.prepend(img);

結論

次の例を参照してください.https://doug2k1.github.io/javascript-camera/
完全なソースコードはここにあります.https://github.com/doug2k1/javascript-camera