The error "navigator.permissions.query is not a defined object" is encountered in the evaluation

Question

The error "navigator.permissions.query is not a defined object" is encountered in the evaluation

Whenever I try to access my website on an iPhone 7, I encounter a frustrating error. The main screen loads without any issues, but as soon as I click on something, a white bank screen appears.

I believe this piece of code might be the cause:

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

Is there any way to resolve this issue?

javascript ios iphone reactjs permissions

Answer 1

Answer №1

To ensure that you can access location data, it's important to check if permission APIs are available. If they are not available, you can then query the standard APIs as an alternative.

Take a look at this example demonstrating how to obtain location information: Permissions API Navigation API

if ( navigator.permissions && navigator.permissions.query) {
//prioritize permissions APIs
  navigator.permissions.query({ name: 'geolocation' }).then(function(result) {
      // Possible outcomes include 'granted', 'prompt', and 'denied'
      const permission = result.state;
      if ( permission === 'granted' || permission === 'prompt' ) {
          _onGetCurrentLocation();
      }
  });
} else if (navigator.geolocation) {
//fallback to Navigation APIs
  _onGetCurrentLocation();
}

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

Answer 2

To ensure that you can access location data, it's important to check if permission APIs are available. If they are not available, you can then query the standard APIs as an alternative.

Take a look at this example demonstrating how to obtain location information: Permissions API Navigation API

if ( navigator.permissions && navigator.permissions.query) {
//prioritize permissions APIs
  navigator.permissions.query({ name: 'geolocation' }).then(function(result) {
      // Possible outcomes include 'granted', 'prompt', and 'denied'
      const permission = result.state;
      if ( permission === 'granted' || permission === 'prompt' ) {
          _onGetCurrentLocation();
      }
  });
} else if (navigator.geolocation) {
//fallback to Navigation APIs
  _onGetCurrentLocation();
}

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

Answer 3

Answer №2

Permissions.query() is regarded as an experimental feature since June 2021 https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query.

Currently, this translates into the need for two different user interfaces and workflows: one that can support elaborate flows to guide users on how to proceed, and another more conventional approach using try / catch blocks. Here's an example:

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
    }
};

Answer 4

Permissions.query() is regarded as an experimental feature since June 2021 https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query.

Currently, this translates into the need for two different user interfaces and workflows: one that can support elaborate flows to guide users on how to proceed, and another more conventional approach using try / catch blocks. Here's an example:

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
    }
};

Answer 5

Answer №3

My aim was to verify the availability of microphone and camera permissions on iOS devices as well as on the Facebook browser. However, I discovered that these features are not supported in those environments, causing the entire process to fail. To resolve this issue, I relocated the query to a component that is only loaded when accessed through non-mobile devices.

Answer 6

My aim was to verify the availability of microphone and camera permissions on iOS devices as well as on the Facebook browser. However, I discovered that these features are not supported in those environments, causing the entire process to fail. To resolve this issue, I relocated the query to a component that is only loaded when accessed through non-mobile devices.

The error "navigator.permissions.query is not a defined object" is encountered in the evaluation

Answer №1

Answer №2

Answer №3

Similar questions

Looking for a Webpack setup for a React Components Library that includes Typescript, SASS, CSS Modules, and SASS support

TextField from MUI isn't updating with react-hook-form, onChange event is not triggering

Can you explain the purpose of the statement `var MyConstructor = function MyConstructor()`?

How to show the raw image content-type using Vue.js

Issue "The only acceptable numeric escape in strict mode is '' for styled elements in Material-UI (MUI)"

Ways to display spinner animations during image loading on Next.js?

Steps to make pop-up iframe function on the same page within a react nextjs application

Reset the input field upon button press

Do you have any suggestions on how to fix this npm SQLite installation issue?

How can you retrieve the `categoryIds` key within an object that holds an array of mongodb's `ObjectId(s)` as its value?

Preventing the Sending of Origin Header in Angular 2

Yarn combined with Webpack fails to execute post-compilation tasks

tips for passing value to the date field using proctractor

Unleashing the power of Vuex with promise chaining

Error with SWR hook: "Fetcher argument not supplied"

Create a WebGL object remotely on the server

Achieving function components within React Router Dom V6

What are some ways to monitor the movement of elements and activate functions at precise locations?

The React app was successfully deployed to localhost:3000, but when attempting to access it, the message "This site can't be reached" is displayed. Strangely, the terminal confirms that the app is indeed

Is Mobile Safari causing issues with React PWA when uploading images?