从 Apache Cordova 中的“inappbrowser”打开相机或图库答案

【问题标题】：Open Camera or Gallery from " inappbrowser " in Apache Cordova从 Apache Cordova 中的“inappbrowser”打开相机或图库
【发布时间】：2015-05-06 10:54:00
【问题描述】：

我有一个使用 Apache Cordova 开发的混合应用程序，在该应用程序中我使用的是“inappbrowser”。现在的要求是从inappbrowser打开相机或画廊，我无法弄清楚如何实现这一点。

为了开发这个应用程序，我使用了backbone.js、JQuery、bootstrap.js。

这是Backbone's View的代码sn-p：

  var mainScreenView = Backbone.View.extend({

        el: $('.panel'),

        templateMainScreen: _.template($('#templateOne').html()),

        events: {

            "click #inputBtnSubmit": "openWebView",
            "click #clickSettings": "openSettings"
        },

        initialize: function(){
            this.render();
        },

        render: function () {

            alert($(this.el).find('.panel-body'));
            var bindElement = $(this.el).find('.panel-body');
            bindElement.html(this.templateMainScreen());
            return this;
        },

        openWebView: function () {

            var textValue = $('#inputValue').val();
                       cordova.InAppBrowser.open('**Link to an external webpage which asks for Camera or Gallery control** ', '_blank', 'location=no');

       //  After inappbrowser is called to load a external webpage (On a button click Camera Intent or Gallery should open)
        }

    });

    var appView = new mainScreenView;

提前致谢。

【问题讨论】：

你不能，在应用浏览器中不能执行插件代码。唯一的选择是使用输入类型文件，它应该可以工作，至少在 ios 上
没错 jcesarmobile，我最终实现了。也就是说，我没有使用 inappBrowser 来显示网页，而是使用 <iframe> 来为我完成这项工作。现在我可以使用相机或图库，类似于使用原生手机的浏览器。

标签： cordova camera cordova-plugins hybrid-mobile-app inappbrowser

【解决方案1】：

我最终没有使用 inappBrowser，而是实现了 HTML iframe。也就是说，我想让 inappBrowser 做的事情，现在我可以使用 iframe 来做。您可以访问相机、图库或文件资源管理器，类似于原生手机的浏览器。

这是我为解决上述问题所做的工作：

   <html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="format-detection" content="telephone=no" />
      <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
      <title>Hello World!</title>
      <style type='text/css'>
        body, html, iframe {
                     margin: 0;
                     padding: 0;
                     border: 0px none;
                     width: 100%;
                     height: 100%;
        }
      </style>
 </head>
 <body>
     <script type="text/javascript" src="cordova.js"></script>


     <iframe src="http://SomeWebPage" width="97%" height="97%"></iframe>
 </body>

希望这对其他人有所帮助。

【讨论】：

你能告诉我你是如何使用上面的代码浏览或打开原生相机的吗？我正在使用 github.com/apache/cordova-plugin-inappbrowser 这个 IAB，我正在调用我的外部网站。
Nak Android Dev：当您从 InAppBrowser 调用外部网站时，您无法访问图库或相机。因此，我在 iFrame 标签中打开了外部网站，从那里我可以访问相机。
<input type="file> 有 html5 标签，但这在 npm 版本的 IAB 中不起作用，通过使用 html5 的 File API 可以打开它，但问题是在 IAB 中它不起作用，而如果我在像 index.html 这样的普通页面，然后它就可以工作了。所以这可能是 IAB 的问题。有什么建议吗？
是的，你是对的，因为 InAppBrowser 你无法打开。所以为了克服这个问题，我使用了 iFrame，我可以在其中打开相机和文件资源管理器。
我的整个应用都在 IAB 中；在一个页面内，我可以选择将图像上传到服务器，因此为此我需要在 IAB 中浏览图像。对于默认 index.html html5 文件 api 工作正常。但我需要 IAB 的解决方案。

【解决方案2】：

如果有帮助，试试这个插件http://plugins.cordova.io/#/package/com.synconset.imagepicker
它应该适用于 inappbrowser。

【讨论】：