码迷，mamicode.com
首页 > Web开发 > 详细

在Ubuntu平台上创建Cordova Camera HTML5应用

时间：2015-07-27 13:12:49      阅读：124      评论：0      收藏：0      [点我收藏+]

标签：

在这篇文章中，我们将详细介绍如何使用Cordova Camera HTML5 应用。更多关于Cordova的开发指南，开发者可以参考文章“the Cordova Guide”。通过这个例程，我们可以学习在Ubuntu平台上如何利用Cordova API来完成一个我们所需要的照相机功能。关于如何创建一个Cordova架构的简单的应用，开发者可以参阅文章“如何在Ubuntu手机平台中开发Cordova HTML5应用”。在那篇文章中，它介绍了如何设置自己的环境。建议开发者先阅读该文章。


在我们做练习之前，我们可以在我们想要创建应用目录的下面，打入如下的命令:

$ bzr branch lp:ubuntu-sdk-tutorials

在上面的代码中，有一个已经完成好的Camera代码。

１）创建一个最基本的Cordova框架应用


由于一些原因，Cordova的开发环境没有集成到Qt Creator中去，所以我们只有通过命令行来完成我们的操作。我们可以参阅文章“如何在Ubuntu手机平台中开发Cordova HTML5应用”来创建一个叫做Camera的简单应用：

$ cordova create cordovacam cordovacam.mycompany "CordovaCam"
$ cd cordovacam


２）定义应用自己的图标



我们可以自己设计一个图标为我们想要创建的应用。为了方便，我们可以直接从我们已经下载好的应用ubuntu-sdk-tutorials/html5/html5-tutorial-cordova-camera目录中直接拷贝过来我们所需要的图标：

$ cp ../ubuntu-sdk-tutorials/html5/html5-tutorial-cordova-camera/www/icon.png ./www/img/logo.png

然后，我们需要修改我们的config.xml文件，添加如下的项到它里面去：

<icon src="www/img/logo.png" />

当然，我们也有必要修改作者自己的邮件地址。修改完后，config.xml的显示如下：

<?xml version='1.0' encoding='utf-8'?>
<widget id="cordovacam.mycompany" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>CordovaCam</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="myname@mycompany.com" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" version="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <icon src="www/img/logo.png" />
</widget>

注意: 这一步必不可少，否则我们的应用通过不了package的验证。


３）添加Ubuntu平台支持代码到项目中


我们可以利用如下的命令来添加我们的Ubuntu支持代码：

$ cordova platform add ubuntu

现在你的项目中将有如下的目录：

  • platforms/ubuntu/
由于我们需要使用到Camera的功能，所有我们需要在如下的文件中添加camera的security policy:

cordovacam/platforms/ubuntu/apparmor.json

{
 "policy_groups": ["networking", "camera”, "audio"],
  "policy_version":1
}

否则我们的照相机功能在手机中将不能工作。

４）添加Camera API支持


通过如下的命令：

$ cordova plugin add org.apache.cordova.camera

来添加Cordova runtime到你的项目中去。


５）运行我们的应用


$ cordova run --device --debug

就像在我们之前文章“如何在Ubuntu手机平台中开发Cordova HTML5应用”中介绍的那样，这个命令是在利用默认的平台进行运行的（目前是14.10）。在其它的平台上，你需要在它的后面加上平台的参数：

$ cordova build --device -- --framework ubuntu-sdk-15.04 --verbose

如果没有任何问题的话，你将看到如下的画面：


技术分享


到目前位置，我们已经完创建了我们的最基本的Cordova Camera框架应用，但是我们还是没有做任何的界面及Camera功能的调用。


６）定义HTML 5用户界面



在这节里，我们将设计我们的HTML 用户界面。我们修改index.html（cordovacam/www/index.html）文件如下：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>An Ubuntu HTML5 application</title>
    <meta name="description" content="An Ubuntu HTML5 application">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <!-- Ubuntu UI Style imports - Ambiance theme -->
    <link href="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />

    <!-- Ubuntu UI javascript imports - Ambiance theme -->
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>

    <!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
    <script src="cordova.js"></script>

    <!-- Application script and css -->
    <script src="js/app.js"></script>
    <link href="css/app.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div data-role="mainview">
      <header data-role="header">
        <ul data-role="tabs">
          <li data-role="tabitem" data-page="camera">Camera</li>
        </ul>
      </header>

      <div data-role="content">
        <div data-role="tab" id="camera">
            <div id="loading">
                <header>Loading...</header>
                <progress class="bigger">Loading...</progress>
            </div>
            <div id="loaded">
                <button data-role="button" class="ubuntu" id="click">Take Picture</button>
                <img id="image" src="" />
            </div>
        </div> <!-- tab: camera -->
      </div> <!-- content -->
    </div> <!-- mainview -->
  </body>
</html>


这里的界面非常简单，一个progress及一个可以按下照相的按钮。这里注意一下的代码：

  <!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
    <script src="cordova.js"></script>

    <!-- Application script and css -->
    <script src="js/app.js"></script>
    <link href="css/app.css" rel="stylesheet" type="text/css" />

这里有一个app.css文件，一个app.js文件。我们需要把原来的index.css及index.js文件换成它们。

app.css


#loading {
  position: absolute;
  left:45%;
}
#loaded {
  display: none;
}

app.js


