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

在这篇文章中，我们将详细介绍如何使用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="[email protected]" 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

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

时间： 2024-10-07 12:55:53

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

在Ubuntu手机平台上创建一个HTML 5的应用

无论你是互联网世界的一个高手或是一个从来没有接触过互联网的新手,这篇文章将给你带来完整的在Ubuntu平台上开发HTML 5的应用.我们将慢慢地通过这个练习让你很自然地进入并熟悉整个的HTML 5应用的开发流程.在这个练习中,我们将设计一个最简单的RSS阅读器.当我们的应用设计完整后,应用的显示如下:         如果你是一个固执的HTM 5黑客,你可以选择任何你所喜欢的工具及工具包来开发你的HTML 5应用.它们将会很好地工作于Ubuntu手机上.我们将只专注于Ubuntu SDK提供的工

在Ubuntu平台上开发Qt Quick QML应用 （视频）

在这个视频里,我们从"0"开始来开发一个mini的RSS阅读器.通过这个练习,开发者可以对QML的编程有一个基本的了解,并了解在Ubuntu平台上的一些开发的流程.应用的图片如下:    视频的地址是:http://v.youku.com/v_show/id_XODcwODQxOTI0.html 

微软云在azure平台上创建 VM虚拟机 时，用户名有什么要求

微软云在azure平台上创建 VM虚拟机时,用户名有什么要求: 用户名最长为 20 个字符,不能以句点(".")结尾. 不允许使用以下用户名: 1 123 a actuser adm admin admin1 admin2 administrator aspnet backup console david guest john owner root server sql support support_388945a0 sys 测试 test1 test2 test3 user use

MTK 平台上如何给 camera 添加一种 preview size

1,首先检查该项目所使用的是哪一颗sensor, 就以OV2659 为例OV2659 是一颗2M 的摄像头,Sensor 吐出的数据分辨率能达到 1600*1200,肯定是支持 1280*720 的分辨率喽.那如何通过配置使其能够录制 720P 的视频呢,这个还是需要花费一番功夫的.ALPS.ICS2.TDD.MP.V1.2_TD_20121019\mediatek\custom\common\hal\imgsensor\ov2659_yuv\cfg_ftbl_ov2659_yuv.h在该文件中

ubuntu 平台上 安装 opencv实践

install opencv on ubuntu 12.10 apt-get install on shiyanlou 的速度? apt-source ? After this operation, 100 MB of additional disk space will be used. step 1 setp 1.1 get opencv source 准备源码 opencv Opencv的源码,2.4.9,90M左右 百度网盘链接: 或者类似方法 wget http://downloads

怎样在Ubuntu手机平台中开发Cordova HTML5应用

我们知道Cordova HTML5应用具有夸平台的特性,同一时候也具有訪问本地一些资源的能力.在今天的这篇文章中.我们将介绍一下怎样创建并执行一个Cordova HTML5的应用到我们的Ubuntu手机中.本文的英文原文在"http://developer.ubuntu.com/en/apps/html-5/guides/cordova-guide/". 1)安装好我们的armhf chroot 假设开发人员已经看过我曾经的文章"Ubuntu SDK 安装"的话,你

《快速创建网站》2.1 在Azure上创建网站及网站运行机制

现在让我们开始一天的建站之旅. 本文是<快速创建网站>系列的第2篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 1. 网站管理平台WordPress和云计算平台Azure简介2.1 在Azure上创建网站及网站运行机制2.2 域名绑定操作和Azure负载均衡机制2.3 WordPress 初始化和网站管理功能3.1 WordPress 数据导入3.2 WordPress 多站点支持和Azure在线代码编辑器3.3 WordPress 多语言支持 Multi

MTK 平台上查询当前使用的摄像头模组及所支持预览分辨率

1,MTK 平台如何查询当前使用的是哪颗摄像头及相关的模组信息? 在该目录下可以查到当前平台及相关项目的配置文件 ProjectConfig.mk \ALPS.JB.MP.V1_W_20120919\mediatek\config\project**\ 该文件中配置了当前项目中使用的硬件芯片等信息 //如这个是指收音机所使用的芯片信息 CUSTOM_HAL_FMRADIO = mt6628 //下面这个是指当前项目所采用的 ROM 芯片CUSTOM_HAL_EEPROM=IMX111OTP_EE

[原]详解如何将cocos2dx项目编译到Android平台上的(方式一：Cywin+NDK)

链接地址:http://m.blog.csdn.net/blog/yhc13429826359/29357815 2014-6-8阅读578 评论0 前言:cocos2dx作为一个开源的移动2D游戏框架,其跨平台的特性让它备受开发公司的欢迎.这里我就不做概念性的解释了,通过这篇文章你就会了解到,它的跨平台性”是个什么样子的“---有点拟人化了 我举个比较形象的例子: 有A.B.C三个部落,A部落的语言是A和O语言,B部落的语言是B和O语言,C部落的语言是C和O语言.你作为一个外星球人你会选择去学