Zenn
📷

1台のPCに複数のウェブカメラが接続されているときに好きなカメラを選択する方法📷📷📷

2021/05/24に公開
Chrome
WebRTC
Firefox
Edge
tech

@ikkou です。これは知っている人は知っているけれど、意外と知らない人もいるような気がする、そんな系の記事です。答えを先に書くと chrome://settings/content/camera から変更できます。

昨今の情勢によってオンラインイベントとなってしまった『Google I/O 2021』が終わりました。来年 2021 年には今のような状況が落ち着いてまたあの Shoreline Amphitheatre で開催されることを願うばかりです。

Google I/O といえば　I/O のロゴを模したフォトスポットが用意されていて、みんな大体ここで撮った写真を事後レポートに使うことが多い印象です。しかし今年はオンラインイベント、さてどうするかと思えば公式で I∕O Photo Booth が用意されていました📷

https://photobooth.flutter.dev/#/

ちなみに Flutter と Firebase で作られていて、ソースコードも公開されています。

https://github.com/flutter/photobooth

さてここで本題です。昨今の情勢も相まって皆さん口と顔は1つずつしかないのに、マイクやウェブカメラをたくさん買っていませんか? 私は買っています。今この記事を書いている PC のディスプレイには ELECOM と EMEET のウェブカメラ、そして Azure Kinect DK が載っかっています。さらには美肌補正のための Snap Camera やアバター化するための OBS Virtual Camera 等々も起動しています。

この状態で先の I∕O Photo Booth で Get Started をクリックして起動しましょう。何が映っていますか? 特別なことをしていなければ自分自身が映っているはずです。でも待ってください。そのカメラは使いたいウェブカメラですか? ウェブカメラ B を使いたいのに、ウェブカメラ A が起動していませんか?

例えば Goole Meets であれば設定画面から使用するカメラを変更できますが、I∕O Photo Booth にはそのような UI が用意されていません。I∕O Photo Booth では好きなウェブカメラを選べない?

答えは簡単です。アドレスバーに chrome://settings/content/camera と打ち込んでください。

あるいは設定→プライバシーとセキュリティ→カメラに、使用している PC に登録されているウェブカメラの一覧をプルダウンで選択できます。これは必ずしも使用な可能な状態とは限りません。

なんにせよここで使用したいウェブカメラを選択することで、カメラの変更 UI を持たないウェブアプリでも、好きなウェブカメラでカメラを使えるようになります。

例えば OBS に kawaii アバターを映して OBS Virtual Camera を起動し、先の設定画面で OBS Virtual Camera を選択すれば、次のような写真も撮れました:)

© HEAVEN chan

ちなみに Firefox の場合は Chrome と異なり、初回アクセス時にカメラを選択します。

この時、『今後も同様に処理する』にチェックを入れた状態で『許可』すると、2 回目以降は指定したウェブカメラで固定されます。そして Firefox の場合は Chrome のように設定画面からカメラを変更できません。

対応方法としては about:preferences#privacy にアクセスし、カメラの設定で表示される該当のウェブサイトをクリックし、下部にある「ウェブサイトを削除」をクリックすることで、初回アクセス時と同様の状態に戻り、変更できるようになります。

そして Chromium エンジンに変わった Microsoft Edge の場合は頭を chrome から edge に変わっただけの edge://settings/content/camera から変更できます。変更する場合も Chrome 同様に別のカメラを選択して再読み込みするだけです。

ちなみに JavaScript から使用可能なカメラの取得には navigator.mediaDevices.enumerateDevices() メソッドを使用します。

navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    // ...
  });

これにより MediaDeviceInfo の配列が Promise で返ってくるので、選択できるようになるのですが、事前にアクセスが許可されている等の条件があるので、ちょっと面倒になってきます。

現場からは以上です:)

Discussion