React（非本机）请求相机许可

Question

我有一个网络应用程序需要访问相机，但我想手动请求相机权限，因为如果网络应用程序自动检测到相机权限，它会“为时已晚”。

我需要的是请求许可，然后我可以渲染一个渲染相机的第 3 方 JavaScript 函数。

使用 React Native 很容易，但是使用普通的 React，对于 Chrome 和 Safari，我找不到一种方法来询问何时需要这些权限。

任何想法？

Answer 1

在 @Shubh 评论的链接之前（谢谢）我让它只适用于 Chrome：

navigator.permissions.query({ name: 'camera' })
  .then((permissionObj) => {
    console.log(permissionObj.state);
    permission = permissionObj.state;
  })
  .catch((error) => {
    console.log('Got error :', error);
  });

但 iPhone IOS (Safari) 不支持此功能。

现在有了getUserMedia()API，我的代码就可以半工作了：

let stream = null;
const constraints = {
  video: true
};

try {
  stream = await navigator.mediaDevices.getUserMedia(constraints);
  /* use the stream */
} catch (err) {
  /* handle the error */
}

我这里唯一的问题是相机（桌面）上的灯卡住了，我现在试图找到如何“关闭”getUserMedia，我只想授予权限，就像第一种方法一样。

编辑：现在为了关闭相机，我这样做了：

const askCameraPermission =
  async (): Promise<MediaStream | null> => await navigator.mediaDevices.getUserMedia({ video: true });

let localstream: MediaStream | null;
askCameraPermission()
  .then(response => {
    localstream = response;
  })
  .then(() => {
    localstream?.getTracks().forEach(track => {
      track.stop();
    });
  })
  .catch(error => console.log(error));

Answer 2

navigator.getUserMedia({audio:true,video:true}, function(stream) {
  stream.getTracks().forEach(x=>x.stop());
}, err=>console.log(err));

获取流，获取轨道并停止它们以关闭相机。相机仍会闪烁，但会关闭。

这是演示：https://codesandbox.io/s/camera-app-86me8?file=/src /App.js