在运行时请求WebView的相机权限

Question

在运行时请求WebView的相机权限

androidandroid-webviewandroid-permissions

8

我希望在Android WebView中使用QR码扫描器。 PWA在Chrome浏览器上运行良好。我已经在应用程序->应用程序名称->权限下设置了相机权限。测试了在安卓9的华为手机上，最低sdk版本是26，目标sdk版本是28。问题在于权限似乎没有被授予。此外，权限请求会多次重复。

Android 代码

清单文件

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature
            android:name="android.hardware.camera"
            android:required="true" />

根据来自之前的问题的答案, 我在 WebViewHelper 类中有以下代码:

lateinit var webkitPermissionRequest : PermissionRequest
...
webView.webChromeClient = object : WebChromeClient() {

    override fun onPermissionRequest(request: PermissionRequest) {
        webkitPermissionRequest = request
        val requestedResources = request.resources
        for (r in requestedResources) {
            if (r == PermissionRequest.RESOURCE_VIDEO_CAPTURE) {
                // In this sample, we only accept video capture request.
                val alertDialogBuilder = AlertDialog.Builder(activity)
                    .setTitle("Allow Permission to camera")
                    .setPositiveButton("Allow") { dialog, which ->
                        dialog.dismiss()
                        webkitPermissionRequest.grant(arrayOf(PermissionRequest.RESOURCE_VIDEO_CAPTURE))
                        Log.d(TAG, "Granted")
                    }
                    .setNegativeButton("Deny") { dialog, which ->
                        dialog.dismiss()
                        webkitPermissionRequest.deny()
                        Log.d(TAG, "Denied")
                    }
                val alertDialog = alertDialogBuilder.create()
                alertDialog.show()
                break
            }
        }
    }
    ...
}

日志：权限被授予后，会再次请求(多次)

D/WebViewHelper: Granted
V/InputMethodManager: Reporting focus gain, without startInput
I/PermissionManager: camera remind result:true
I/CameraManager: open camera: 1, package name: "myApp"
I/BackgroundPermManager: pkgName: "myApp", pid: 31365 ,uidOf3RdApk: 10197 ,permType: 0 ,permCfg: 1
I/HwCameraUtil: notifySurfaceFlingerCameraStatus : isFront = true , isOpend = true
I/HwCameraUtil: notifySurfaceFlingerFrontCameraStatus 8011 transact success!
E/cr_VideoCapture: CameraDevice.StateCallback onOpened
I/WebViewHelper: onPermissionRequest
    onPermissionRequest

这似乎是问题所在

I/GRALLOC: LockFlexLayout: baseFormat: 11, yStride: 640, ySize: 307200, uOffset: 307200,  uStride: 640
E/ion: ioctl c0044901 failed with code -1: Invalid argument
I/chromium: "Unhandled rejection", source: "PWA
            "Uncaught (in promise) NotAllowedError: play() can only be initiated by a user gesture.", source: "PWA"

最后，这个错误一直重复出现。

I/GRALLOC: LockFlexLayout: baseFormat: 11, yStride: 640, ySize: 307200, uOffset: 307200,  uStride: 640

JavaScript 代码

JS 侧面的代码在 WebView 中打开之前运行得非常好。

    app.ports.scanQR.subscribe(() => {
        // Delay until page loaded
        setTimeout(function(){
            const video = document.getElementById('media-video');
            function returnResult(result) {
                app.ports.onGotQR.send(result);
                scanner.destroy();
            }
        const scanner = new QrScanner(video, result => returnResult(result));
        scanner.start();
        }, 50);
    });
}

如果我直接调用getUserMedia，问题仍然存在。

if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
        video.srcObject = stream;
    })
    .catch(function (err0r) {
        console.log("Something went wrong!");
    });
}

获取相机应用权限：

在WebviewHelper.kt中

