How to check camera permission which would be supported across all browsers?

Question

I am using the following code for checking if my react application has a camera permission:-

  checkForCameraPermission = () => {
    try {
      navigator.permissions.query({ name: 'camera' }).then(permissionStatus => {
        // granted, denied, prompt
        switch (permissionStatus.state) {
          case 'denied':
            // eslint-disable-next-line no-alert
            // alert(
            //   'You need to provide camera permission and reload page to continue futher with KYC journey or else please download the EarlySalary App to continue further.'
            // );
            this.setState({
              cameraDialogStatus: true
            });

            break;
          default:
            break;
        }
        // eslint-disable-next-line no-param-reassign
        permissionStatus.onchange = () => {
          console.log(`Permission changed to ${this.state}`);
        };
      });
    } catch (error) {
      console.log('camera error', error);
      // alert('TEST');
      this.setState({ isShowTestDialog: true });
    }
  };

I am using this in component did mount lifecycle method it works fine on most of the browsers but on some browsers it is not supported. So I tried finding out why it wasn't working on some devices and I finally got my answer with the MDN web docs at the following link:- [https://developer.mozilla.org/en-US/docs/Web/API/Navigator/permissions][1]

Is there a better approach that I can take as my react application is being used on Desktops as well as on mobile phone's and I would like the application to work as expected on all the devices and if not show why it is failing?

Any help or suggestion is much appreciated. Thank you for your time and support.