[Q&A] USBカメラを指定してブラウザで映像表示ができない。

USBカメラを指定してブラウザで映像表示ができない。

解決したいこと

HTMLとJavaScriptを使い、パソコンに接続したＵＳＢカメラの映像を表示させたい
のですが、カメラを指定する方法がわかりません。
解決方法を教えて頂けないでしょうか。

発生している問題・エラー

PCに接続しているカメラデバイスは下記の４種類ですが、３，４のカメラ指定方法
がわかりません。
1)フロントカメラ
2)リアカメラ
3)USBカメラ１
4)USBカメラ２

フロント、リアは、下記で指定し、表示できる。が、USBカメラの指定方法がわからない。

      facingMode: "user"   // フロントカメラを利用する
      // facingMode: { exact: "environment" }  // リアカメラを利用する場合

自分で試したこと

facingMode　のパラメーターを調べたときに、user、environmentの以外に
left,rightがあった。
しかしleft,rightのどちらを指定しても、片側のUSBカメラ映像しか出力され
なかった。

該当するソースコード

フロントカメラを指定したときのコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Camera Test</title>
  <style>
  canvas, video{
    border: 1px solid gray;
  }
  </style>
</head>
<body>

<h1>HTML5カメラ</h1>

<video id="camera" width="300" height="200"></video>
<canvas id="picture" width="300" height="200"></canvas>
<form>
  <button type="button" id="shutter">シャッター</button>
</form>

<audio id="se" preload="auto">
  <source src="camera-shutter1.mp3" type="audio/mp3">
</audio>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const video  = document.querySelector("#camera");
  const canvas = document.querySelector("#picture");
  const se     = document.querySelector("#se");

  /** カメラ設定 */
  const constraints = {
    audio: false,
    video: {
      width: 300,
      height: 200,
      facingMode: "user"   // フロントカメラを利用する
      // facingMode: { exact: "environment" }  // リアカメラを利用する場合

    }
  };

  /**
   * カメラを<video>と同期
   */
  navigator.mediaDevices.getUserMedia(constraints)
  .then( (stream) => {
    video.srcObject = stream;
    video.onloadedmetadata = (e) => {
      video.play();
    };
  })
  .catch( (err) => {
    console.log(err.name + ": " + err.message);
  });

  /**
   * シャッターボタン
   */
   document.querySelector("#shutter").addEventListener("click", () => {
    const ctx = canvas.getContext("2d");

    // 演出的な目的で一度映像を止めてSEを再生する
    video.pause();  // 映像を停止
    se.play();      // シャッター音
    setTimeout( () => {
      video.play();    // 0.5秒後にカメラ再開
    }, 500);

    // canvasに画像を貼り付ける
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  });
});
</script>
</body>
</html>

環境

OS:Windows11
ブラウザ：edge
USBカメラ１：logicool C270n HDウェブカメラ
USBカメラ２：Microsoft LifeCam Cinema

1Answer

@uasi posted at 2022-07-17

MediaDevices.enumerateDevices() を使って機器のデバイス ID を取得し、

const constraints = { audio: false, video: { deviceId: "デバイス ID" } };

で指定すれば動きそうです。

参考：

2つ目の参考記事にデバイス ID をすべてコンソールに出力するコードがあります。これを書いてデバイス ID を確認し、 constraints に指定してみてください。

ただ、デバイス ID はセキュリティの都合上変化するので、固定値をコードに埋め込むとそのうち動かなくなります。デバイスを選ぶ UI を作る必要がありそうです。

Comments

@yukkin
Questioner
MediaDevices.enumerateDevices() を使ってIDを取得するという点で、苦戦しています。
どのようにすれば、実行結果（カメラID）を見ることができるのでしょうか。お手数ですが、教えていただくこと可能でしょうか。
@uasi
どこでつまづいているのでしょうか。コンソールの開き方が分からないということですか？
@uasi
どうも先に getUserMedia() で適当な入出力デバイスを有効にしないとデバイス ID が取得できないようです。参考： https://ja.tech.jar.jp/webrtc/media.html#スクリーン共有

上記を考慮してデバイス ID を取得し、結果をページの末尾に表示するスクリプトを書きました。これを HTML の適当な場所に書けば動くと思います。

<script>
document.addEventListener("DOMContentLoaded", () => {
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
console.log("enumerateDevices() not supported.");
return;
}

navigator.mediaDevices.getUserMedia({ audio: true }).then(() => {
navigator.mediaDevices.enumerateDevices().then((devices) => {
const ul = document.createElement("ul");
devices.forEach(function(device) {
const li = document.createElement("li");
li.textContent = `kind: "${device.kind}", label: "${device.label}", id: "${device.deviceId}"`;
ul.append(li);
});
document.body.append(ul);
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
})
})
</script>
@yukkin
Questioner
ご回答ありがとうございます。昨日より、上記コードをHTMLのBody内に記述し実行しておりますが、結果、下記が出力され、ID部分は、””表示でした。
追加した箇所は、最後のカメラのスクリプト＜/script＞の下の行です。
しかし、IDが出力さてない状況です。大変お手数おかけしますが、追加で試すことありましたら、何卒ご教示いただきたく、よろしくお願いいたします。

kind: "audioinput", label: "", id: ""
kind: "videoinput", label: "", id: ""
kind: "audiooutput", label: "", id: ""
@yukkin
Questioner
また、先にコメント頂いた、コンソールについては、F12で開発ウィンドウを表示させ、その中のコンソール画面にて、下記コマンドを実施（一部省略）。その結果書きエラーが発生しております。

●実行コマンド
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
　　　　　　　　　　　　･･･省略･･･
console.log(err.name + ": " + err.message);});

●出力エラー
コンソールでコマンド実行後に、下記エラーがでています。
Uncaught SyntaxError: Illegal return statement
@uasi
> Uncaught SyntaxError: Illegal return statement

これは元のソースが悪いのですが、関数内にコードを書く想定で return 文が書いてあります。関数の外で return を使っているせいでエラーが出ています。 return 文だけ消して実行すれば動くと思います（が、先にデバイスの利用を許可していないので id が空になりそうです）
@uasi
> IDが出力さてない状況です。大変お手数おかけしますが、追加で試すことありましたら、何卒ご教示いただきたく、よろしくお願いいたします。

ID もそうですしカメラも1つしか認識されていませんね。ブラウザのセキュリティ設定でカメラの利用を許可するとかですかね。