【JavaScript】getUserMediaでカメラを起動する【WebRTC】

WebRTCのgetUserMediaを使ってメディアデバイスにアクセスする方法について解説します。

WebRTCとは？

WebRTCとは「Web Real-Time Communication」の略で、 APIを経由してWebブラウザやモバイルアプリケーション間のリアルタイム通信を可能にする技術です。

このWebRTCが提供しているgetUserMediaでカメラデバイスや音声デバイスにアクセスできるようになり、ビデオチャットなどが実現できるというわけです。

getUserMediaの使い方

まず、映像を映すための要素を用意します。

HTML

<video id="video"></video>

続いて、メディアデバイスにアクセスする処理を用意します。

基本構文は以下の通りで、navigator.mediaDevices.getUserMedia()でメディアデバイスにアクセスします。

getUserMedia()の引数には設定値を指定が必要です。以下の例ではconstraintsという名前で定義し、カメラデバイスを起動し音声デバイスを起動しない設定としています。

成功時の処理はthen句に、失敗時の処理はcatch句に分岐されます。

JavaScript

// 設定項目
const constraints = {
  audio: false, // 音声デバイスを起動しない
  video: true // カメラデバイスを起動する
};

// メディアデバイスにアクセスする
navigator.mediaDevices
  .getUserMedia(constraints)
  .then((mediaStream) => {
    // 成功時の処理
  })
  .catch((err) => {
    // 失敗時の処理
  });

最後にメディアデバイス起動成功時にHTML要素に映像を反映する処理を用意します。

映像が準備できたらvideo.play()で映像を再生します。

JavaScript

.then((mediaStream) => {
  // HTML要素を取得
  const video = document.getElementById("video");
  // HTML要素に映像を反映する
  video.srcObject = mediaStream;
  video.onloadedmetadata = () => {
    // 映像を再生する
    video.play();
  };
})

オプション設定例

サイズを指定する

以下のようにカメラ解像度を指定することが可能です。

デバイスに指定した解像度のカメラが存在しない場合は、指定サイズに一番近い解像度のカメラを使用します。

JavaScript

const constraints = {
  audio: false,
  video: { width: 300, height: 300 }
};

widthやheightにはmin（最小値）、ideal（基準値）、max（最大値）を設定することができます。

以下の例だと、100pxから300pxの間で200pxに最も近い解像度のカメラを使用します。

JavaScript

const constraints = {
  audio: false,
  video: {
    width: { min: 100, ideal: 200, max: 300 },
    height: { min: 100, ideal: 200, max: 300 }
  }
};

フロントカメラ・リアカメラを指定する

スマホのようにカメラがフロントとリアの両方にあるデバイスにおいて、どちらのカメラを使用するかを以下のように設定することができます。

JavaScript

const constraints = {
  audio: false,
  video: { facingMode: "user" } // フロントカメラ（インカメラ）を使用
};

JavaScript

const constraints = {
  audio: false,
  video: {
    facingMode: { exact: "environment" } // リアカメラ（背面カメラ）を使用
  }
};

カメラのデバイスIDを指定する

最近のスマホのようにリアカメラが複数存在するデバイスの場合は、デバイスIDを直接指定することもできます。

JavaScript

const constraints = {
  audio: false,
  video: {
    deviceId: xxxxx // デバイスIDを指定
  }
};

まとめ

getUserMediaはユーザーのデバイスにアクセスできる強力なAPIになるので、プロトコルがhttpsに制限されます。

例外として localhost でのみ、httpプロトコルが許可されてますので、開発の際は気をつけてください。

今回は以上です。