Undefined is not an object (evaluating 'navigator.permissions.query')

Question

I am getting this error when trying to access my website on an iPhone 7, with a white bank screen (the main screen loads fine, but then I get this at the net screen after I click something.

I assume this is what it's talking about:

  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");
      };
    });
  }, []);

How do I fix this?

Answer 1

You need to check permission APIs availability and then if not available - query standard APIs.

Here is the location example: Permissions API Navigation API

if ( navigator.permissions && navigator.permissions.query) {
//try permissions APIs first
  navigator.permissions.query({ name: 'geolocation' }).then(function(result) {
      // Will return ['granted', 'prompt', 'denied']
      const permission = result.state;
      if ( permission === 'granted' || permission === 'prompt' ) {
          _onGetCurrentLocation();
      }
  });
} else if (navigator.geolocation) {
//then Navigation APIs
  _onGetCurrentLocation();
}

function _onGetCurrentLocation () {
    navigator.geolocation.getCurrentPosition(function(position) {
        //imitate map latlng construct
        const marker = { 
          lat: position.coords.latitude, 
          lng: position.coords.longitude 
        };
    })
}