Cordova getUserMedia permission asking on every launch of the iOS App and change prompt title to App name

Question

I'm working on the Meteor Cordova application which accesses the mobile device's Camera and Microphone using avigator.mediaDevices.getUserMedia API. The API is working fine, and I can get the media streams without any issues. The problem is the app requests media permissions if I relaunch the application and use the API again. Also, the permission request prompt shows "localhost" on its title.

Here is the part of mobile-config.js related to media permissions.

App.appendToConfig(`
  <edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
      <string>MyApp needs access to your camera to present</string>
  </edit-config>
  <edit-config target="NSMicrophoneUsageDescription" file="*-Info.plist" mode="merge">
      <string>MyApp needs access to your microphone to present</string>
  </edit-config>
`);

Using cordova-diagnostic-plugin plugin for check and request permissions.

export const getMicrophoneAccess = () => new Promise((resolve, reject) => {
  cordova.plugins.diagnostic.isMicrophoneAuthorized(
    (authorized) => {
      if (!authorized) {
        cordova.plugins.diagnostic.requestMicrophoneAuthorization(
          (status) => {
            const granted = status === cordova.plugins.diagnostic.permissionStatus.GRANTED;

            if (granted) {
              console.log(
                `Mirophone : Authorization request for Microphone use was ${
                  granted ? 'granted' : 'denied'}`,
              );
              resolve();
            }

            reject(new Error('Microphone : Permission denied'));
          },
          (error) => {
            console.error(error);
            reject(error);
          },
        );
      } else {
        console.log('Microphone : Permission granted');
        resolve();
      }
    },
    (error) => {
      console.error(error);
      reject(error);
    },
  );
});

export const getCameraAccess = () => new Promise((resolve, reject) => {
  cordova.plugins.diagnostic.isCameraAuthorized(
    (authorized) => {
      if (!authorized) {
        cordova.plugins.diagnostic.requestCameraAuthorization(
          (status) => {
            const granted = status === cordova.plugins.diagnostic.permissionStatus.GRANTED;

            if (granted) {
              console.log(
                `Camera : Authorization request for Camera use was ${
                  granted ? 'granted' : 'denied'}`,
              );
              resolve();
            }

            reject(new Error('Camera : Permission denied'));
          },
          (error) => {
            console.error(error);
            reject(error);
          },
        );
      } else {
        console.log('Camera : Permission granted');
        resolve();
      }
    },
    (error) => {
      console.error(error);
      reject(error);
    },
  );
});

And the how I access media in app,

const stream = await navigator.mediaDevices.getUserMedia({
   video: true,
   audio: true,
});

Please someone advise me,

1. How to persist the media device permission on every launch of the app without asking again?
2. How to change the name on the title of the media permission request prompt "localhost" to "MyApp"?

Answer 1

finally i found the solution for this every time ask permission in cordova ios webview

Add this Function on CDVWebViewUIDelegate.m

- (void)webView:(WKWebView *)webView requestMediaCapturePermissionForOrigin:(WKSecurityOrigin *)origin initiatedByFrame:(WKFrameInfo *)frame type:(WKMediaCaptureType)type decisionHandler:(void (^)(WKPermissionDecision))decisionHandler API_AVAILABLE(ios(15.0)) API_AVAILABLE(ios(15.0)){  decisionHandler(WKPermissionDecisionGrant);
    
}

And using this plugin for native permissions cordova-plugin-diagonstics