{"id":966,"date":"2016-05-10T15:54:44","date_gmt":"2016-05-10T15:54:44","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=966"},"modified":"2023-07-18T11:49:56","modified_gmt":"2023-07-18T15:49:56","slug":"10-minutes-with-ionic-2-using-the-camera-with-ionic-native","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native","title":{"rendered":"10 Minutes with Ionic 2: Using the Camera with Ionic Native"},"content":{"rendered":"<p>In past posts in this series, we looked at some of the basics of creating an Ionic App, including a basic <a href=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world\/\">Hello World App<\/a>, an app with <a href=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation\/\">pages and navigation<\/a>, and finally an app that <a href=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api\/\">calls an API<\/a>.<\/p>\n<p>In this article, we will look at using Ionic Native to interface with the Cordova Camera plugin. We&#8217;ll use the native camera to take a picture and output that picture into our view.<br \/>\n<!--more--><\/p>\n<h3>Ionic Start<\/h3>\n<p>We&#8217;ll start by creating an app with the blank template using <code>ionic start<\/code>.<\/p>\n<pre><code>ionic start cameraApp blank --v2 --ts\n<\/code><\/pre>\n<p>As described in the first post of this series, we now have some basic plumbing, including a <code>home<\/code> page.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\" alt=\"Default File Structure\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 483px; --smush-placeholder-aspect-ratio: 483\/88;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\" alt=\"Default File Structure\" \/><\/noscript><\/p>\n<h3>Setting up the Plugin<\/h3>\n<p>If you have not yet installed Cordova, you&#8217;ll need to do that before completing this tutorial. This may require adding <code>sudo<\/code> before the command.<\/p>\n<pre><code>npm install -g cordova\n<\/code><\/pre>\n<p>After changing into our app directory (<code>cd cameraApp<\/code>), you&#8217;ll want to add a platform for your app.<\/p>\n<pre><code>ionic platform add android\n<\/code><\/pre>\n<p>Add the <code>camera<\/code> plugin.<\/p>\n<pre><code>ionic plugin add cordova-plugin-camera\n<\/code><\/pre>\n<h3>Taking a Picture<\/h3>\n<p>In our home.ts file, we&#8217;ll need to import <code>Camera<\/code> from <code>ionic-native<\/code>.<\/p>\n<pre><code>import {Camera} from &#039;ionic-native&#039;;\n<\/code><\/pre>\n<p>Inside of our <code>HomePage<\/code> class, we&#8217;ll want to create a property that will hold the base64 string of our picture.<\/p>\n<pre><code>import {Page} from &#039;ionic-angular&#039;;\nimport {Camera} from &#039;ionic-native&#039;;\n\n@Page({\n  templateUrl: &#039;build\/pages\/home\/home.html&#039;\n})\nexport class HomePage {\n  public base64Image: string;\n\n  constructor() {}\n}\n<\/code><\/pre>\n<p>Now, let&#8217;s add a method,&#8217; <code>takePicture<\/code>, which calls the <code>Camera.getPicture<\/code> method. This method accepts an <code>options<\/code> parameter and returns a promise that resolves when we get an image from the user. In our options array, we are specifying that we want our image to be a base64Image (<code>destinationType<\/code>) and that we want it to be <code>1000<\/code> by <code>1000<\/code> pixels. In the resolved promise, we are receiving <code>imageData<\/code>, which is our base64 image data.<\/p>\n<pre><code>import {Page} from &#039;ionic-angular&#039;;\nimport {Camera} from &#039;ionic-native&#039;;\n\n@Page({\n  templateUrl: &#039;build\/pages\/home\/home.html&#039;\n})\nexport class HomePage {\n  public base64Image: string;\n\n  constructor() {\n\n  }\n\n  takePicture(){\n    Camera.getPicture({\n        destinationType: Camera.DestinationType.DATA_URL,\n        targetWidth: 1000,\n        targetHeight: 1000\n    }).then((imageData) =&gt; {\n      \/\/ imageData is a base64 encoded string\n        this.base64Image = &quot;data:image\/jpeg;base64,&quot; + imageData;\n    }, (err) =&gt; {\n        console.log(err);\n    });\n  }\n}\n<\/code><\/pre>\n<p><strong>UPDATE:<\/strong> A previous version of this post discussed using ngZone due to a bug in an earlier version of the framework. This is no longer required in the newest version of the framework.<\/p>\n<p>Inside of our template, we&#8217;ll add a button that calls our <code>takePicture<\/code> method and shows an image if we have image data in our <code>base64Image<\/code> property.<\/p>\n<pre><code>&lt;ion-navbar *navbar&gt;\n  &lt;ion-title&gt;\n    Home\n  &lt;\/ion-title&gt;\n&lt;\/ion-navbar&gt;\n\n&lt;ion-content class=&quot;home&quot;&gt;\n  &lt;ion-card&gt;\n    &lt;ion-card-content&gt;\n      Hello World, this is my camera app\n\n      &lt;button (click)=&quot;takePicture()&quot;&gt;Take a Picture&lt;\/button&gt;\n\n      Latest Picture:\n      &lt;img [src]=&quot;base64Image&quot; *ngIf=&quot;base64Image&quot; \/&gt;\n    &lt;\/ion-card-content&gt;\n  &lt;\/ion-card&gt;\n&lt;\/ion-content&gt;\n<\/code><\/pre>\n<h3>Ionic Upload<\/h3>\n<p>In previous parts of this series, we would normally run <code>ionic serve<\/code> here. However, in this case, because we&#8217;re working with Cordova plugins, we will need to run it on a device. <code>ionic upload<\/code> allows us to view and <a href=\"https:\/\/ionic.io\/blog\/rapid-development-with-ionic-view\/\" target=\"_blank\" rel=\"noopener\">rapidly develop the app in the Ionic View app<\/a>.<\/p>\n<p>Before we run this, let&#8217;s make sure that inside our <code>gulpfile<\/code>, we&#8217;re running the <code>build<\/code> task before we upload. I added this task in the <code>Ionic hooks<\/code> section.<\/p>\n<pre><code>gulp.task(&#039;serve:before&#039;, [&#039;watch&#039;]);\ngulp.task(&#039;emulate:before&#039;, [&#039;build&#039;]);\ngulp.task(&#039;deploy:before&#039;, [&#039;build&#039;]);\ngulp.task(&#039;build:before&#039;, [&#039;build&#039;]);\ngulp.task(&#039;upload:before&#039;, [&#039;build&#039;]); \/\/Build before we upload\n<\/code><\/pre>\n<p>Now, we can build and upload our app to ionic.io:<\/p>\n<pre><code>ionic upload\n<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/ionic-upload.png\" alt=\"ionic upload output\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 485px; --smush-placeholder-aspect-ratio: 485\/359;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/ionic-upload.png\" alt=\"ionic upload output\" \/><\/noscript><\/p>\n<p>Now, we can go into Ionic View, Sync To Latest, and View our App.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/ionic-view.png\" alt=\"ionic view\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1290px; --smush-placeholder-aspect-ratio: 1290\/1136;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/ionic-view.png\" alt=\"ionic view\" \/><\/noscript><\/p>\n<p>Once in our app, we can take a picture of a cute kitten and an awesome sticker by pressing the &#8220;Take a Picture&#8221; button.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/taking-picture.png\" alt=\"taking a picture using the camera\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1290px; --smush-placeholder-aspect-ratio: 1290\/1136;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/taking-picture.png\" alt=\"taking a picture using the camera\" \/><\/noscript><\/p>\n<p>And our awesome picture will be outputted to our view:<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/Output.png\" alt=\"outputted picture\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 394px; --smush-placeholder-aspect-ratio: 394\/700;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/Output.png\" alt=\"outputted picture\" \/><\/noscript><\/p>\n<h3>Conclusion<\/h3>\n<p>In under ten minutes, we have integrated a common native feature into our app with a relatively small amount of code. The combination of Ionic Native and Ionic View is a killer partnership for rapid prototyping, developing, and ultimately creating top-of-the-line mobile apps.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In past posts in this series, we looked at some of the basics of creating an Ionic App, including a basic Hello World App, an app with pages and navigation, and finally an app that calls an API. In this article, we will look at using Ionic Native to interface with the Cordova Camera plugin. [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,13,25],"class_list":["post-966","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic","tag-ionic-2","tag-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ionic 2 - using the camera with Ionic Native<\/title>\n<meta name=\"description\" content=\"In this article, we will look at using Ionic Native to interface with the Cordova Camera plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Minutes with Ionic 2: Using the Camera with Ionic Native\" \/>\n<meta property=\"og:description\" content=\"In this article, we will look at using Ionic Native to interface with the Cordova Camera plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-10T15:54:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T15:49:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\" \/>\n<meta name=\"author\" content=\"Andrew McGivery\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewmcgivery\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew McGivery\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native\"},\"author\":{\"name\":\"Andrew McGivery\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7\"},\"headline\":\"10 Minutes with Ionic 2: Using the Camera with Ionic Native\",\"datePublished\":\"2016-05-10T15:54:44+00:00\",\"dateModified\":\"2023-07-18T15:49:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native\"},\"wordCount\":496,\"commentCount\":65,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\",\"keywords\":[\"Ionic\",\"Ionic 2\",\"Tutorials\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native\",\"url\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native\",\"name\":\"Ionic 2 - using the camera with Ionic Native\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\",\"datePublished\":\"2016-05-10T15:54:44+00:00\",\"dateModified\":\"2023-07-18T15:49:56+00:00\",\"description\":\"In this article, we will look at using Ionic Native to interface with the Cordova Camera plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\",\"width\":483,\"height\":88},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Minutes with Ionic 2: Using the Camera with Ionic Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7\",\"name\":\"Andrew McGivery\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g\",\"caption\":\"Andrew McGivery\"},\"description\":\"My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.\",\"sameAs\":[\"http:\/\/www.mcgivery.com\/\",\"https:\/\/x.com\/andrewmcgivery\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/andrewmcgivery\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ionic 2 - using the camera with Ionic Native","description":"In this article, we will look at using Ionic Native to interface with the Cordova Camera plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native","og_locale":"en_US","og_type":"article","og_title":"10 Minutes with Ionic 2: Using the Camera with Ionic Native","og_description":"In this article, we will look at using Ionic Native to interface with the Cordova Camera plugin.","og_url":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native","og_site_name":"Ionic Blog","article_published_time":"2016-05-10T15:54:44+00:00","article_modified_time":"2023-07-18T15:49:56+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png"}],"author":"Andrew McGivery","twitter_card":"summary_large_image","twitter_creator":"@andrewmcgivery","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Andrew McGivery","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native"},"author":{"name":"Andrew McGivery","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7"},"headline":"10 Minutes with Ionic 2: Using the Camera with Ionic Native","datePublished":"2016-05-10T15:54:44+00:00","dateModified":"2023-07-18T15:49:56+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native"},"wordCount":496,"commentCount":65,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png","keywords":["Ionic","Ionic 2","Tutorials"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native","url":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native","name":"Ionic 2 - using the camera with Ionic Native","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png","datePublished":"2016-05-10T15:54:44+00:00","dateModified":"2023-07-18T15:49:56+00:00","description":"In this article, we will look at using Ionic Native to interface with the Cordova Camera plugin.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png","width":483,"height":88},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-using-the-camera-with-ionic-native#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"10 Minutes with Ionic 2: Using the Camera with Ionic Native"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7","name":"Andrew McGivery","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g","caption":"Andrew McGivery"},"description":"My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.","sameAs":["http:\/\/www.mcgivery.com\/","https:\/\/x.com\/andrewmcgivery"],"url":"https:\/\/ionic.io\/blog\/author\/andrewmcgivery"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=966"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/966\/revisions"}],"predecessor-version":[{"id":5478,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/966\/revisions\/5478"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}