Javascript Undefined不是对象（正在评估'；navigator.permissions.query'；）

当我试图在iPhone7上访问我的网站时，我遇到了这个错误，它有一个白色的银行屏幕（主屏幕加载正常，但我在点击某个东西后在网络屏幕上看到了这个错误）

我想这就是它所说的：

  useEffect(() => {
    navigator.permissions
      .query({ name: "microphone" })
      .then((permissionStatus) => {
        setMicrophonePermissionGranted(permissionStatus.state === "granted");

        permissionStatus.onchange = function () {
          setMicrophonePermissionGranted(this.state === "granted");
        };
      });

    navigator.permissions.query({ name: "camera" }).then((permissionStatus) => {
      setCameraPermissionGranted(permissionStatus.state === "granted");

      permissionStatus.onchange = function () {
        setCameraPermissionGranted(this.state === "granted");
      };
    });
  }, []);

---

如何修复此问题？

我试图通过iOs设备和Facebook浏览器检查麦克风和摄像头的权限，我想这会导致整个过程失败，因为这些环境中不存在。

---

一旦我将该查询移动到仅在非移动设备时加载的组件，我的错误就得到修复。

您需要检查权限API的可用性，如果不可用，则检查标准API

以下是位置示例：

if（navigator.permissions&&navigator.permissions.query）{
//请先尝试权限API
navigator.permissions.query（{name:'geolocation'}）。然后（函数（结果）{
//将返回[“已授予”、“提示”、“拒绝”]
const permission=result.state；
如果（权限==‘已授予’| |权限===‘提示’）{
_onGetCurrentLocation（）；
}
});
}else if（navigator.geolocation）{
//然后是导航API
_onGetCurrentLocation（）；
}
函数_onGetCurrentLocation（）{
navigator.geolocation.getCurrentPosition（函数（位置）{
//模拟地图拼接结构
常量标记={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
})
}

Permissions.query（）

自2021年6月起被标记为试验性功能

从今天起，这就意味着您需要实现两个UI/流；一个能够支持花哨的流来告诉用户如何继续，另一个更标准，使用

try/catch

块。类似于：

useEffect(() => {
    requestPermissions();
}, []);

const requestPermissions = async () => {
    try {
        handlePermissionsGranted();
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
        startRecording();
    } catch {
        ...
    }
};

const handlePermissionsGranted = async () => {
    if (navigator.permissions && navigator.permissions.query) {
        const permissions = await navigator.permissions.query({name: 'microphone'});
        permissions.onchange = () => {
          setMicrophonePermissionGranted(permissions === 'granted');
        };
    } 
};

const startRecording = async () => {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
        const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
        ...
    } catch {
        ... << if you reach this catch means that either the browser does not support webrtc or that the user didn't grant permissions
    }
};

useffect（（）=>{
请求权限（）；
}, []);
const requestPermissions=async（）=>{
试一试{
handlePermissionsGranted（）；
const stream=wait navigator.mediaDevices.getUserMedia（{audio:true，video:true}）；
startRecording（）；
}抓住{
...
}
};
const handlePermissionsGranted=async（）=>{
if（navigator.permissions&&navigator.permissions.query）{
const permissions=wait navigator.permissions.query（{name:'microscopy'}）；
permissions.onchange=（）=>{
SetMicrophonePermissionPrograted（权限=='Prograted'）；
};
} 
};
const startRecording=async（）=>{
试一试{
const stream=await navigator.mediaDevices.getUserMedia（{audio:true，video:false}）；
constMediaRecorder=newMediaRecorder（流，{mimeType:'audio/webm'}）；
...
}抓住{
...