# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Chrome for Developers (@ChromiumDev) · 平台：X (Twitter) · 日期：2026-07-15

> 原始來源：https://x.com/ChromiumDev/status/2076775728058667205

## 中文摘要

Chrome 151 推出 <usermedia> 元素簡化權限控制。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/0cbfd2a5df18ea8c.png)
> 這張圖片展示了關於介紹 <usermedia> HTML 元素的標題與示意圖。

**核心功能與優勢**
Google 在 Chrome 151 中引入了 `<usermedia>` 元素，這是繼 `<geolocation>` 後「Capability Elements」套件的最新成員。該元素將權限請求與串流傳遞直接整合至 DOM 中，解決了過去依賴 `getUserMedia()` 呼叫所導致的「權限黑洞」問題。其主要優勢包括：
- **明確的使用者意圖**：提示視窗僅在使用者點擊瀏覽器控制的元素後出現，提供更可信的意圖訊號，避免被自動化封鎖機制攔截。
- **簡化的復原路徑**：若使用者先前拒絕存取，點擊該元素即可觸發專屬復原流程，無需進入複雜的瀏覽器設定頁面。
- **減少程式碼負擔**：作為資料中介，該元素直接暴露 `MediaStream` 物件，大幅減少管理回呼與錯誤狀態的樣板程式碼。

**實際成效與應用**
根據初期 Origin Trial 的數據，該元素顯著提升了使用者授權成功率：
- **Zoom**：在初期測試中，相機或麥克風的擷取錯誤率下降了 46.9%。
- **Cisco**：使用者從拒絕權限到成功授權的轉換率，從傳統提示的 10% 提升至超過 65%。
- **Google Meet**：關於「麥克風無法運作」的意見回饋減少了 17%，且權限復原成功率提升了 131%。

**實作與相容性**
`<usermedia>` 支援漸進式增強，不支援的瀏覽器會將其視為 `HTMLUnknownElement`，開發者可透過 JavaScript 偵測支援度並提供後備方案：
- **關鍵屬性**：包含 `stream`（唯讀，取得媒體串流）、`error`（唯讀，回傳 `DOMException`）以及 `onstream`、`onerror`、`oncancel` 等事件處理器。
- **設定方式**：可使用 `setConstraints()` 方法在使用者互動前配置硬體需求（如 `deviceId` 或解析度）。
- **樣式限制**：為防止欺騙性設計，瀏覽器對該元素實施嚴格的樣式限制，包括對比度檢查（至少 3:1）、尺寸範圍限制，並禁止負邊距或外框偏移，同時支援 `:granted`、`:hover` 與 `:active` 等 CSS 虛擬類別。

## 標籤

功能更新, Web, Google, Chrome