宣言的にカメラ・マイク権限を要求する `<usermedia>` 要素

ビデオ会議や音声入力のように、カメラとマイクを使う Web アプリケーションを使用する際以下のようなビデオや音声の権限プロンプトを目にしたことがあるでしょう。もし許可なしにカメラやマイクをブラウザに使われてしまうと、盗聴や盗撮の危険があるため、必ずユーザーの許可を得る必要があるのです。

このとき困るのは、ユーザーが間違えて「許可しない」を選んでしまったあとです。次回以降何度 getUserMedia() を呼んでも NotAllowedError が発生し、プロンプトは出ずに即座に失敗します。サイト側からは、ユーザーにブラウザの設定画面を開いてもらうよう案内する以外に打つ手がありません。「間違えて権限ブロックしてしまったのでブラウザ再起動してきます...」といったやり取りを 1 度は経験したことがある人も多いでしょう。Explainer では、この状況を permission hole と呼んでいます。

これは、権限を JavaScript から要求するものとして設計したことによる構造的な問題です。ユーザーの「通話に参加」ボタンを押して権限の要求を呼び出したのか、それともスクリプトが勝手に呼び出したのかをブラウザは知ることができません。もしユーザーが権限をブロックした後もプロンプトを出し続ければ、悪意のあるサイトがスクリプトで何度も呼び出して永遠にプロンプトを出し続けられるような攻撃が可能になってしまいます。そこで、ブラウザは一度でもブロックされたサイトに対しては、スクリプトからの要求を抑制するようになりました。

その一方で、本当に権限を与えたかったにも関わらず間違えてブロックしてしまったユーザーの回復手段が失われてしまったのです。

Chrome 151 で使えるようになった <usermedia> 要素は、この問題を解決するために提案されたものです。HTML 要素を使用して宣言的な方法でユーザーの権限を要求することにより、一度アクセスを拒否したユーザーに対して自然な回復手段を提供します。

この記事では、<usermedia> の概要について紹介し、実際に動かしてみた様子を紹介します。

従来の getUserMedia() による権限要求のおさらい

まずはじめに、従来の getUserMedia() による権限要求のコード例を見てみましょう。下記のコードでは、ユーザーが「通話に参加」ボタン（#join）を押したときに navigator.mediaDevices.getUserMedia() を呼び出してカメラとマイクの権限を要求しています。権限の取得に成功した場合は、取得した MediaStream を <video> 要素にセットしてプレビューを表示します。

const joinButton = document.querySelector("#join");
const preview = document.querySelector("#preview");
 
joinButton.addEventListener("click", async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true,
    });
    preview.srcObject = stream;
  } catch (error) {
    // NotAllowedError のとき、ここから権限を取り戻す手段がない
    // ユーザーにブラウザの設定画面を開いてもらうよう案内するしかない
    showManualInstructions();
  }
});

ユーザーがボタンを押したときに権限プロンプトが出て、許可すればプレビューが表示されます。しかし、ユーザーが過去にブロックを選んでいた場合、この getUserMedia() は NotAllowedError で即座に失敗します。権限プロンプトすら出ないため、サイト側からはユーザーにブラウザの設定画面を開いてもらうよう案内するしかありません。

<usermedia> 要素とは

getUserMedia() の呼び出しの問題点は、JavaScript から呼び出すため、ブラウザがユーザーの意図を知ることができない点にあります。ページ内のどのボタンをユーザーが押したのかをブラウザが知っていれば、権限プロンプトを出すかどうかの判断が可能です。

そこで、宣言的な方法で権限要求を行うために、<usermedia> 要素が提案されました。<usermedia> 要素は以下のようにブラウザが描画するボタンとして表示されます。内部のテキストはローカライズされユーザーの言語に応じて変化します。

ユーザーが <usermedia> 要素をクリックすると、ブラウザは必要に応じて権限プロンプトを表示します。成功すれば stream イベントを発火して stream プロパティに MediaStream をセットします。この MediaStream を <video> 要素にセットすれば、プレビューが表示されます。

<usermedia id="capture"></usermedia>
<video id="preview" autoplay playsinline muted></video>

const capture = document.getElementById("capture");
const preview = document.getElementById("preview");
 
// ユーザーがボタンをクリックして権限要求に成功した場合、ストリームが得られる
capture.addEventListener("stream", () => {
  preview.srcObject = capture.stream;
});
 
// エラーが発生した場合
capture.addEventListener("error", () => {
  console.error(capture.error);
});
 
// ユーザーが権限プロンプトを閉じた場合
capture.addEventListener("cancel", () => {
  console.log("Permission prompt was dismissed by the user.");
});

以下のように「マイクとカメラの使用」ボタンをクリックすると、権限プロンプトが表示され、許可すればプレビューが表示されることが確認できます。また、一度権限プロンプトを閉じた後でも、再度ボタンをクリックすれば権限プロンプトが表示されるという挙動も確認できます。

ユーザーのインタラクションの前に .setConstraints() を呼び出すことで、解像度やフレームレートなど、getUserMedia() と同様の制約を指定できます。