webView.webChromeClient = object : WebChromeClient() {
    override fun onPermissionRequest(request: PermissionRequest) {
        Log.i(TAG, "onPermissionRequest")

        // grants permission for app. video not showing
        if (ContextCompat.checkSelfPermission(activity, Manifest.permission.CAMERA)
            != PackageManager.PERMISSION_GRANTED
        ) {
            Log.i(TAG, "Request Permission")
            requestPermissions(activity, arrayOf(Manifest.permission.CAMERA), 1010)
        } else {
            Log.i(TAG, "Permission already granted")
        }
    ...
}

在MainActivity.kt中。

override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<String>, grantResults: IntArray) {
        when (requestCode) {
            cameraRequestCode -> {
                Log.d("MainActivity", "onRequestPermissionsResult: Camera Request")
                if ((grantResults.isNotEmpty() && grantResults[0] == PackageManager.PERMISSION_GRANTED)) {
                    Log.d("MainActivity", "Camera Request: Permission granted")
                    // permission was granted, yay!
                } else {
                    // permission denied, boo!
                    Log.d("MainActivity", "Camera Request: Permission denied")
                }
                return
            }
...

当相机应用权限被授予时，以下日志结果是预期的：

D/MainActivity: onRequestPermissionsResult: Camera Request
    Camera Request: Permission granted

- Noah Studach

"play() 只能由用户手势启动"，这是在 Web 控制（Chrome）错误中确定的。在 Android 环境中，您可以允许此操作。您必须使用触摸（点击/用户请求）来初始化/运行 getUserMedia 方法！您正在走上正确的道路。 - Nikola Lukic

我现在不是已经在使用 alertDialog 进行此操作了吗？如果不是，我该如何获取用户的手势？ - Noah Studach

我已经在onRequestPermissionsResult中添加了代码（请参见原始问题）。据我所知，应用程序范围内的权限与为显式网站授予的权限不同，这正是我在这里尝试实现的。 - Noah Studach

你解决了吗？ - user257980

@user257980 我认为我找到了一个解决方案，但现在我没有测试的必要。 - Noah Studach

显示剩余2条评论

3个回答

0

我使用本地QR扫描器模块解决了这个问题。

然而，最终我还需要访问地理位置。所以我找到了这个解决方案： WebViewActivity with permission request

我只需要请求权限的以下部分：

fuckMarshMallow
onGeolocationPermissionsShowPrompt
onRequestPermissionsResult

此外，您需要一些提示函数和变量以及清单权限条目。

由于这适用于地理位置，我认为如果相应地进行调整，它也应该适用于相机。

Kotlin版本（简短）：


// in webview settings add
webSettings.apply {
            setGeolocationEnabled(true)
        }

webView.webChromeClient = object : WebChromeClient() {

            override fun onGeolocationPermissionsShowPrompt(
                origin: String,
                callback: GeolocationPermissions.Callback
            ) {
                // Always grant permission since the app itself requires location
                // permission and the user has therefore already granted it
                callback.invoke(origin, true, false)
            }
}

override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<String>, grantResults: IntArray) {
        when (requestCode) {
            REQUEST_CODE_ASK_MULTIPLE_PERMISSIONS -> {
                val perms = HashMap<String, Int>()
                // Initial
                perms[Manifest.permission.ACCESS_FINE_LOCATION] = PackageManager.PERMISSION_GRANTED

                // Fill with results
                for (i in permissions.indices)
                    perms[permissions[i]] = grantResults[i]

                // Check for ACCESS_FINE_LOCATION
                if (perms[Manifest.permission.ACCESS_FINE_LOCATION] == PackageManager.PERMISSION_GRANTED) {
                    // All Permissions Granted
                } else {
                    // Permission Denied
                    finish()
                }
            }
            else -> super.onRequestPermissionsResult(requestCode, permissions, grantResults)
        }
    }

@TargetApi(Build.VERSION_CODES.M)
internal fun fuckMarshMallow() {
        val permissionsNeeded = ArrayList<String>()

        val permissionsList = ArrayList<String>()
        if (!addPermission(permissionsList, Manifest.permission.ACCESS_FINE_LOCATION))
            permissionsNeeded.add("Show Location")

        if (permissionsList.size > 0) {
            if (permissionsNeeded.size > 0) {

                // Need Rationale
                var message = "App need access to " + permissionsNeeded[0]

                for (i in 1 until permissionsNeeded.size)
                    message = message + ", " + permissionsNeeded[i]

                showMessageOKCancel(message,
                    DialogInterface.OnClickListener { _, _ ->
                        requestPermissions(
                            permissionsList.toTypedArray(),
                            REQUEST_CODE_ASK_MULTIPLE_PERMISSIONS
                        )
                    })
                return
            }
            requestPermissions(
                permissionsList.toTypedArray(),
                REQUEST_CODE_ASK_MULTIPLE_PERMISSIONS
            )
            return
        }
    }

private fun showMessageOKCancel(message: String, okListener: DialogInterface.OnClickListener) {
        AlertDialog.Builder(this@WebViewActivity)
            .setMessage(message)
            .setPositiveButton("OK", okListener)
            .setNegativeButton("Cancel", null)
            .create()
            .show()
    }

@TargetApi(Build.VERSION_CODES.M)
private fun addPermission(permissionsList: MutableList<String>, permission: String): Boolean {

        if (checkSelfPermission(permission) != PackageManager.PERMISSION_GRANTED) {
            permissionsList.add(permission)
            // Check for Rationale Option
            if (!shouldShowRequestPermissionRationale(permission))
                return false
        }
        return true
    }

不要忘记清单文件：

 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

- Noah Studach

0

我可以在stackoverflow上使其工作，因为跨来源角色。尝试这个，一定会起作用。

const captureVideoButton = document.querySelector('#capture-button');
const screenshotButton = document.querySelector('#screenshot-button');
const img = document.querySelector('#image');
const video = document.querySelector('#video');
const canvas = document.querySelector('#canvas');
const constraints = {
  audio: true,
  video: true
};

captureVideoButton.onclick = function() {
  navigator.mediaDevices.getUserMedia(constraints).
    then(handleSuccess).catch(handleError);
};

screenshotButton.onclick = video.onclick = function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  // Other browsers will fall back to image/png
  img.src = canvas.toDataURL('image/webp');
};