/**
 * Wait before the DOM has been loaded before initializing the Ubuntu UI layer
 */
var UI = new UbuntuUI();
window.onload = function () {
    UI.init();

    document.addEventListener("deviceready", function() {
        if (console && console.log)
            console.log('Platform layer API ready');

        //hide the loading div and display the loaded div
        document.getElementById("loading").style.display = "none";
        document.getElementById("loaded").style.display = "block";

        // event listener to take picture
        UI.button("click").click( function() {
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 100,
                targetWidth: 400,
                targetHeight: 400,
                destinationType: Camera.DestinationType.DATA_URL,
                correctOrientation: true
             });
           console.log("Take Picture button clicked");
        }); // "click" button event handler

      }, false); // deviceready event handler

}; // window.onload event handler

// show new picture in html and log
function onSuccess(imageData) {
    var image = document.getElementById('image');
    image.src = "data:image/jpeg;base64," + imageData;
    image.style.margin = "10px";<img src="http://img.blog.csdn.net/20150727112433223?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="300" alt="" />
    image.style.display = "block";
}

// log failure message
function onFail(message) {
    console.log("Picture failure: " + message);
}


这里的设计非常简单。我不在累述。我们选择试着来运行我们的应用到手机上去。运行的显示如下：


技术分享

显然，它没有我们所希望看到的结果。为什么呢？


我们回头来看看我们的UI设计：

 <body>
    <div data-role="mainview">
      <header data-role="header">
        <ul data-role="tabs">
          <li data-role="tabitem" data-page="camera">Camera</li>
        </ul>
      </header>

      <div data-role="content">
        <div data-role="tab" id="camera">
            <div id="loading">
                <header>Loading...</header>
                <progress class="bigger">Loading...</progress>
            </div>
            <div id="loaded">
                <button data-role="button" class="ubuntu" id="click">Take Picture</button>
                <img id="image" src="" />
            </div>
        </div> <!-- tab: camera -->
      </div> <!-- content -->
    </div> <!-- mainview -->
  </body>

这里采用了Ubuntu平台上的HTML5 UI Toolkit。而在我们的index.html head部分：

    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>

它依赖于手机系统提供的ambiance。这有可能造成我们的UI和目前的最新的ambiance不能够完全匹配。为了解决这个问题，我们参考连接https://code.launchpad.net/~dbarth/ubuntu-html5-theme/cmdline-tool/+merge/253498

来解决这个问题。在我的博客文章中“为HTML5应用创建独立于平台的Theme”我也做了详细的介绍。

我们做如下的步骤：

$ ubuntu-html5-theme install 14.10

然后

$ ubuntu-html5-theme convert

运行完后，我们再重新看一下我们的index.html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>An Ubuntu HTML5 application</title>
    <meta name="description" content="An Ubuntu HTML5 application">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <!-- Ubuntu UI Style imports - Ambiance theme -->
    <link href="ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />

    <!-- Ubuntu UI javascript imports - Ambiance theme -->
    <script src="ambiance/js/fast-buttons.js"></script>
    <script src="ambiance/js/core.js"></script>
    <script src="ambiance/js/buttons.js"></script>
    <script src="ambiance/js/dialogs.js"></script>
    <script src="ambiance/js/page.js"></script>
    <script src="ambiance/js/pagestacks.js"></script>
    <script src="ambiance/js/tabs.js"></script>

    <!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
    <script src="cordova.js"></script>

    <!-- Application script and css -->
    <script src="js/app.js"></script>
    <link href="app.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div data-role="mainview">
      <header data-role="header">
        <ul data-role="tabs">
          <li data-role="tabitem" data-page="camera">Camera</li>
        </ul>
      </header>

      <div data-role="content">
        <div data-role="tab" id="camera">
            <div id="loading">
                <header>Loading...</header>
                <progress class="bigger">Loading...</progress>
            </div>
            <div id="loaded">
                <button data-role="button" class="ubuntu" id="click">Take Picture</button>
                <img id="image" src="" />
            </div>
        </div> <!-- tab: camera -->
      </div> <!-- content -->
    </div> <!-- mainview -->
  </body>
</html>

我们可以看出如下的部分已经发生改变：

 <!-- Ubuntu UI javascript imports - Ambiance theme -->
    <script src="ambiance/js/fast-buttons.js"></script>
    <script src="ambiance/js/core.js"></script>
    <script src="ambiance/js/buttons.js"></script>
    <script src="ambiance/js/dialogs.js"></script>
    <script src="ambiance/js/page.js"></script>
    <script src="ambiance/js/pagestacks.js"></script>
    <script src="ambiance/js/tabs.js"></script>

并且在当前的cordovacam/www目录下多了一个叫做“ambiance”的目录。这样应用再也不依赖于系统所提供的ambiance了。

特别需要支持的是：如果你的界面不需要使用HTML5 UI Toolkit，你可以不做上面的步骤。

重新运行我们的应用：


$ cordova run --device --debug


技术分享  技术分享  技术分享


所有的源码在：git clone https://gitcafe.com/ubuntu/cordovacam.git

本文英文阅读：　Cordova camera app tutorial

版权声明：本文为博主原创文章，未经博主允许不得转载。

在Ubuntu平台上创建Cordova Camera HTML5应用

标签：

原文地址：http://blog.csdn.net/ubuntutouch/article/details/47080949
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！