capture.setConstraints({
  video: { width: { ideal: 1280 }, height: { ideal: 720 } },
  audio: { echoCancellation: true },
});

ただし、getUserMedia() に渡す制約と完全に同じではありません。現在の仕様案では、exact・min・max などの必須制約や advanced 制約は、制約に一致するデバイスが見つからない場合にユーザーへ何も示されないまま失敗することを避けるため、ユーザーエージェントによって取り除かれます。

また、<usermedia> 要素は getUserMedia() と同様にセキュアコンテキストでのみ動作します。HTTPS で配信されたページまたは localhost などのローカル環境で使用する必要があります。セキュアコンテキストでない場合は、要素のフォールバックコンテンツが表示されます。

スクリプトからの click() では発火しない

<usermedia> の要点は、ブラウザが「ユーザーが本当に望んだ要求か」を判断できることです。これを宣言的なボタンをクリックさせることにより実現しているのですが、少し勘のいい人なら JavaScript からボタンを強制的にクリックさせることはできるのではないかと考えるでしょう。しかし、このような穴は当然見過ごされるはずもなく、スクリプトからのクリックでは権限要求は発火しないように設計されています。

次のコード例で実際に試してみましょう。

const capture = document.getElementById("capture");
// 500ms 後にスクリプトからクリックを呼び出す
setTimeout(() => {
  capture.click();
}, 500);
 
capture.addEventListener("stream", () => {
  console.log("stream イベント。capture.stream =", capture.stream);
});
capture.addEventListener("error", () => {
  console.error("error イベント。error =", capture.error);
});

このコードを実行すると、InvalidStateError が発生し、stream イベントは発火せず、error イベントが発火します。

InvalidStateError: The permission element activation must be triggered by a user gesture.

ブラウザが信頼する UI であるための制約

ブラウザが要素を「信頼できるボタン」として扱う以上、ページ側がその見た目を自由に変えられては困ります。ユーザーに見えないボタンや、別の意味に見えるボタンを踏ませることができてしまうためです。そこで <usermedia> にはスタイルの制約が設けられています。

Chrome の解説によれば、スタイルには次のような制限があります。

• 文字色と背景色のコントラスト比は 3:1 以上
• opacity は 1 でなければならない
• 幅、高さ、フォントサイズに上限と下限がある
• 負のマージンや outline-offset は使えない
• transform は 2D の平行移動と等比の拡大縮小に限られる

実際に試してみましょう。以下のコードでは <usermedia> 要素に font-size: 4px を指定してボタンを小さく表示しています。

<usermedia style="font-size: 4px;" id="capture"></usermedia>

この状態でボタンをクリックすると、InvalidStateError が発生し、error イベントが発火します。エラーメッセージからスタイルの制約により失敗していることがわかります。

InvalidStateError: The permission element is disabled due to: invalid style.

一方で、透明化や画面外への移動を防ぐため、以下の opacity や transform のスタイル指定は適用されません。

<usermedia style="opacity: 0; transform: translateX(-1000px);" id="capture"></usermedia>

要素を操作できる状態になるまで待つ

<usermedia> 要素は、DOM に挿入された直後やレイアウトが変化している最中には活性化できない場合があります。ユーザーがクリックする直前に要素を挿入したり移動したりして、別の UI に見せかけるクリックジャッキングを防ぐためです。

マウス操作に合わせて <usermedia> 要素を動的に埋め込む例を見てみましょう。

const mount = document.getElementById("mount");
 
mount.addEventListener(
  "pointerenter", () => {
    const capture = document.createElement("usermedia");
    capture.id = "capture";
    mount.appendChild(capture);
  },
  { once: true }
);

表示された要素を素早くクリックしたところ、次の InvalidStateError が発生しました。

InvalidStateError: The permission element is disabled due to: being recently attached to layout tree, intersection occluded or distorted, intersection with viewport changed.

エラーメッセージには複数の理由が含まれる場合があります。この例では、要素がレイアウトツリーに追加された直後であることに加え、ビューポートとの交差状態が変化したことなどが理由として示されています。ページに <usermedia> 要素が表示されてから少し待ってからクリックする必要があるということですね。

要素がクリップされている

<usermedia> 要素の一部が overflow: hidden などでクリップされている場合も活性化できません。次の例では、親要素の幅を <usermedia> 要素より小さくして、右側を隠しています。

<div class="clip-container">
  <usermedia id="capture"></usermedia>
</div>
 
<style>
  .clip-container {
    width: 95px;
    height: 48px;
    overflow: hidden;
  }
 
  #capture {
    width: 220px;
  }
</style>

ボタンの見えている部分をクリックしたところ、次の InvalidStateError が発生しました。

InvalidStateError: The permission element is disabled due to: intersection out of viewport or clipped.

要素が別の要素に覆われている

<usermedia> 要素が別の要素に覆われている場合も、クリックジャッキングの可能性があるため活性化が拒否されます。次の例では、pointer-events: none を指定した半透明の要素を一部に重ねています。クリックイベント自体は <usermedia> 要素へ届きますが、表示の一部が隠れているため権限要求は実行されません。

