Chrome 151 から、カメラとマイクのストリーム取得用 HTML 要素 <usermedia> が利用できる。Capability Elements の一環で、Chrome 144 の <geolocation> に続く機能別コントロールである。ブラウザ制御の要素へのタップを契機に権限プロンプトを出し、同意後は MediaStream を要素経由で渡す。getUserMedia() の呼び出しやコールバック管理をサイト側で抱え込まずに済み、以前拒否したユーザー向けの回復フローもページ上で再提示できる。

Origin Trial では、Cisco で拒否後の再許可成功率が従来プロンプトの約 10% から 65% 超へ上がり、Zoom ではカメラ・マイクのキャプチャエラーが 46.9% 減り、Google Meet では拒否後の回復成功が 131% 増えた。

#実装の要点

マークアップに <usermedia> を置き、setConstraints() で解像度やエコーキャンセルなどの好みをユーザー操作前に渡す。成功時は stream イベントと読み取り専用の stream プロパティ、失敗時は error、プロンプト却下時は cancel を扱う。

html
<usermedia id="media-ctrl">
  Enable camera and microphone
</usermedia>
js
const el = document.getElementById("media-ctrl");

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

el.addEventListener("stream", () => {
  videoPreview.srcObject = el.stream;
});

el.addEventListener("error", () => {
  console.error(`Access failed: ${el.error?.name}`);
});

el.addEventListener("cancel", () => {
  console.log("Permission prompt was dismissed by the user.");
});

見た目には他の Capability Elements と同様の制約がある。テキストと背景のコントラストは少なくとも 3<1>、opacity は 1、幅・高さ・フォントサイズに上下限があり、transform は 2D の平行移動と比例スケールに限られる。状態擬似クラスとして :granted などが使える。

#フォールバックと移行

未対応ブラウザでは要素は HTMLUnknownElement として扱われ、子ノードが表示される。'HTMLUserMediaElement' in window で検出し、非対応時は子のボタンから従来の getUserMedia() へフォールバックできる。Origin Trial で汎用の <permission> を使っていた場合はタグを <usermedia> に差し替え、検出も HTMLPermissionElement から HTMLUserMediaElement へ更新する。

ロードマップには映像専用の <camera> と音声専用の <microphone> が続く。

#参考文献