本文介绍如何在ionic项目中使用设备的camera。

Ionic版本:v3.2.0 / 2017-05-10 / MIT Licensed / Release Notes

=============================================================================

1)第一步是安装ionic-native/core。所有用到Native的功能,这一步不能省。npm install @ionic-native/core --save

ps:关于第一步,官方的说明是ionic-native/core是默认就包含在每一个Ionic应用里面的,注意下图中的红色矩形文字。

言外之意如果开发环境都是最新版本,期间也没有经历Ionic版本的升级,是可以忽略这一步的,不需要开发者手动安装。

但是,在实际开发过程中,很多时候可能会遇到下面这样的问题:

原因无非还是因为升级。。。升级。。。升级。我的项目创建是基于Ionic v2.2.2版本。但是期间经历过Ionic官方升级到v3.2.0版本。

所以解决的办法就是:

2)其次是给自己的项目添加cordova插件。ionic cordova plugin add cordova-plugin-camera

3)安装相应的node_moudles。npm install --save @ionic-native/camera

4)找到代码src->app下的app.moudle.ts文件, Add this plugin to your app's module。这一步可以放到最后做,但是一定不要忘。

5)其他就是添加你如何使用Camera的代码。

6)编码工作完成后,就是使用Chrome测试cordova插件了。

ionic cordova platform add browser

ionic cordova run browser

 不是直接ionic serve的原因参见:http://www.cnblogs.com/crazyprogrammer/p/6878981.html
注意Chrome阻止网页使用摄像头的时候,记得修改为允许。

参考:

  Ionic官网:http://ionicframework.com/docs/native/camera/

Ionic项目中如何使用Native Camera的更多相关文章

  1. ionic 项目中使用ngCordova插件$cordovaCamera筛选手机图库图片显示出来并上传

    原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%B ...

  2. iOS原生项目中集成React Native

    1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...

  3. Ionic项目中使用极光推送

    Ionic项目中使用极光推送-android   对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...

  4. Ionic项目中使用极光推送-android

    对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...

  5. ionic 项目中 使用 sass

    注: 1.先安装node-sass  -->> npm install --save node-sass --registry=https://registry.npm.taobao.or ...

  6. ionic 项目中添加modal的步骤流程

    1.首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面. <ion-modal-view> ...

  7. ionic项目中手机状态栏显示使用$cordovaStatusbar插件

    在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题 1.下载插件$cordovaStatusbar命令: cordova plugin add ...

  8. ionic 项目中创建侧边栏的具体流程分4步简单学会

    这是在学习ionic时,当时遇到的一些问题,觉得很难,就记笔记下来了,现在觉得如果可以拿来分享,有可能会帮助到遇到同样问题的人 ionic slidemenu 项目流程: cd pretices(自己 ...

  9. 总结angular+ionic项目中的问题

    1:tab的路由导向问题 运用ion-tabs时,第一个ion-tabs标签下的href功能会覆盖掉路由中定义的默认路由(进入应用后直接加载href指向的组件). 解决方法:多写一个ion-tabs标 ...

随机推荐

  1. 曲演杂坛--使用ALTER TABLE修改字段类型的吐血教训

    --===================================================================== 事件起因:开发发现有表插入数据失败,查看后发现INT类型 ...

  2. 解决MS SQL Server 使用HashBytes函数乱码问题

    HASHBYTES 语法(参考MSDN): HASHBYTES ( '<algorithm>', { @input | 'input' } ) <algorithm>::= M ...

  3. WPF添加样式字典Style

    新建Resource Dictionary文件,取名Style: 将常用的样式写入该文件: 在App.xaml中引用该文件: <Application x:Class="Machine ...

  4. 《JavaScript高级程序设计》3.7 函数

    位于return语句之后的代码不会执行; return语句也可以不带有任何返回值. 这种情况下, 函数在停止执行后会返回undefined值. 这种用法一般用在需要提前停止函数执行而又不需要返回值的情 ...

  5. 高性能mysql学习笔记

    此文已由作者朱笑天授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 笔者在工作之余阅读了一下高性能mysql,以下的内容对mysql的介绍以及书中涉及一些概念的总结归纳. 1. ...

  6. MySQL(慢日志记录)

    day63 参考:https://www.cnblogs.com/wupeiqi/articles/5716963.html

  7. HTTP/1.0中,状态码200 301 304 403 404 500的含义?

    200 OK 服务器成功处理了请求 301 重定向,请求的URL已移走 304未修改,客户的缓存资源是最新的,要客户端使用缓存 403禁止,请求被服务器拒绝了 404未找到资源 500内部服务器错误, ...

  8. 加快mysql导入导出速度

    MySQL导出的SQL语句在处理百万级数据的时候,可能导入要花几小时.在导出时合理使用几个参数,可以大大加快导入的速度. -e 使用包括几个VALUES列表的多行INSERT语法; --max_all ...

  9. jvm内存结构(二)(栈的变化,机器指令的格式/执行模式)

    栈的结构: <Java虚拟机原理图解>4.JVM机器指令集 局部变量表: 方法执行时,虚拟机会把字节码中方法数据区的code类型的属性中的局部变量放到栈的局部变量表中. 操作栈: jvm指 ...

  10. HTML+Javascript制作拼图小游戏详解(终)

    上次我们已经讲解了制作的原理,并且展示了主要代码. 这次我将完整的代码给大家,仅供参考. HTML部分如下: <!DOCTYPE html> <html lang="en& ...