HTML

<usermedia>

要素：機能制御能力スートの新しい段階

Chrome 144 で導入された

<geolocation>

<usermedia>

2026 年 6 月 29 日現在で Chrome 151 から利用可能となるこの新要素は、従来の汎用的な許可リクエストから、カメラおよびマイクストリームのアクセスを目標指向かつ機能的に制御する仕組みへ移行することを意味します。

• 宣言的アプローチ: スクリプトのトリガーによるプロンプト発動ではなく、ユーザーによる物理的なアクティベーション（タップなど）に基づいた体験へとシフト。
• 利点の獲得: 冗長な記述コード（ボイラープレート）削減、セキュリティ向上、アクセス拒否ユーザーへのシームレスな回復パスを提供。
• 課題解決: 長年課題となっていた「許可の穴（permission hole）」問題を効果的に解消します。

概念：許可管理から機能制御へ

<geolocation>

<usermedia>

仕組みの変化

• 従来の

  <permission>

  : 「許可」と「拒否」の状態管理に焦点を当てていた提案。
• 機能制御能力（Capability Elements）: データ仲介役として機能し、ブラウザがハードウェアの複雑性をより効果的に扱うことを可能にする設計へ転換。

具体的な役割

<geolocation>

<usermedia>

1. ユーザー意図の検出
2. ブラウザプロンプトの管理
3. アプリケーションへ MediaStream オブジェクトの届き

これにより、個別の

getUserMedia()

コンセプトの有効性と成果

文脈内かつユーザー主導の許可制御は、ユーザーの成功率を著しく向上させることを実証データが示しています。

• Cisco: 初期には約 10% でしか許可されなかったユーザーが、新要素を用いると65% 以上への飛躍的増加を実現。
• Zoom: システムブロックによるエラー減少で**46.9%**の改善を見込み、回復機能を強化。
• Google Meet: 「マイク動作しない」フィードバックを**17%削減し、拒否ユーザーからの成功回復を131%**増加させることに成功。

「許可の穴」の解消

メディアリクエストは従来のイミパティブな JS 呼び出しに依存し、誤ブロック時の回復には設定変更が必要で、機能放棄へと繋がりました。

<usermedia>

• 明確な意図とタイミング: ブラウザ制御要素への物理的タップ後に表示されるため、自動化された静かなブロック（クイエットブロック）を迂回可能。
• 簡素化された回復: 拒否済み状態から、特別なブラウザ設定操作なしでページ上で直ちにカメラ・マイク再有効化が可能。
• 直接的ストリームアクセス: コールバック管理用のボイラープレートコードを削減し、データ仲介役として直接公開。

実装概要

<usermedia>

<geolocation>

setConstraints()

コード例

<!-- HTML: カメラとマイクを有効化する -->
<usermedia id="media-ctrl">
  <button>カメラとマイクを有効化</button>
</usermedia>

// JavaScript の実装手順
const el = document.getElementById('media-ctrl');

// 【1】ユーザーインタラクション前のハードウェア設定指定
el.setConstraints({
  video: { width: 1280, height: 720 },
  audio: { echoCancellation: true }
});

// 【2】ストリーム取得成功時の処理
el.addEventListener('stream', () => {
  videoPreview.srcObject = el.stream;
});

// 【3】ストリーム取得失敗時の処理
el.addEventListener('error', () => {
  console.error(`アクセスに失敗しました：${el.error?.name}`);
});

// 【4】プロンプトキャンセル/Dismiss の処理
el.addEventListener('cancel', () => {
  console.log('ユーザーによって許可プロンプトが dismissされました。');
});

キーな属性とプロパティ一覧

stream

setConstraints()

error

イベントハンドラ

stream

error

cancel

スタイリング制限（セキュリティ対策）

ユーザーの信頼性を確保し、欺瞞的なデザインを防ぐため、厳格なスタイリング制限が適用されます：

• 可読性の保証:
  • テキストと背景色のコントラスト比は少なくとも 3:1 必要。
  • アルファチャネル（透明度）は 1 に固定され、欺瞞的な透明化を防ぐ。
• サイズと間隔の強制:
  • 幅・高さ・フォントサイズの最小値および最大値が強制適用される。
  • 負のマージンやアウトラインオフセットは無効化され、視覚的な隠蔽を防ぐ。
• 視覚的完全性の制限:

  • transform

    は 2D トランスレーションと比例スケーリングのみをサポート（歪み効果の防止）。
• 状態ベースのスタイリング対応:

  • :granted

    （権限アクティブ時）や標準的なインタラクション状態（

    :hover

    ,

    :active

    ）がサポートされる。

段階的向上と移行戦略

<geolocation>

固有のフォールバックパターン検出

JavaScript でサポートの有無を確認し、ロジックを切り替えます：

if ('HTMLUserMediaElement' in window) {
  // モダンな <usermedia> 要素ロジックを使用
} else {
  // レガシーな getUserMedia() API にフォールバック
}

フォールバック実装例

新要素内での標準ボタンを使用して、レガシー API をトリガーします：

<usermedia id="stream-handler">
  <button id="fallback-stream-handler">
    カメラとマイクを有効化
  </button>
</usermedia>

function handleStream(event) {
  /* ... */
}

if ('HTMLUserMediaElement' in window) {
  // モダンな <usermedia> が利用可能：
  const streamHandler = document.getElementById('stream-handler');
  
  streamHandler.addEventListener('stream', event => {
    handleStream(event);
  });
} else {
  // <usermedia> 非対応、レガシーフォールバック：
  const fallbackStreamHandler = document.getElementById('fallback-stream-handler');
  
  fallbackStreamHandler.addEventListener('click', event => {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(handleStream);
  });
}

オリジントライアル参加者向けの移行案内

既存の

<permission>

• タグ更新:
  • 以前は

    <permission type="camera microphone">

    としていた部分を

    <usermedia>

    に置換します。
• 機能検出の更新:
  • コード内で

    HTMLPermissionElement

    のチェックを

    HTMLUserMediaElement

    に更新します。

今後のロードマップ

現在は音声とビデオを組み合わせたリクエストを処理しますが、将来の機能制御能力スートには以下が含まれます：

• <camera>

  : ビデオのみを対象としたシナリオに焦点を当てた要素。

• <microphone>

  : オーディオのみを対象としたシナリオに焦点を当てた要素。

これにより、開発者はさらに直感的で信頼性の高いメディア体験を構築できるでしょう。詳細については 機能制御能力（Capability Elements）技術ガイド を参照してください。

参考文献: 仕様書：HTML 要素「」の紹介