<div class="capture-container">
  <usermedia id="capture"></usermedia>
  <div class="cover"></div>
</div>
 
<style>
  .capture-container {
    position: relative;
  }
 
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 20px;
    background: rgb(0 0 0 / 70%);
    pointer-events: none;
  }
</style>

この状態で、覆われていない部分をクリックしたところ、次の InvalidStateError が発生しました。

InvalidStateError: The permission element is disabled due to: intersection occluded or distorted.

要素の一部だけが隠れている場合や、覆っている要素が pointer-events: none でクリックを妨げない場合でも拒否される点に注意してください。

なお、これらの具体的な判定条件やエラーメッセージは Chrome の実装に依存します。Media Capture and Streams Extensions の仕様では、ユーザーエージェントは少なくとも信頼されていないイベントを拒否し、さらにイベントを信頼できるか判断するための実装依存の手順を実行することが推奨されています。

指定できるスタイルと擬似クラス

<usermedia> の見た目は、制約の範囲内であれば自由に変えられます。なお、内部テキストの内容は変更できません。

<usermedia> 要素は、<button> 要素と同じように擬似クラスを指定できます。:hover、:active などの擬似クラスを指定して、ホバー時や押下時の見た目を変えることができます。特別な擬似クラスとして :granted が用意されています。:granted は権限が許可され、ストリームが取得された状態のときに有効になります。

usermedia {
  /* padding を効かせるには width / height が auto である必要がある */
  width: auto;
  height: auto;
  padding: 0.6em 1.4em;
 
  background-color: #1a56db;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #1a56db;
  border-radius: 999px;
  cursor: pointer;
}
 
usermedia:hover {
  background-color: #1e429f;
  border-color: #1e429f;
}
 
usermedia:active {
  background-color: #233876;
  border-color: #233876;
}
 
/* 許可済みなら塗りつぶしをやめ、白地に青枠にする */
usermedia:granted {
  background-color: #ffffff;
  color: #1a56db;
  border-color: #1a56db;
}

色を変える際は、どの状態でもコントラスト比 3 以上を保つ必要がある点に注意してください。ホバー時だけ色を薄くする、といった指定で比率が 3 を下回ると、その状態で要素が無効になります。以下のようにスタイルが適用された状態のボタンを確認できます。

フォールバック

現時点で対応しているブラウザは Chrome 151 以降のみです。もし本番で使う場合は、未対応ブラウザでは従来どおり自前のボタンから getUserMedia() を呼ぶようにフォールバックする必要があります。

未対応ブラウザは <usermedia> を未知の HTML 要素として扱い、子要素を通常どおり表示します。そこで、次のようにフォールバック用のボタンを子要素として配置します。対応ブラウザでは、ブラウザが描画する UI が代わりに表示されます。

<usermedia id="capture">
  <button id="fallback-button" type="button">
    カメラとマイクを使用
  </button>
</usermedia>
<video id="preview" autoplay playsinline muted></video>

const preview = document.getElementById("preview");
 
if ("HTMLUserMediaElement" in window) {
  const capture = document.getElementById("capture");
  capture.setConstraints({
    video: { width: { ideal: 1280 }, height: { ideal: 720 } },
    audio: { echoCancellation: true },
  });
  capture.addEventListener("stream", () => {
    preview.srcObject = capture.stream;
  });
  capture.addEventListener("error", () => {
    showManualInstructions(capture.error);
  });
} else {
  // 未対応ブラウザでは従来どおり自前のボタンから getUserMedia() を呼ぶ
  document.getElementById("fallback-button").addEventListener("click", async () => {
    try {
      preview.srcObject = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
      });
    } catch (error) {
      showManualInstructions(error);
    }
  });
}

まとめ

• 従来の getUserMedia() では、一度ブロックされるとサイト側から権限を再設定できなかった。この問題を解決するために宣言的な方法で権限要求を行う <usermedia> が提案された
• <usermedia> 要素をクリックすると、ブラウザは必要に応じて権限プロンプトを表示し、成功すれば stream イベントを発火して MediaStream を取得できる
• スクリプトから click() を呼んでもストリームは取得できず、InvalidStateError になる。要素そのものへのユーザー操作が必要である
• ブラウザが信頼する UI であるためのスタイル制約があり、透明化や画面外への移動を防ぐために値の補正または活性化の拒否が行われる。コントラスト比やサイズなどの制約に違反した場合や、要素がクリップされたり別の要素に覆われたりした場合は InvalidStateError になる
• 擬似クラス :granted が用意されており、権限が許可され、ストリームが取得された状態のときに有効になる

参考

• The <usermedia> HTML element - Chrome for Developers
• Media Capture and Streams Extensions - The usermedia HTML element
• Media Capture Elements Explainer
• Add Media Capture Elements (<usermedia>, <camera>, <microphone>) and Explainer #168
• Discussion thread for an <usermedia> element · WICG/PEPC #62
• <usermedia> element（初期の Explainer） · WICG/PEPC