Cordova InAppBrowser中摄像头与音频权限被拒问题咨询

1. 配置App权限（config.xml） #

首先确保在项目的config.xml中添加对应平台的音视频权限声明：

Android 权限 #

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<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" />

iOS 权限 #

<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>需要访问摄像头进行音视频录制</string>
</edit-config>
<edit-config target="NSMicrophoneUsageDescription" file="*-Info.plist" mode="merge">
    <string>需要访问麦克风进行音视频录制</string>
</edit-config>

2. 安装并使用权限插件 #

仅靠HTML5权限请求无法触发系统权限弹窗，需先通过Cordova原生插件获取系统权限：

• 安装插件：

# Android 权限插件
cordova plugin add cordova-plugin-android-permissions
# iOS 权限插件
cordova plugin add cordova-plugin-ios-permissions
# 媒体捕获辅助插件
cordova plugin add cordova-plugin-media-capture

• 先请求原生权限，再调用getUserMedia：

// 检查并请求系统权限
function requestPermissions() {
    if (cordova.platformId === 'android') {
        const permissions = cordova.plugins.permissions;
        permissions.requestPermissions(
            [permissions.CAMERA, permissions.RECORD_AUDIO],
            status => {
                status.hasPermission ? initMediaDevices() : alert('权限被拒绝，无法使用音视频功能');
            },
            err => alert('权限请求失败：' + err)
        );
    } else if (cordova.platformId === 'ios') {
        const permissions = cordova.plugins.permissions;
        permissions.requestPermissions(
            [permissions.CAMERA, permissions.MICROPHONE],
            status => {
                status.hasPermission ? initMediaDevices() : alert('权限被拒绝，无法使用音视频功能');
            },
            err => alert('权限请求失败：' + err)
        );
    } else {
        initMediaDevices();
    }
}

// 初始化音视频设备
function initMediaDevices() {
    if (navigator.mediaDevices?.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
            audio: true,
            video: true // 需要摄像头时必须添加此配置
        }).then(mediaStream => {
            alert('音视频设备激活成功');
            // 可在此处将媒体流绑定到页面video标签
            // document.getElementById('video').srcObject = mediaStream;
        }).catch(err => alert('设备激活失败：' + err.message));
    } else {
        alert('当前设备不支持音视频功能');
    }
}

// 等待Cordova环境就绪后执行
document.addEventListener('deviceready', requestPermissions, false);

3. 正确配置InAppBrowser参数 #

打开InAppBrowser时需传入媒体相关参数，确保网页能正常发起权限请求：

const targetUrl = '你的网页地址';
const browserOptions = [
    'location=yes',
    'hidden=no',
    'allowInlineMediaPlayback=yes', // iOS允许内联媒体播放
    'mediaPlaybackRequiresUserAction=no', // 允许自动加载媒体
    'hidenavigationbuttons=no'
].join(',');

const inAppBrowserRef = cordova.InAppBrowser.open(targetUrl, '_blank', browserOptions);

4. 修正前端代码语法错误 #

你提供的代码存在语法错误（多余的}），修正后如下：

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
        'audio': true
    }).then(function(mediaStream) {
        alert('si avvia');
    }).catch(function(err) {
        alert(err);
    });
} else {
    alert('non supporta camera');
}

内容的提问来源于stack exchange，提问作者Nitesh Kumar