function handleError(error) {
  console.error('Error: ', error);
}

function handleSuccess(stream) {
  screenshotButton.disabled = false;
  video.srcObject = stream;
}

<meta http-equiv="Content-Security-Policy" content="default-src * gap:; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src *; img-src * data: blob: android-webview-video-poster:; style-src * 'unsafe-inline';">

<video id="video" autoplay crossorigin="anonymous"></video>
<img id="image" src="" crossorigin="anonymous">
<canvas id="canvas" style="display:none;"></canvas>
<button id="capture-button">Capture video</button>
<button id="screenshot-button">Capture video</button>

尝试添加meta http-equiv="Content-Security-Policy"标签

- Nikola Lukic

首先，感谢您的支持。我已经设置了您的网页，在浏览器中可以正常运行，但在 WebView 中无法运行。这是我在 Android Studio 中得到的日志：

D/WebViewHelper: Granted V/InputMethodManager: Reporting focus gain, without startInput I/chromium: [INFO:CONSOLE(40)] "Error: "

控制台日志:

访问来源为 'site' 的 'android-webview-video-poster:default_video_poster/-3437894000281861935' 图像资源因 CORS 策略而被阻止：所请求的资源未包含 'Access-Control-Allow-Origin' 标头。

- Noah Studach

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dannyskim · Accepted Answer

您在onPermissionRequest(...)中的所有原始代码都是正确的。您缺少的关键代码行是webView.settings.mediaPlaybackRequiresUserGesture = false。