發布日期：2026 年 6 月 29 日
Chrome 144 推出 <geolocation> 元素後，功能控制項套件中的下一個功能控制項就是 <usermedia> HTML 元素。這個元素自 Chrome 151 起推出，標示著從一般權限要求過渡到針對存取攝影機和麥克風串流的目標和功能控制項的下一個階段。從指令碼觸發的提示轉向宣告式和使用者啟動的體驗，<usermedia>可減少樣板程式碼、提升安全性，並為先前拒絕存取權的使用者提供流暢的復原路徑，有效解決長期以來的權限漏洞。
從權限管理到功能控制
<usermedia> 元素是繼 <geolocation> 成功推出後，在功能元素套件中推出的下一個專用控制項。這項從原始通用提案 (PEPC 計畫的一部分) 的轉換，可讓瀏覽器更有效地處理不同硬體功能的獨特複雜度和行為。<permission>雖然早期提案主要著重於管理權限狀態 (例如允許與拒絕)，但 Capability Elements 可做為資料中介。
<geolocation> 元素會為網站提供位置物件，並管理相機和麥克風存取權的整個流程。<usermedia>可擷取使用者意圖、管理瀏覽器提示，並將 MediaStream 物件傳送至應用程式。這項異動可省去個別 getUserMedia() 呼叫的需要，簡化實作程序，並確保瀏覽器擁有使用者意圖的信任信號。
驗證概念
從最初的原始碼試用計畫中取得的實際資料顯示，背景資訊充足的情況下提出權限要求，以及使用者主動發起的權限控制，可大幅提升使用者成功率。
- Cisco 發現，如果使用者一開始拒絕授權，使用舊版提示成功授權的機率只有約 10%，但使用新元素後，這個比率會提高到 65% 以上。
- Zoom 報告指出，使用這個元素引導使用者完成復原程序後，攝影機或麥克風擷取錯誤 (例如系統層級的封鎖) 減少了 46.9% ；
- Google Meet 收到「麥克風無法運作」的意見回饋減少了 17% ，且使用者一開始拒絕存取權後，成功恢復權限的比例增加了 131% 。
為何要使用 <usermedia> 元素？
<usermedia>元素以 <geolocation> 建立的模式為基礎，可解決要求強大功能時的核心挑戰。媒體要求依賴命令式 JavaScript 呼叫，這類呼叫通常會觸發情境外的提示。如果您不小心封鎖網站，就必須深入瀏覽器設定才能撤銷這項決定，這類「權限漏洞」通常會導致功能遭到捨棄。
<usermedia> 元素提供下列功能，可解決這些問題：
- 明確的意圖和時機：提示只會在實際輕觸瀏覽器控制的元素後顯示，因此可提供可信的意圖信號。這樣一來，瀏覽器就能略過自動靜音封鎖，避免一般指令碼觸發的要求失敗。
- 簡化復原程序：如果先前拒絕存取權，輕觸元素會觸發專屬復原流程，讓您在網頁上立即重新啟用攝影機或麥克風，不必前往複雜的瀏覽器設定。
- 直接存取串流：這個元素會以資料中介的角色，直接公開媒體串流。這樣一來，您在應用程式中管理回呼和錯誤狀態時，所需的樣板程式碼就會減少。
導入作業
與舊版 JavaScript API 相比，整合元素所需的樣板程式碼大幅減少。按照 <geolocation> 元素建立的宣告式模式，您可以將 <usermedia> 標記新增至 HTML，並使用 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)，確保要求內容一律清晰易讀。您必須將 Alpha 通道 (
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> 元素會處理音訊和影片的合併要求，而未來功能元素的藍圖包括：
<camera>：專門著重於僅限影片的情境。<microphone>：專門處理純音訊情境。
您可以瞭解這些功能專屬元素如何協助開發人員建構更直覺且值得信賴的媒體體驗。詳情請參閱「功能元素技術指南」。