Apache Cordova应用中InAppBrowser调用相机与相册的实现咨询

核心问题原因 #

InAppBrowser是独立的WebView环境，无法直接访问Cordova的原生API（比如相机插件），直接用navigator.mediaDevices.getUserMedia会因权限隔离、WebView配置限制触发权限拒绝错误。

可行解决方案 #

方案1：通过消息机制让主应用调用原生能力（推荐） #

利用InAppBrowser的message事件实现与主应用的交互，由主应用调用Cordova相机插件完成操作，再将结果传回InAppBrowser。

1. 主应用侧代码
   先安装Cordova相机插件：

   cordova plugin add cordova-plugin-camera
   

   监听InAppBrowser消息并处理相机/相册请求：

   let inAppBrowserRef;
   function openInAppBrowser(url) {
       inAppBrowserRef = cordova.InAppBrowser.open(url, '_blank', 'location=yes,zoom=no');
       
       // 监听来自InAppBrowser的消息
       inAppBrowserRef.addEventListener('message', function(event) {
           if (event.data.action === 'openCamera') {
               // 调用相机
               navigator.camera.getPicture(
                   function(imageData) {
                       // 将图片数据传回InAppBrowser
                       inAppBrowserRef.executeScript({
                           code: `window.handleCameraResult('${imageData}');`
                       });
                   },
                   function(error) {
                       inAppBrowserRef.executeScript({
                           code: `window.handleCameraError('${error}');`
                       });
                   },
                   {
                       quality: 50,
                       destinationType: Camera.DestinationType.DATA_URL,
                       sourceType: Camera.PictureSourceType.CAMERA
                   }
               );
           } else if (event.data.action === 'openGallery') {
               // 调用相册
               navigator.camera.getPicture(
                   function(imageData) {
                       inAppBrowserRef.executeScript({
                           code: `window.handleCameraResult('${imageData}');`
                       });
                   },
                   function(error) {
                       inAppBrowserRef.executeScript({
                           code: `window.handleCameraError('${error}');`
                       });
                   },
                   {
                       quality: 50,
                       destinationType: Camera.DestinationType.DATA_URL,
                       sourceType: Camera.PictureSourceType.PHOTOLIBRARY
                   }
               );
           }
       });
   }
   

2. InAppBrowser内网页代码
   添加触发按钮和结果处理逻辑：

   <button id="openCameraBtn">打开相机</button>
   <button id="openGalleryBtn">打开相册</button>
   <img id="previewImg" src="" alt="预览图">
   
   <script src="jquery.js"></script>
   <script>
       $(function() {
           $('#openCameraBtn').click(function() {
               window.parent.postMessage({action: 'openCamera'}, '*');
           });
   
           $('#openGalleryBtn').click(function() {
               window.parent.postMessage({action: 'openGallery'}, '*');
           });
       });
   
       // 接收主应用返回的结果
       window.handleCameraResult = function(imageData) {
           $('#previewImg').attr('src', 'data:image/jpeg;base64,' + imageData);
       };
   
       window.handleCameraError = function(error) {
           alert('操作失败：' + error);
       };
   </script>
   

方案2：配置InAppBrowser媒体权限（兼容性有限） #

如果加载的是信任的HTTPS页面，可以尝试配置WebView权限，但仅能调用摄像头预览，无法直接唤起系统相册：
修改InAppBrowser打开参数：

cordova.InAppBrowser.open(url, '_blank', 'location=yes,zoom=no,mediaPlaybackRequiresUserAction=no');

在config.xml中添加平台权限：

<platform name="android">
    <config-file parent="/manifest" target="AndroidManifest.xml">
        <uses-permission android:name="android.permission.CAMERA" />
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
        <uses-feature android:name="android.hardware.camera" android:required="false" />
    </config-file>
</platform>
<platform name="ios">
    <config-file parent="NSCameraUsageDescription" target="*-Info.plist">
        <string>需要访问相机拍摄照片</string>
    </config-file>
    <config-file parent="NSPhotoLibraryUsageDescription" target="*-Info.plist">
        <string>需要访问相册选择照片</string>
    </config-file>
</platform>

注意事项 #

• 确保相机插件的权限描述在config.xml中正确配置，iOS必须填写权限说明字段。
• 消息通信时尽量避免用*作为postMessage的目标域名，指定具体域名更安全。
• 传递图片数据时可做转义处理，避免XSS风险。

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