时间戳

首页 > 解决方案 > React（非本地）询问相机权限

reactjs - React（非本地）询问相机权限

问题描述

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

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

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

任何想法？

标签： reactjs

解决方案

在@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));

推荐阅读