公開日: 2026 年 6 月 29 日
Chrome 144 で <geolocation>
要素 がリリースされた後、Capability Elements スイートの次の機能
制御は <usermedia> HTML 要素です。
Chrome 151 から利用できるこの要素は、汎用的な権限リクエストから、カメラとマイクのストリームにアクセスするためのターゲット設定された機能制御への移行の次の段階を示しています。スクリプトによってトリガーされる
プロンプトから、宣言型でユーザーがアクティブにするエクスペリエンスに移行することで、<usermedia>
はボイラープレート コードを削減し、セキュリティを強化します。また、以前にアクセスを拒否したユーザー向けのシームレスな復旧
パスを提供し、長年の権限の穴を効果的に解決します。
権限管理から機能制御へ
<usermedia> 要素は、
Capability Elements スイートでリリースされる次の特殊な制御です。
<geolocation> の導入に続いてPEPC イニシアチブの一部である元の汎用的な <permission>
提案から移行することで、ブラウザはさまざまなハードウェア機能の固有の
複雑さと動作をより効果的に処理できます。
初期の提案では、許可と拒否などの権限状態の管理に重点が置かれていましたが、Capability Elements はデータ メディエーターとして機能します。
<geolocation> 要素はサイトに位置情報オブジェクトを提供し、
<usermedia> はカメラとマイクのアクセス フロー全体を管理します。ユーザーの意図を把握し、ブラウザのプロンプトを管理して、MediaStream オブジェクトをアプリケーションに配信します。この移行により、個別の getUserMedia() 呼び出しが不要になり、実装が簡素化され、ブラウザはユーザーの意図の信頼できるシグナルを取得できます。
コンセプトの検証
最初のオリジン トライアルの実際のデータから、コンテキスト内でのユーザー開始の権限制御により、ユーザーの成功率が大幅に向上することがわかりました。
- Cisco は、最初に権限を拒否したユーザーが従来のプロンプトを使用して権限を付与できる可能性はわずか 10% でしたが、新しい要素では 65% 以上に跳ね上がったことを確認しました。
- Zoom は、この要素を使用してユーザーを復旧に導くことで、システムレベルのブロッカーなど、カメラまたはマイクのキャプチャ エラーが 46.9% 減少 したと報告しています。
- Google Meet では、「マイクが動作しない」というフィードバックが 17% 減少 し、最初にアクセスを拒否したユーザーの権限の復旧成功率が 131% 増加 しました。
<usermedia> 要素を使用する理由
<geolocation> で確立されたパターンに基づいて、<usermedia>
要素は強力な機能をリクエストする際の主な課題に対処します。メディア リクエストは、多くの場合、コンテキスト外のプロンプトをトリガーする命令型 JavaScript 呼び出しに依存しています。誤ってサイトをブロックした場合、その決定を元に戻すにはブラウザの設定を深く掘り下げる必要があり、多くの場合、機能が放棄される「権限の穴」につながります。
<usermedia> 要素は、次の機能を提供することで、これらの問題を解決します。
- 明確な意図とタイミング: プロンプトは、ブラウザ制御の要素を実際にタップした後にのみ表示されるため、意図の信頼できるシグナルを提供します。これにより、ブラウザは、一般的なスクリプトによってトリガーされるリクエストが失敗する原因となる自動のサイレント ブロックを回避できます。
- 復旧の簡素化: 以前にアクセスが拒否された場合、この要素をタップすると、複雑なブラウザ設定に移動することなく、ページ上でカメラまたはマイクをすぐに再度有効にできる特殊な復旧フローがトリガーされます。
- ストリームへの直接アクセス: データ メディエーターとして、この要素はメディア ストリームを直接公開します。これにより、アプリケーションでコールバックとエラー状態を管理するために必要なボイラープレート コードが削減されます。
実装
この要素を統合するには、従来の JavaScript API よりもボイラープレートが大幅に少なくなります。
<geolocation> 要素で確立された宣言型パターンに沿って、HTML に <usermedia> タグを追加し、
setConstraints() メソッドを使用してハードウェア要件を構成できます。
<usermedia id="media-ctrl">
<button>Enable camera and microphone</button>
</usermedia>
const el = document.getElementById('media-ctrl');
// Specify hardware preferences before user interaction:
el.setConstraints({
video: { width: 1280, height: 720 },
audio: { echoCancellation: true }
});
// Handle successful stream acquisition:
el.addEventListener('stream', () => {
videoPreview.srcObject = el.stream;
});
// Handle stream acquisition failure:
el.addEventListener('error', () => {
console.error(`Access failed: ${el.error?.name}`);
});
// Handle prompt cancellation or dismissal:
el.addEventListener('cancel', () => {
console.log('Permission prompt was dismissed by the user.');
});
主な属性とプロパティ
stream: ユーザーがアクセスを許可すると、MediaStreamオブジェクトを提供する読み取り専用プロパティ。setConstraints(): ユーザー操作の前に、deviceIdや解像度などのハードウェア設定を更新できるメソッド。error: リクエストが失敗または破棄された場合にDOMException（NotAllowedErrorなど）を返す読み取り専用プロパティ。onstream: メディア トラックが取得されるとすぐに発生するイベント ハンドラ。onerror: ストリームの取得に失敗した場合に発生するイベント ハンドラ。oncancel: 取得中にユーザーが権限プロンプトをキャンセルまたは破棄した場合に発生するイベント ハンドラ。
スタイリングの制約
ユーザーの信頼を確保し、不正なデザイン パターンを防ぐため、<usermedia>
要素には他の Capability
Elements と同様の厳格なスタイリング制限が適用されます。
- 可読性: ブラウザは、テキストと背景色のコントラストが十分（3:1 以上）であることを確認し、リクエストが常に読み取れるようにします。要素が不正に透明にならないようにするには、アルファ チャンネル（
opacity）を1に設定する必要があります。 - サイズと間隔: ブラウザは、
width、height、font-sizeの最小値と最大値の境界を適用します。要素が視覚的に隠れないように、負のマージンやアウトライン オフセットは無効になります。 - 視覚的な整合性: ブラウザは歪み効果を制限します。たとえば、
transformは 2D 変換と比例スケーリングのみをサポートします。 - CSS 疑似クラス: この要素は、:granted （権限が有効になり、ストリームが取得されると有効になる）などの状態ベースのスタイリングと、:hover や :active などの標準のインタラクション状態をサポートしています。
プログレッシブ エンハンスメントと移行戦略
<geolocation> で確立されたデザイン パターンに沿って、<usermedia>
要素は正常に機能低下するように構築されています。この要素をサポートしていないブラウザは、HTMLUnknownElement として扱い、その子をレンダリングします。これにより、すべてのユーザーにフォールバック エクスペリエンスを提供できます。
カスタム フォールバック パターン
JavaScript で <usermedia> 要素のサポートをプログラムで検出します。
if ('HTMLUserMediaElement' in window) {
// Use modern <usermedia> element logic
} else {
// Fallback to legacy getUserMedia() API
}
この検出ロジックを使用して、<usermedia>
要素内に標準ボタンを追加し、従来の getUserMedia() API をトリガーします。
<usermedia id="stream-handler">
<button id="fallback-stream-handler">
Enable Camera and Mic
</button>
</usermedia>
// Function for handling video/audio streams:
function handleStream (event) {
/* ... */
}
if ('HTMLUserMediaElement' in window) {
// In this case, we have <usermedia> element support:
const streamHandler = document.getElementById('stream-handler');
streamHandler.addEventListener('stream', event => {
handleStream(event);
});
} else {
// <usermedia> element support is missing, so fall back instead:
const fallbackStreamHandler = document.getElementById('fallback-stream-handler');
fallbackStreamHandler.addEventListener('click', event => {
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(handleStream);
});
}
オリジン トライアル参加者の移行
オリジン トライアル中に試験運用版の汎用的な <permission>
要素を統合したデベロッパーの場合、<usermedia> への移行は最小限になるように設計されています。
- タグの更新:
<permission type="camera microphone">を<usermedia>に置き換えて、以前の<permission>要素をターゲットとするすべてのセレクタが、代わりに<usermedia>要素 を使用するように更新されるようにします。 - 機能検出: チェックを
HTMLPermissionElementからHTMLUserMediaElementに更新します。
今後のロードマップ
<usermedia> 要素は音声と動画のリクエストを組み合わせて処理しますが、
今後の Capability Elements のロードマップには次のものが含まれます。
<camera>: 動画のみのシナリオに特化しています。<microphone>: 音声のみのシナリオに特化しています。
これらの機能固有の要素が、デベロッパーがより直感的で信頼性の高いメディア エクスペリエンスを構築するのにどのように役立つかを確認できます。詳細については、 Capability Elements の技術 ガイドをご覧ください。