如何以编程方式请求媒体权限？

Posted 2023-04-19

【中文标题】如何以编程方式请求媒体权限？

【英文标题】：How to programmatically request media permissions?

【发布时间】：2022-01-23 23:32:11

【问题描述】：

摄像头和麦克风在 Chrome 中被手动屏蔽（如下图所示）：

使用 twilio-video 库方法创建本地媒体轨道 createLocalAudioTrack 和 createLocalVideoTrack 会引发下一个异常：

DOMException: Permission denied
code: 0
message: "Permission denied"
name: "NotAllowedError"

尝试使用浏览器原生getUserMedia时如下：

navigator.mediaDevices.getUserMedia( audio: true, video: true )
  .catch(error => 
    console.log(error)
  )

它的控制台在 catch 块中记录了相同的异常：

DOMException: Permission denied

问题：是否可以在创建本地媒体轨道之前提前知道没有权限（在浏览器中手动阻止摄像头和麦克风）并以编程方式请求此类创建曲目的权限（显示请求权限的弹出窗口）？

【参考方案1】：

请注意，在我撰写本文时，这仍是实验领域

您可以使用Permissions.query()查询权限：

const permissionDescriptors = [
  name: 'camera',
  name: 'microphone',
];

const permissions = await Promise.all(permissionDescriptors.map(async descriptor => (
  descriptor,
  status: await navigator.permissions.query(descriptor),
)));

for (const descriptor, status of permissions) 
  console.log(
    descriptor.name, // 'camera' | 'microphone'
    status.state, // 'granted' | 'denied' | 'prompt'
  );

您将能够使用Permissions.request() 请求权限。但是，目前任何浏览器都不支持此功能。

今天，最好尝试访问MediaStream，并捕获并处理潜在的异常：

let mediaStream;
try 
  const constraints =  audio: true, video: true ;
  mediaStream = await navigator.mediaDevices.getUserMedia(constraints);

catch (ex) 
  if (ex instanceof DOMException) 
    if (ex.name === 'NotAllowedError') 
      // handle permission denied
    
    else if (ex.name === 'NotFoundError') 
      // handle media not found
    
    else 
      // handle unexpected DOMException
    
  
  else 
    // handle unexpected error
  


if (!mediaStream) 
  // handle no stream

else 
  // do something with stream

【讨论】：

没错。 javascript 无法在不实际尝试使用的情况下确定 gUM 权限，因为否则它将成为指纹浏览器的一种隐蔽方式……泄露应该保密的用户偏好。

@O.Jones 权限是特定来源的，并且查询仅限于同源，因此这不是安全/隐私问题。