带有使用摄像头的托管 Web 应用程序的 Cordova

Question

我正在尝试使用 cordova 构建应用程序，但我不会在本地托管网络应用程序，而是将其托管在服务器上。

因此该部分与白名单和允许导航配合得很好。

当我尝试使用相机时出现问题。似乎需要一些时间才能通过导航器访问相机。

所以这是我的简单网络应用程序，只是为了了解它是如何工作的。

<!DOCTYPE html>
<head>
    <title>test</title>
    <script src="scripts/cordova.js"></script>
</head>

<body>
<script>

    (function() {

        // camera will be undefined
        var camera = navigator.camera;

    })();


</script>
</body>
</html>

但是当我把整个东西都放在setTimeout里面时，它是可以访问的。

<!DOCTYPE html>
<head>
    <title>test</title>
    <script src="scripts/cordova.js"></script>
</head>

<body>

<script>

    (function() {
        setTimeout(function() {

            // I can now use it. 
            var camera = navigator.camera;

        }, 10000);
    })();


</script>

</body>

</html>

这是我的 index.js 文件，它将重定向到我们服务器上托管的 Web 应用程序。所以它在重定向之前等待设备准备就绪。

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
        window.location.replace("http://10.0.0.36:8080/");
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

我想了解为什么？

谢谢，

Answer 1

您需要等待设备准备就绪，然后才能调用任何插件。

document.addEventListener("deviceready", function(){
  var camera = navigator.camera;
})

带有使用摄像头的托管 Web 应用程序的 Cordova

Cordova with hosted web app using the camera

html

javascript

cordova

cordova-plugins