Cordova InAppBrowser调用mediaDevices.getUserMedia权限异常问题

核心原因 #

InAppBrowser的_blank模式使用Cordova内置WebView，默认未处理媒体权限的动态请求，且需额外配置启用媒体捕获支持。

解决方案步骤 #

1. 安装权限管理插件 #

安装cordova-plugin-android-permissions处理Android 6.0+的运行时权限请求：

cordova plugin add cordova-plugin-android-permissions

2. 更新config.xml配置 #

添加权限、硬件特性声明，以及WebView媒体相关配置：

<platform name="android">
    <!-- 权限声明 -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <!-- 硬件特性声明 -->
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
    <uses-feature android:name="android.hardware.microphone" android:required="false" />
    <!-- WebView媒体配置 -->
    <preference name="MediaPlaybackRequiresUserAction" value="false" />
    <preference name="AllowInlineMediaPlayback" value="true" />
</platform>

3. 修改InAppBrowser调用逻辑 #

先动态申请权限，确认通过后再打开网页，并添加媒体相关参数：

var permissions = cordova.plugins.permissions;
var requiredPermissions = [
    permissions.CAMERA,
    permissions.RECORD_AUDIO,
    permissions.MODIFY_AUDIO_SETTINGS
];

function checkAndRequestPermissions() {
    permissions.checkPermission(permissions.CAMERA, function(status) {
        if (!status.hasPermission) {
            permissions.requestPermissions(requiredPermissions, function(results) {
                results.hasPermission ? openTargetPage() : console.error("媒体权限请求被拒绝");
            }, function(err) {
                console.error("权限请求失败: ", err);
            });
        } else {
            openTargetPage();
        }
    }, function(err) {
        console.error("权限检查失败: ", err);
    });
}

function openTargetPage() {
    var open_url = 'https://example.com/index.php';
    var browserOptions = "location=no,zoom=no,EnableViewPortScale=no,toolbar=no,allowInlineMediaPlayback=yes,mediaPlaybackRequiresUserAction=no";
    var ref = cordova.InAppBrowser.open(open_url, "_blank", browserOptions);
}

document.addEventListener("deviceready", checkAndRequestPermissions, false);

4. 额外注意事项 #

• 目标网页必须使用HTTPS协议，Chrome WebView会阻止HTTP网页访问媒体设备
• 优先使用真机测试，模拟器可能存在媒体设备模拟问题
• 若问题仍存在，更新cordova-plugin-inappbrowser到最新版本：

cordova plugin update cordova-plugin-inappbrowser

内容的提问来源于stack exchange，提问作者The Bargee