WebRTC：navigator.mediaDevices权限检测与设备枚举问题咨询

核心问题：device.label检测权限是否可靠？ #

可靠。根据规范和主流浏览器实现：

• 当用户未授予媒体权限（无活跃媒体流、无持久权限）时，enumerateDevices返回的所有MediaDeviceInfo对象的label字段必然为空字符串，这是浏览器的安全限制，防止通过设备信息指纹识别用户；
• 一旦用户通过getUserMedia授予权限（哪怕是临时授权，只要存在活跃媒体流），或是设置了持久媒体权限，再次调用enumerateDevices时，所有设备的label都会被填充为真实设备名称（比如「内置麦克风」「USB高清摄像头」）。

实现代码示例 #

JavaScript逻辑 #

// 页面初始化逻辑
async function initMediaDeviceUI() {
  const deviceSelect = document.getElementById('device-select');
  const connectBtn = document.getElementById('connect-btn');
  const permissionDesc = document.getElementById('permission-desc');

  // 先枚举设备，判断权限状态
  const devices = await navigator.mediaDevices.enumerateDevices();
  const hasPermission = devices.some(device => device.label !== '');

  if (hasPermission) {
    // 已授权，直接渲染设备选择框
    renderDeviceSelect(devices);
    connectBtn.style.display = 'none';
    permissionDesc.style.display = 'none';
  } else {
    // 未授权，展示按钮和说明文本
    connectBtn.style.display = 'block';
    permissionDesc.style.display = 'block';
  }
}

// 渲染设备下拉选择框
function renderDeviceSelect(devices) {
  const select = document.getElementById('device-select');
  select.innerHTML = '';
  
  // 过滤出音频输入设备，可根据需求调整为视频或其他类型
  const targetDevices = devices.filter(device => device.kind === 'audioinput');
  
  targetDevices.forEach(device => {
    const option = document.createElement('option');
    option.value = device.deviceId;
    option.textContent = device.label;
    select.appendChild(option);
  });
  select.style.display = 'block';
}

// 绑定「打开设备」按钮事件
document.getElementById('connect-btn').addEventListener('click', async () => {
  try {
    // 请求音频权限，如需视频可修改constraints参数
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // 若无需持续使用媒体流，可停止临时流
    stream.getTracks().forEach(track => track.stop());
    // 再次枚举设备获取带标签的完整信息
    const devices = await navigator.mediaDevices.enumerateDevices();
    renderDeviceSelect(devices);
    // 隐藏按钮和说明文本
    document.getElementById('connect-btn').style.display = 'none';
    document.getElementById('permission-desc').style.display = 'none';
  } catch (err) {
    console.error('权限请求失败:', err);
    alert('无法获取媒体权限，请检查浏览器设置');
  }
});

// 页面加载完成后初始化
window.addEventListener('load', initMediaDeviceUI);

对应HTML结构 #

<div id="permission-desc">
  点击下方按钮获取麦克风权限，以便选择可用音频设备
</div>
<button id="connect-btn">打开设备</button>
<select id="device-select" style="display: none;"></select>

次要问题：如何撤销已授予的权限？ #

JavaScript没有直接的API可以主动撤销媒体权限，可通过以下方式处理：

• 停止所有活跃媒体流：调用所有MediaStreamTrack的stop()方法，临时权限会转为非活跃状态，下次请求时会重新弹出授权窗口；
• 引导用户手动操作：提示用户在浏览器设置中找到对应网站的媒体权限并重置（比如Chrome浏览器：设置→隐私和安全→网站设置→麦克风/摄像头）；
• 清除持久权限：若用户设置了「记住权限」，只能通过浏览器设置手动清除，无法通过代码实现。

内容的提问来源于stack exchange，提问作者DT44