android: request camera permission for inputs

[vaetas]

This PR tried to implement requesting user permissions on Android when the input field contains capture param. Requesting camera permission on app startup is not the best UX. This PR tries to delay the permission request until the user actually requires this action.

Testing and Review Notes

You can pass this URL with into the example project WebView: https://12t031.csb.app/

One input is with capture while the other one is regular.

Clicking on capture input should on Android request permissions. When the request is either accepted or denied then the file picker is resumed. When user accepts the permission the file picker contains the option to take a picture with camera.

To Do

I don't regularly touch Java code and there is high chance this is not the best approach. However, this feature is important for me. Let me know if there are any changes need so it could be possibly merged and published.

Thank you!

[balajiks-dev]

Check the brackets

[balajiks-dev]

Duplication of line

[balajiks-dev]

Add permission for gallery and local files.

[faaqi]

Hi @vaetas @balajiks-dev

Can u suggest any solution for this issue?

2108

[EArminjon]

Hi @vaetas @balajiks-dev

Can u suggest any solution for this issue?

2108

Issue mentioned closed.

[EArminjon]

Is this PR ready ?

[EArminjon]

I don't think this PR is valid because it didn't use onPermissionRequest.

To use onPermissionRequest I did as follow :

Inside onWebViewCreated callback :

if (Platform.isAndroid) {
      controller.addUserScript(
        userScript: UserScript(
          source: """
            var fileInput = document.querySelector('input[type="file"][accept]');
  
            if (fileInput) {
              var handleClick = async function(event) {
                event.preventDefault();
                // check permission
                await navigator.mediaDevices.getUserMedia({ video: true, audio: false })
                // getUserMedia start camera, we need to stop it
                .then(function(stream) {
                  stream.getTracks().forEach(function(track) {
                    track.stop();
                  });
                })
                // We didn't need to manage exception but we need to catch them
                .catch(function() {});
                fileInput.removeEventListener('click', handleClick);
                fileInput.click();
                fileInput.addEventListener('click', handleClick);
              };
              fileInput.addEventListener('click', handleClick);
            }
          """,
          forMainFrameOnly: true,
          injectionTime: UserScriptInjectionTime.AT_DOCUMENT_END,
        ),
      );
    }

That well trigger onPermissionRequest.

Inside onPermissionRequest callback :

  static Future<PermissionResponse?> onPermissionRequest(
    InAppWebViewController controller,
    PermissionRequest request,
  ) async {
    if (request.resources.contains(PermissionResourceType.CAMERA)) {
      // request permission using https://pub.dev/packages/permission_handler
      final bool result =  await getIt<PermissionService>().requestCameraPermission();
      return PermissionResponse(
        resources: request.resources,
        action: result
            ? PermissionResponseAction.GRANT
            : PermissionResponseAction.PROMPT,
      );
    }
    return null;
  }

Under your activity inside AndroidManifest.xml

<queries>
  <intent>
    <action android:name="android.media.action.IMAGE_CAPTURE" />
  </intent>
</queries>

As for Ajax Handlers, maybe a similar code can be implemented inside the package to automatically do the same process.