在这篇文章中，我们将具体介绍怎样使用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 run --device -- --framework ubuntu-sdk-15.04

假设没有不论什么问题的话，你将看到例如以下的画面：

到眼下位置。我们已经完创建了我们的最主要的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>

这里的界面很easy，一个progress及一个能够按下照相的button。这里注意一下以下的代码：

  <!-- 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

 */

window.onload = function () {

    var UI = new UbuntuUI(); // This must be called after window is loaded

    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";

    image.style.display = "block";

}

// log failure message

function onFail(message) {

    console.log("Picture failure: " + message);

}

在这里。我们必须注意的是：

var UI = new UbuntuUI(); // This must be called after window is loaded

必须是在window.onload里做。不能够放在它的前面去做。

否则我们的UI就会有问题。

这里的设计很easy。我不在累述。我们选择试着来执行我们的应用到手机上去。

执行的显演示样例如以下：

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

我们回头来看看我们的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

全部的源代码在：https://github.com/liu-xiao-guo/cordovacam

本文英文阅读：　Cordova camera app tutorial

在Ubuntu平台上创建Cordova Camera HTML5应用的更多相关文章

MTK 平台上如何给 camera 添加一种 preview size
1,首先检查该项目所使用的是哪一颗sensor, 就以OV2659 为例OV2659 是一颗2M 的摄像头,Sensor 吐出的数据分辨率能达到 1600*1200,肯定是支持 1280*720 的分 ...
怎样在Ubuntu手机平台中开发Cordova HTML5应用
我们知道Cordova HTML5应用具有夸平台的特性,同一时候也具有訪问本地一些资源的能力.在今天的这篇文章中.我们将介绍一下怎样创建并执行一个Cordova HTML5的应用到我们的Ubuntu手 ...
ASP.NET Core 中文文档第二章指南（1）用 Visual Studio Code 在 macOS 上创建首个 ASP.NET Core 应用程序
原文:Your First ASP.NET Core Application on a Mac Using Visual Studio Code 作者:Daniel Roth.Steve Smith ...
(视频) 《快速创建网站》2.1 在Azure上创建网站及网站运行机制
现在让我们开始一天的建站之旅. 本文是<快速创建网站>系列的第2篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http:// ...
MTK 平台上查询当前使用的摄像头模组及所支持预览分辨率
1,MTK 平台如何查询当前使用的是哪颗摄像头及相关的模组信息? 在该目录下可以查到当前平台及相关项目的配置文件 ProjectConfig.mk \ALPS.JB.MP.V1_W_20120919\ ...
[原]详解如何将cocos2dx项目编译到Android平台上的(方式一：Cywin+NDK)
链接地址:http://m.blog.csdn.net/blog/yhc13429826359/29357815 2014-6-8阅读578 评论0 前言:cocos2dx作为一个开源的移动2D游戏框 ...
(视频)《快速创建网站》2.1 在Azure上创建网站及网站运行机制
现在让我们开始一天的建站之旅. 本文是<快速创建网站>系列的第2篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 1. 网站管理平台WordPress和 ...
浅析微信支付：公众平台卡券功能开通、HTML5线上发券（JS-SDK接口）、查看卡券详情
本文是[浅析微信支付]系列文章的第十六篇,主要讲解如何使用微信公众平台的卡券功能.如何使用HTML5在网页展示用户领券以及微信卡券和商户平台代金券的关系. 浅析微信支付系列已经更新十六篇了哟-,没有看 ...
Ubuntu 上创建常用磁盘阵列
RAID(Redundant Array of Independent Disk 独立冗余磁盘阵列)技术是加州大学伯克利分校1987年提出,最初是为了组合小的廉价磁盘来代替大的昂贵磁盘,同时希望磁盘失 ...

随机推荐

6.12---Swagger中paramType---swagger的RequestParam和ApiImpliciParam----Example中方法带有selective
paramType:表示参数放在哪个地方 header-->请求参数的获取:@RequestHeader(代码中接收注解) query-->请求参数的获取:@RequestPa ...
json-server模拟REST API
介绍可以开启一个服务前端使用安装 npm i json-server -g 使用 $ json-server db.json -p 3000 // 在文件目录下执行上述命令,开放一个端口3000的 ...
Java 基础入门随笔（3） JavaSE版——逻辑运算符、位运算符
上一节写了一些运算符的注意事项,这节开头依然是对运算符的一些注意点的阐述! 比较运算符除了>.>=.<.<=.==.!=之外需要注意instanceof:检查是否是类的对象,例 ...
三维重建PCL：点云单侧面正射投影
终于把点云单侧面投影正射投影的代码写完了,为一个阶段,主要使用平面插值方法,且只以XOY平面作为的正射投影面.有些凑合的地方,待改进. 方法思路:使用Mesh模型,对每一个表面进行表面重建.借助Ope ...
docloud后台管理项目(开篇)
最近朋友做app需要web做后台管理,所以花了一周时间做了这个项目. 废话不多说,开发环境是nginx+php5.3,使用thinkphp框架.是一个医疗器械数据统计的后台,业务功能很简单就是查看用户 ...
day14-二分法、匿名函数、内置函数以及面向过程编程
目录二分法匿名函数内置函数面向过程编程二分法二分法查找适用于数据量较大时,但是数据需要先排好顺序.主要思想是:(设查找的数组区间为array[low, high]) (1)确定该区间的中间 ...
01Struts 2
Struts 2 Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交 ...
gym101343J. Husam and the Broken Present 2 (状压DP)
题意:给定n个串每个串长度不超过100 找到一个新串使得这n个串都是它的字串输出这个新串的最小长度题解:n是15 n的阶乘的复杂度肯定不行就想到了2的15次方的复杂度想到了状压但是不知道怎 ...
telnet mysql3306端口失败
在linux上telnet远程mysql端口失败,经过上网查找后,找到多种方法. (1)我在本地的Navicat上新增了一个用户,主机名是linux的ip,也可以是 %(百分号代表这个用户可以在任何地 ...
C++异常：exception
基本知识下图表示了标准异常的继承关系 exception是所有标准异常的基类,自定义异常也需要继承exception,如下例: #include "pch.h" #include ...

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