Camera and Photo Gallery in Ionic React app using Capacitor
Tags: ionic, react, capacitor, camera
Published: 2020-03-28 12:15:03

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="14d9" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="5439" class="graf graf--p graf-after--figure">This post is for Ionic React framework,<a href="https://enappd.com/blog/camera-and-gallery-in-ionic-react-app-using-capacitor/110/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> </a>using Capacitor. In this post you’ll learn how to pick/use images using Camera and Photo gallery.</p><p name="44db" class="graf graf--p graf-after--p">If you are looking for Camera functionality in</p><ul class="postList"><li name="8252" class="graf graf--li graf-after--p">Ionic Angular app&#8202;—&#8202;Please check <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">this blog</a></li><li name="4076" class="graf graf--li graf-after--li">React Native app&#8202;—&#8202;Please check <a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">this blog</a></li><li name="4a8c" class="graf graf--li graf-after--li">Ionic React app / Capacitor app&#8202;—&#8202;Continue reading 😄</li></ul><p name="5a29" class="graf graf--p graf-after--li">As you can see from above, there are several options available for Hybrid app development these days, and it is easy to get confused between them. This post is focussed on <strong class="markup--strong markup--p-strong">Ionic framework</strong> with <a href="https://reactjs.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">ReactJS</strong></a> as the front-end framework, and <a href="https://capacitor.ionicframework.com/docs/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Capacitor</strong></a> as runtime and build environment.</p><blockquote name="f294" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Code for this tutorial is available on Github repo </strong><a href="https://github.com/enappd/ionic-react-camera-demo"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">ionic-react-camera-demo</strong></a></blockquote><p name="8baa" class="graf graf--p graf-after--blockquote">Let’s see a brief intro to each of the included frameworks</p><ol class="postList"><li name="1416" class="graf graf--li graf-after--p">Ionic</li><li name="71d0" class="graf graf--li graf-after--li">Capacitor</li><li name="51bd" class="graf graf--li graf-after--li">Ionic-React</li></ol><h3 name="244d" class="graf graf--h3 graf-after--li">What is Ionic&nbsp;?</h3><p name="941f" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development created by <a href="https://medium.com/u/a76fa51de1ba?source=post_page---------------------------"  class="markup--anchor markup--p-anchor"    target="_blank">Max Lynch</a>, <a href="https://medium.com/u/14b1be5c1354?source=post_page---------------------------"  class="markup--anchor markup--p-anchor"    target="_blank">Ben Sperry</a> and Adam Bradley of Drifty Co. in 2013.</p><p name="ae3a" class="graf graf--p graf-after--p">Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging <a href="https://cordova.apache.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Cordova</a> environment.</p><p name="d7c0" class="graf graf--p graf-after--p">It is important to note the contribution of Cordova in this. Ionic is only a UI wrapper made up of HTML, CSS and JS. So, by default, Ionic cannot run as an app in an iOS or Android device. Cordova is the build environment that containerizes (sort of) this Ionic web app and converts it into a device installable app, along with providing this app access to native APIs like Camera etc.</p><p name="010c" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. <strong class="markup--strong markup--p-strong">With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android </strong>(and windows!), that too with the simplicity of HTML, CSS, and JS.</p><h3 name="a431" class="graf graf--h3 graf-after--p">What is Capacitor&nbsp;?</h3><p name="8090" class="graf graf--p graf-after--h3 is-selected">Now you have some idea of Cordova&#8202;—&#8202;Cordova helps build Ionic web app into a device installable app. But there are some limitations of Cordova, which Capacitor tries to overcome with a new App workflow.</p><p name="f84c" class="graf graf--p graf-after--p">Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, <em class="markup--em markup--p-em">and</em> the web. Ionic people call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps.</p><blockquote name="6299" class="graf graf--blockquote graf-after--p">Capacitor is very similar to Cordova, but with some key differences in the app workflow</blockquote><p name="e43f" class="graf graf--p graf-after--blockquote">Let’s check the differences between Cordova and Capacitor</p><ol class="postList"><li name="21a5" class="graf graf--li graf-after--p">Capacitor considers each platform project a <em class="markup--em markup--li-em">source asset</em> instead of a <em class="markup--em markup--li-em">build time asset</em>. That means, Capacitor wants you to keep the platform source code in the repository. On the other hand, Cordova always assumes that you will generate the platform code on build time</li><li name="68ee" class="graf graf--li graf-after--li">Because of the above, Capacitor does not use <code class="markup--code markup--li-code">config.xml</code> or a similar custom configuration for platform settings. Instead, configuration changes are made by editing <code class="markup--code markup--li-code">AndroidManifest.xml</code> for Android and <code class="markup--code markup--li-code">Info.plist</code> for Xcode</li><li name="d63a" class="graf graf--li graf-after--li">Capacitor does not “run on device” or emulate through the command line. Instead, such operations occur through the platform-specific IDE. So you cannot run an Ionic-capacitor app using a command like <code class="markup--code markup--li-code">ionic run ios</code>&nbsp;. You will have to run iOS apps using Xcode, and Android apps using Android studio</li><li name="3ecd" class="graf graf--li graf-after--li">Since platform code is not a <em class="markup--em markup--li-em">source asset, </em>you can directly change the native code using Xcode or Android Studio. This give more flexibility to developers</li><li name="3115" class="graf graf--li graf-after--li">Capacitor does not copy plugin source code to your app before building. Instead, all plugins are built as Frameworks (on iOS) and Libraries (on Android) and installed using the leading dependency management tool for each platform (CocoaPods and Gradle/Maven, respectively)</li></ol><p name="752e" class="graf graf--p graf-after--li">In essence, Capacitor is like a fresh, more flexible version of Corodva.</p><h4 name="cf20" class="graf graf--h4 graf-after--p">Plugins</h4><p name="dc8c" class="graf graf--p graf-after--h4">Cordova and <a href="https://ionicframework.com/docs/native"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic Native</a> plugins can be used in Capacitor environment. However, there are certain Cordova plugins which are known to be <a href="https://capacitor.ionicframework.com/docs/cordova/known-incompatible-plugins/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">incompatible with Capacitor.</a></p><p name="2367" class="graf graf--p graf-after--p">Other than that, Capacitor also doesn’t support plugin installation with variables. Those changes have to be done manually in the native code.</p><h3 name="1e45" class="graf graf--h3 graf-after--p">Why Ionic React&nbsp;?</h3><p name="25fb" class="graf graf--p graf-after--h3">(Read carefully)</p><p name="0084" class="graf graf--p graf-after--p">Since Ionic 4, Ionic has become framework agnostic. Now you can create Ionic apps in Angular, React, Vue or even in plain JS. This gives Ionic great flexibility to be used by all kinds of developers.</p><p name="4218" class="graf graf--p graf-after--p">It is important to note that <strong class="markup--strong markup--p-strong">Ionic React apps are only supported by Capacitor build environment.</strong></p><p name="4889" class="graf graf--p graf-after--p">Same is not true for Ionic Angular apps<strong class="markup--strong markup--p-strong">&#8202;—&#8202;Ionic Angular apps are supported by both Cordova and Capacitor build environments.</strong></p><p name="a16a" class="graf graf--p graf-after--p">Hence, if you want to build apps in Ionic React, you need to use Capacitor to build the app on device.</p><p name="8640" class="graf graf--p graf-after--p">But&nbsp;…</p><p name="af29" class="graf graf--p graf-after--p">… To build camera / Photo gallery functionality, you can either opt to</p><ul class="postList"><li name="efb1" class="graf graf--li graf-after--p">Install a Cordova plugin for Camera, or</li><li name="a06d" class="graf graf--li graf-after--li">Use Capacitor core camera functionality</li></ul><p name="97da" class="graf graf--p graf-after--li">I know if can get confusing as 4 frameworks are crossing their paths here. Bottom line for this post&#8202;—&#8202;Ionic + React + Capacitor + Camera (using Capacitor core functionality)</p><h3 name="6d48" class="graf graf--h3 graf-after--p">Structure of&nbsp;post</h3><p name="4d40" class="graf graf--p graf-after--h3">I will go step-by-step so everyone can benefit</p><ol class="postList"><li name="efc8" class="graf graf--li graf-after--p">Create a basic Ionic-react app</li><li name="929f" class="graf graf--li graf-after--li">Attach Capacitor to your Ionic-react app</li><li name="f76c" class="graf graf--li graf-after--li">Implement Capacitor Camera functionality</li><li name="b1b4" class="graf graf--li graf-after--li">Build app on Android, and Test</li><li name="20a1" class="graf graf--li graf-after--li">Explore Camera options</li><li name="ccf5" class="graf graf--li graf-after--li">What about Camera in a Web App&nbsp;?</li></ol><p name="1d41" class="graf graf--p graf-after--li">Let’s get started with Ionic React Camera app&nbsp;!</p><h3 name="5313" class="graf graf--h3 graf-after--p">Step 1&#8202;—&#8202;Create a basic Ionic-React app</h3><p name="9e7a" class="graf graf--p graf-after--h3">First you need to make sure you have the latest Ionic CLI. This will ensure you are using everything latest (Duh&nbsp;! )&nbsp;. Ensure latest Ionic CLI installation using</p><pre name="cf8a" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">npm install -g ionic@latest</code></pre><p name="f38b" class="graf graf--p graf-after--pre">Creating a basic Ionic-React app is not much different or difficult from creating a basic Ionic-Angular app. Start a basic <code class="markup--code markup--p-code">blank</code> starter using</p><pre name="d448" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">ionic start IonicReactCamera blank --type=react</code></pre><p name="39bc" class="graf graf--p graf-after--pre">You see what just happened. The <code class="markup--code markup--p-code">--type=react</code> told the CLI to create a <strong class="markup--strong markup--p-strong">React</strong> app, not an <strong class="markup--strong markup--p-strong">Angular</strong> app&nbsp;!!</p><p name="8b9b" class="graf graf--p graf-after--p">Run the app in browser using (yes you guessed it right)</p><pre name="96ce" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="6306" class="graf graf--p graf-after--pre">You won’t see much in the homepage created in the starter. Let’s modify this page to include a floating button and a placeholder for our selected image</p><figure tabindex="0" contenteditable="false" name="d7e8" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 389px; max-height: 683px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.6%;"></div><img class="graf-image" data-image-id="1*SgtPsLOI8_y7IMhXn7JSMw.png" data-width="389" data-height="683" alt="Home page of ionic-react camera starter" src="https://cdn-images-1.medium.com/max/800/1*SgtPsLOI8_y7IMhXn7JSMw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Home page of ionic-react camera&nbsp;starter</figcaption></figure><p name="8472" class="graf graf--p graf-after--figure">The code for this layout isn’t very complex</p><figure tabindex="0" contenteditable="false" name="2de5" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/cd3afedf94aad892edf6d5b1816d829a.js %}</div></div></figure><h3 name="35d2" class="graf graf--h3 graf-after--figure">Step 2&#8202;—&#8202;Attach Capacitor to your Ionic-React app</h3><p name="4384" class="graf graf--p graf-after--h3">Capacitor can be attached to an existing Ionic app as well. To attach Capacitor to your existing Ionic app, run</p><pre name="e29e" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">ionic integrations enable capacitor</code></pre><p name="2503" class="graf graf--p graf-after--pre">This will attach Capacitor to your Ionic app. After this, you have to <code class="markup--code markup--p-code">init</code> the Capacitor app with</p><pre name="c8ac" class="graf graf--pre graf-after--p">$ npx cap init</pre><p name="c9af" class="graf graf--p graf-after--pre">It will ask you the app ID, which is the domain identifier of your app (ex: <code class="markup--code markup--p-code">com.example.app</code>)</p><p name="fddf" class="graf graf--p graf-after--p">Before building the app for Android, let’s first add the code for Camera functionality</p><h3 name="1f20" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Implement Capacitor camera functionality</h3><p name="7f75" class="graf graf--p graf-after--h3">Similar to a Cordova plugin, Capacitor camera functionality also allows both Camera and Gallery functionalities. Once you implement the Camera function using Capacitor, it will automatically ask you for Camera / Gallery option.</p><p name="1ed5" class="graf graf--p graf-after--p">Import Camera in your app/page with this</p><pre name="8828" class="graf graf--pre graf-after--p">import { Plugins, CameraResultType } from '@capacitor/core';<br>const { Camera } = Plugins;</pre><p name="28a4" class="graf graf--p graf-after--pre">There are few plugins in-built in <code class="markup--code markup--p-code">Capacitor/core</code>&nbsp;. You can access these by simply importing.</p><p name="40b7" class="graf graf--p graf-after--p">Implement camera capture or gallery selection method like this</p><pre name="bf50" class="graf graf--pre graf-after--p">async takePicture() {<br>  const image = await Camera.getPhoto({<br>  quality: 90,<br>  allowEditing: false,<br>  resultType: CameraResultType.Uri<br>});<br>var imageUrl = image.webPath;<br>// Can be set to the src of an image now<br>this.setState({<br>  photo: imageUrl<br>})<br>}</pre><p name="1f5a" class="graf graf--p graf-after--pre">Then you can call <code class="markup--code markup--p-code">takePicture</code> function from the floating button click using</p><pre name="30f6" class="graf graf--pre graf-after--p">&lt;IonFabButton color="primary" onClick={() =&gt; this.takePicture()}&gt;</pre><p name="32cc" class="graf graf--p graf-after--pre">That’s it&nbsp;! Camera integrated&nbsp;! Lol, don’t worry we’ll test it as well.</p><h3 name="29f7" class="graf graf--h3 graf-after--p">Step 4&#8202;—&#8202;Build app on Android, and&nbsp;test</h3><p name="34b9" class="graf graf--p graf-after--h3">Before adding a platform to Capacitor, you need to <em class="markup--em markup--p-em">build</em> the app once. Build the app using</p><pre name="4d03" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ ionic build</code></pre><p name="ccd4" class="graf graf--p graf-after--pre">Now add Android platform (or iOS)</p><pre name="b984" class="graf graf--pre graf-after--p">$ npx cap add android</pre><p name="d07b" class="graf graf--p graf-after--pre graf--trailing">This should add Android platform to your project.</p></div></div></section><section name="828a" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h4 name="518f" class="graf graf--h4 graf--leading"><strong class="markup--strong markup--h4-strong">Troubleshoot Tip</strong></h4><p name="3f6b" class="graf graf--p graf-after--h4">If you face an error saying</p><pre name="a611" class="graf graf--pre graf-after--p">Capacitor could not find the web assets directory "/Users/abhijeetrathore/ionic-4-music/www".</pre><p name="88c3" class="graf graf--p graf-after--pre graf--trailing">Check your <code class="markup--code markup--p-code">capacitor.config.json</code> file. Make sure the <code class="markup--code markup--p-code">webDir</code> field has a value of <code class="markup--code markup--p-code">www</code>&nbsp;. If not, change the <code class="markup--code markup--p-code">webDir</code> field to have the same value as the last parameter of the url showing up in the above error</p></div></div></section><section name="ecd8" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="2388" class="graf graf--p graf--leading">Note, you cannot run the project directly on the phone using CLI in Capacitor. You will have to open the project in Android Studio and run using the Android Studio IDE. Open the project in Android Studio using</p><pre name="c540" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ npx cap open android</code></pre><p name="4db5" class="graf graf--p graf-after--pre">Now run the app in your device using Android Studio, and you get this&nbsp;! (Sample from my One Plus 6T, Android P)</p><h4 name="2f09" class="graf graf--h4 graf-after--p">Select photo from&nbsp;Camera</h4><figure tabindex="0" contenteditable="false" name="181c" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*UZjl2y5PxffGsbrv7u36yg.gif" data-width="350" data-height="622" alt="Capture image from Camera in Ionic React App using Capacitor" src="https://cdn-images-1.medium.com/max/800/1*UZjl2y5PxffGsbrv7u36yg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Capture image from Camera in Ionic React App using Capacitor</figcaption></figure><h4 name="e667" class="graf graf--h4 graf-after--figure">Select photo from&nbsp;Gallery</h4><p name="4a9d" class="graf graf--p graf-after--h4">Selecting image from Gallery can be done with same code</p><figure tabindex="0" contenteditable="false" name="6e08" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*FNt5FG8HgL00fEmYXYCGnw.gif" data-width="350" data-height="622" alt="Select image from gallery in Ionic React App using Capacitor" src="https://cdn-images-1.medium.com/max/800/1*FNt5FG8HgL00fEmYXYCGnw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Select image from gallery in Ionic React App using Capacitor</figcaption></figure><p name="bc88" class="graf graf--p graf-after--figure">🎉🎉🎉 Congrats&nbsp;! You just implemented Camera and Gallery functionality using Capacitor, in Ionic React App&nbsp;!</p><h3 name="13a8" class="graf graf--h3 graf-after--p">Step 5&#8202;—&#8202;How about Camera in a web app&nbsp;?</h3><p name="ed2e" class="graf graf--p graf-after--h3">As per the development philosophy of Capacitor goes, it is focused entirely on enabling modern web apps to run on all major platforms with ease. That also includes web-app. So let’s see whether our camera app can run on a web-browser as well</p><p name="9355" class="graf graf--p graf-after--p">Let’s run the app in browser using <code class="markup--code markup--p-code">ionic serve</code>&nbsp;. You’ll probably see an error like this</p><pre name="8035" class="graf graf--pre graf-after--p">TypeError: cameraModal.componentOnReady is not a function</pre><p name="24b7" class="graf graf--p graf-after--pre">Some Capacitor plugins, including the Camera, provide the web-based functionality and UI via the Ionic <a href="https://github.com/ionic-team/ionic-pwa-elements"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">PWA Elements library</a>. It’s a separate dependency, so install it using the Terminal first</p><pre name="7d35" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ npm install @ionic/pwa-elements</code> </pre><p name="fa2c" class="graf graf--p graf-after--pre">Now import the package in your camera page (or app), and initialize after app is bootstrapped</p><pre name="9792" class="graf graf--pre graf-after--p">import { defineCustomElements } from '@ionic/pwa-elements/loader';</pre><p name="9345" class="graf graf--p graf-after--pre">and I’ll initialize it in the constructor</p><pre name="86be" class="graf graf--pre graf-after--p">constructor(props: any) {<br>super(props);<br>...<br>defineCustomElements(window);<br>}</pre><p name="6dbe" class="graf graf--p graf-after--pre">Now run the app in browser using <code class="markup--code markup--p-code">ionic serve</code> and you’ll be able to capture images using your web-cam (Chrome browser)</p><figure tabindex="0" contenteditable="false" name="ccfe" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*e_4u5ImSuHecCrt0BZTu4A.gif" data-width="800" data-height="442" alt="Capture photo from camera in Ionic React web-App using Capacitor" src="https://cdn-images-1.medium.com/max/800/1*e_4u5ImSuHecCrt0BZTu4A.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Capture photo from camera in Ionic React web-App using Capacitor</figcaption></figure><h3 name="45c4" class="graf graf--h3 graf-after--figure">Step 6&#8202;—&#8202;Explore Camera&nbsp;options</h3><p name="998d" class="graf graf--p graf-after--h3">In the above example, we used minimum Camera options and got away with it. There are many more Camera options you can use to customize user’s experience of clicking/selecting images. Here’s the list of all the options</p><figure tabindex="0" contenteditable="false" name="081d" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/3bed8232b513a57424714c7e431107a9.js %}</div></div></figure><p name="18d1" class="graf graf--p graf-after--figure">You can find out more about the Capacitor Camera API in the <a href="https://capacitor.ionicframework.com/docs/apis/camera/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">official documentation</a></p><h3 name="d9c7" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="cf6e" class="graf graf--p graf-after--h3">In this post, you learnt how to implement Camera and Photo Gallery functionality in your Ionic React apps using Capacitor. We also tested the functionality on Android and web-browser.</p><blockquote name="9738" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Code for this tutorial is available on Github repo </strong><a href="https://github.com/enappd/ionic-react-camera-demo"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">ionic-react-camera-demo</strong></a></blockquote><h3 name="514b" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="d7bd" class="graf graf--p graf-after--h3">Now that you have learned the implementation of In-app purchase in Ionic React app, you can also try following blogs for <strong class="markup--strong markup--p-strong">Ionic Angular apps</strong></p><ul class="postList"><li name="39ea" class="graf graf--li graf-after--p">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="8665" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="fd9c" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="31b6" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="4a75" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="819d" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="eee3" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="8bbe" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="2467" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><h4 name="73e7" class="graf graf--h4 graf-after--li">Ionic Angular Full App&nbsp;Starter</h4><p name="2c47" class="graf graf--p graf-after--h4">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 4 Angular app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="0c02" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 560px; max-height: 353px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="0*FEEIJR0kJXNBCWUo.jpeg" data-width="560" data-height="353" alt="Ionic 4 Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/0*FEEIJR0kJXNBCWUo.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 Full App with huge number of layouts and&nbsp;features</figcaption></figure><h4 name="48f1" class="graf graf--h4 graf-after--figure">Ionic React Full App&nbsp;Starter</h4><p name="e083" class="graf graf--p graf-after--h4">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 4 React app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic React Full App</a></p><figure tabindex="0" contenteditable="false" name="5cfa" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*ofk4HAMnl1ZXyArf1TxZjQ.jpeg" data-width="600" data-height="600" alt="Ionic 4 React Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/1*ofk4HAMnl1ZXyArf1TxZjQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 React Full App with huge number of layouts and&nbsp;features</figcaption></figure><p name="74ff" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>