【问题标题】:PhoneGap: Capture plugin with navigator.device undefinedPhoneGap:使用未定义的 navigator.device 捕获插件
【发布时间】:2015-07-08 16:44:27
【问题描述】:

我是 PhoneGap 的新手,正在尝试弄清楚如何使用捕获插件。我正在使用 Cordova 3.5.0。我已成功运行以下命令:

cordova plugin add org.apache.cordova.media-capture

我已经阅读了在 HTML 页面中包含 cordova.js 或 phonegap.js 的示例。但是,Cordova 创建的项目层次结构中都不存在这两个文件,所以我不知道如何包含它。我还读到这个文件是由 Cordova 在构建时自动注入的。所以就包括任何 JavaScript 文件而言,我只包括我自己的 JavaScript 文件。在该 JavaScript 文件中,我有用于测试目的的代码:

alert(navigator.device);
navigator.device.capture.captureImage(function(files) {
    alert(files);
}, function(error) {
    alert(error);
});

第一个警报显示 navigator.device 未定义。我在安卓模拟器上运行这个应用程序。为了运行应用程序,我正在做:

cordova emulate android

我认为我需要包含或设置一些东西才能使其正常工作。非常感谢任何帮助。

【问题讨论】:

    标签: cordova phonegap-plugins cordova-plugins


    【解决方案1】:

    欢迎来到科尔多瓦!

    首先,我建议您检查一下您是否以正确的方式安装了 npm 等。在这里查看教程-> CLI-Guide

    • cd ~/desktop
    • cordova create media media.example.com media
    • cd media
    • cordova platform add android
    • cordova plugin add org.apache.cordova.camera(不是媒体捕获)
    • cordova plugin add org.apache.cordova.console(不要使用警报,使用控制台更容易:-))
    • cordova build

    所以,现在打开您的文件夹。应该有一个像media/platforms/android/assets/www 这样的目录,在这个目录中你应该找到你的cordova.jscordova_plugins.js

    下一个问题:你的相机!

    按照我说的安装完所有内容并检查您的$PATH 变量(终端中的echo $PATH)等之后,您可以在index.html 中尝试此代码来检查相机插件是否正常工作:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Capture Photo</title>
    
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
    
        var pictureSource;   // picture source
        var destinationType; // sets the format of returned value
    
        // Wait for device API libraries to load
        //
        document.addEventListener("deviceready",onDeviceReady,false);
    
        // device APIs are available
        //
        function onDeviceReady() {
            pictureSource=navigator.camera.PictureSourceType;
            destinationType=navigator.camera.DestinationType;
        }
    
        // Called when a photo is successfully retrieved
        //
        function onPhotoDataSuccess(imageData) {
          // Uncomment to view the base64-encoded image data
          // console.log(imageData);
    
          // Get image handle
          //
          var smallImage = document.getElementById('smallImage');
    
          // Unhide image elements
          //
          smallImage.style.display = 'block';
    
          // Show the captured photo
          // The in-line CSS rules are used to resize the image
          //
          smallImage.src = "data:image/jpeg;base64," + imageData;
        }
    
        // Called when a photo is successfully retrieved
        //
        function onPhotoURISuccess(imageURI) {
          // Uncomment to view the image file URI
          // console.log(imageURI);
    
          // Get image handle
          //
          var largeImage = document.getElementById('largeImage');
    
          // Unhide image elements
          //
          largeImage.style.display = 'block';
    
          // Show the captured photo
          // The in-line CSS rules are used to resize the image
          //
          largeImage.src = imageURI;
        }
    
        // A button will call this function
        //
        function capturePhoto() {
          // Take picture using device camera and retrieve image as base64-encoded string
          navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
            destinationType: destinationType.DATA_URL });
        }
    
        // A button will call this function
        //
        function capturePhotoEdit() {
          // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
          navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
            destinationType: destinationType.DATA_URL });
        }
    
        // A button will call this function
        //
        function getPhoto(source) {
          // Retrieve image file location from specified source
          navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
            destinationType: destinationType.FILE_URI,
            sourceType: source });
        }
    
        // Called if something bad happens.
        //
        function onFail(message) {
          alert('Failed because: ' + message);
        }
    
        </script>
      </head>
      <body>
        <button onclick="capturePhoto();">Capture Photo</button> <br>
        <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
        <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
        <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
        <img style="display:none;" id="largeImage" src="" />
      </body>
    </html>
    

    所以...也许您现在尝试为您测试我的建议并给我反馈,如果它有效,或者我可以在哪里为您提供更多帮助:-)!

    编辑 Nick 的答案 -> 标准 Cordova index.html 代码:

    <!DOCTYPE html>
    <!--
        Licensed to the Apache Software Foundation (ASF) under one
        or more contributor license agreements.  See the NOTICE file
        distributed with this work for additional information
        regarding copyright ownership.  The ASF licenses this file
        to you under the Apache License, Version 2.0 (the
        "License"); you may not use this file except in compliance
        with the License.  You may obtain a copy of the License at
    
        http://www.apache.org/licenses/LICENSE-2.0
    
        Unless required by applicable law or agreed to in writing,
        software distributed under the License is distributed on an
        "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
         KIND, either express or implied.  See the License for the
        specific language governing permissions and limitations
        under the License.
    -->
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="format-detection" content="telephone=no" />
            <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
            <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" />
            <link rel="stylesheet" type="text/css" href="css/index.css" />
            <meta name="msapplication-tap-highlight" content="no" />
            <title>Hello World</title>
        </head>
        <body>
            <div class="app">
                <h1>Apache Cordova</h1>
                <div id="deviceready" class="blink">
                    <p class="event listening">Connecting to Device</p>
                    <p class="event received">Device is Ready</p>
                </div>
            </div>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script type="text/javascript">
                app.initialize();
            </script>
        </body>
    </html>
    

    【讨论】:

    • 感谢您的回复和解释。另外,我使用的是捕捉插件而不是相机插件,所以我也可以捕捉视频。根据我所阅读的内容,我可能会混合搭配使用相机插件来捕捉图片和捕捉插件来捕捉视频。
    【解决方案2】:

    我发现我需要在我的 HTML 页面中添加以下内容:

    <script type="text/javascript" src="cordova.js"></script>
    

    虽然该文件在项目层次结构中不存在,但它会在您构建应用程序时生成。该文件不会自动注入到您的 HTML 页面中,它仍然需要在需要的地方手动包含。

    【讨论】:

    • 不,通常情况下,每次构建项目时,Cordova.JS 都会自动包含到您的 index.html 中。我将在上面编辑我的答案,并在我构建项目后立即添加标准索引的代码。 :-)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-04
    • 1970-01-01
    • 2016-05-14
    • 1970-01-01
    相关资源
    最近更新 更多