今回の内容

Chrome Platform Status で Chrome 151 のところに出てきている「usermedia を使ったカメラ利用」を試してみた話の記事です。

Chrome 151 のリリースノートの、該当箇所のリンクは以下になります。

●Chrome 151 | Release notes | Chrome for Developers
　https://developer.chrome.com/release-notes/151#capability_element_usermedia_mvp

usermedia に関する他の公式情報

今回用いる usermedia に関して、他の公式の関連ページは、以下があります。

概要やデモページなどの複数の情報がまとまったページ

●Capability Elements MVP - Chrome Platform Status
　https://chromestatus.com/feature/4926233538330624

デモページ

●permission.site (media capture elements)
　https://permission.site/media_capture_element

usermedia と従来の方法の違い

MediaDevices: getUserMedia() メソッドの場合の処理の流れ

従来、カメラを扱う場合に MediaDevices: getUserMedia() メソッドを使っていました。そのコード例は、以下のような形です。

const stream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
});

video.srcObject = stream;

この処理の流れは、ざっくりと書くと以下になります。

「JavaScript が getUserMedia() を処理」
Chrome がユーザーに許可を求める
ユーザーが許可
Promise で MediaStream

この場合、「Webサイト側が勝手なタイミングでユーザーに許可を求めるダイアログを出す」ということが起こることがあります。

usermedia の場合の処理の流れ

一方で、usermedia の場合はユーザーの操作を起点にした処理になります。

usermedia の場合は、HTML要素で以下を置きます。

    <usermedia id="media"> カメラとマイクを開始 </usermedia>

そして、以下のような処理を使う形になります。

      const media = document.querySelector("#media");

      media.setConstraints({
        video: {},
        audio: {},
      });

      media.addEventListener("stream", () => {
        video.srcObject = media.stream;
      });

上記はユーザー操作なしに実行することはできないようなので、「Webサイト側が勝手なタイミングでユーザーに許可を求めるダイアログを出す」ということが起こらなくなるようです。

usermedia のお試し

usermedia のお試しをやってみます。

具体的には、usermedia の HTML要素と、カメラ映像を出すための video要素を用意し、それらを使う JavaScript の処理を以下のように用意します。

<!doctype html>
<html>
  <body>
    <usermedia id="media"> カメラとマイクを開始 </usermedia>
    <br />

    <video id="video" autoplay muted playsinline></video>

    <script>
      const media = document.querySelector("#media");
      const video = document.querySelector("#video");

      media.setConstraints({
        video: {},
        audio: {},
      });

      media.addEventListener("stream", () => {
        video.srcObject = media.stream;
      });
    </script>
  </body>
</html>

上記の実行結果

これをローカルサーバー上で実行してみます。

Chrome でページを開くと以下の表示が出るので、ボタンをクリックします。

そうすると許可を求めるダイアログが出るので、許可する操作をします。

この後は、以下のようにカメラ映像がページ上に表示された状態になります。

これでお試しは完了です。