{"id":5209,"date":"2023-05-05T12:35:17","date_gmt":"2023-05-05T16:35:17","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5209"},"modified":"2023-05-08T09:53:52","modified_gmt":"2023-05-08T13:53:52","slug":"how-to-build-an-ionic-barcode-scanner-with-capacitor","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor","title":{"rendered":"How to build an Ionic Barcode Scanner with Capacitor"},"content":{"rendered":"\n<p><em>This is a guest post from Robin Genz, an Ionic Developer Expert and Capacitor Plugin author at CapAwesome. <\/em><\/p>\n\n\n\n<p>Capacitor makes building a cross-platform app with one codebase easier than ever. Especially with the <a href=\"https:\/\/ionic.io\/blog\/announcing-capacitor-5\" target=\"_blank\" rel=\"noreferrer noopener\">release of Capacitor 5.0<\/a>, creating a plugin with Capacitor is simple and developer-friendly. In combination with the Ionic Framework, we also have a modern open source mobile UI toolkit. We will use these technologies to create a complete barcode scanner app for Android and iOS in just 15 minutes. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Highlights include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>One Angular codebase that runs on Android and iOS using Capacitor.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Barcode scanning functionality powered by ML Kit, Google\u2019s machine learning SDK for Android and iOS.<\/li>\n<\/ul>\n\n\n\n<p>You can find the complete app code referenced in this guide <a href=\"https:\/\/github.com\/robingenz\/ionic-capacitor-barcode-scanner\">on GitHub<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"474\" height=\"1024\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/Untitled-474x1024.gif\" alt=\"\" class=\"wp-image-5210 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/Untitled-474x1024.gif 474w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/Untitled-139x300.gif 139w\" data-sizes=\"auto, (max-width: 474px) 100vw, 474px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 474px; --smush-placeholder-aspect-ratio: 474\/1024;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"474\" height=\"1024\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/Untitled-474x1024.gif\" alt=\"\" class=\"wp-image-5210\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/Untitled-474x1024.gif 474w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/Untitled-139x300.gif 139w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/noscript><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Download Required Tools<a href=\"https:\/\/ionicframework.com\/docs\/angular\/your-first-app#download-required-tools\"><\/a><\/strong><\/h1>\n\n\n\n<p>Download and install the following tools to ensure an optimal developer experience:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/nodejs.org\/en\/download\">Node.js<\/a>&nbsp;to install the required dependencies<\/li>\n\n\n\n<li>A code editor for&#8230; writing code! Tip: Visual Studio Code supports the new&nbsp;<a href=\"https:\/\/ionicframework.com\/docs\/intro\/vscode-extension\">Ionic VS Code Extension<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.android.com\/studio\">Android Studio<\/a>&nbsp;to build the Android app<\/li>\n\n\n\n<li><a href=\"https:\/\/apps.apple.com\/de\/app\/xcode\/id497799835?mt=12\">XCode<\/a>&nbsp;to build the iOS app (only available on macOS)<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Create a new App<\/h1>\n\n\n\n<p>To create a new project, we simply use the Ionic CLI. For this, first install the CLI globally:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm i -g @ionic\/cli<\/code><\/pre>\n\n\n\n<p>Then you can create a new project with the&nbsp;<code>ionic start<\/code>&nbsp;command:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npx ionic start barcode-scanner blank --type=angular --capacitor<\/code><\/pre>\n\n\n\n<p>In this case, the app is called&nbsp;<code>barcode-scanner<\/code>, the starter template is&nbsp;<code>blank<\/code>&nbsp;and the project type for the purposes of this guide is Angular. You can also choose Vue or React, for example. Additionally, we enable the Capacitor integration with&nbsp;<code>--capacitor<\/code>.<\/p>\n\n\n\n<p>Once everything is ready, you should see this output:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">Your Ionic app is ready! Follow these next steps:\n\n- Go to your new project: cd .\\\\barcode-scanner\n- Run ionic serve within the app directory to see your app in the browser\n- Run ionic capacitor add to add a native iOS or Android project using Capacitor\n- Generate your app icon and splash screens using cordova-res --skip-config --copy\n- Explore the Ionic docs for components, tutorials, and more: &lt;https:\/\/ion.link\/docs&gt;\n- Building an enterprise app? Ionic has Enterprise Support and Features: &lt;https:\/\/ion.link\/enterprise-edition&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Add the Android Platform<a href=\"https:\/\/capacitorjs.com\/docs\/android#adding-the-android-platform\"><\/a><\/strong><\/h2>\n\n\n\n<p>Now let&#8217;s add the Android platform.<\/p>\n\n\n\n<p>For this, first install the&nbsp;<code>@capacitor\/android<\/code>&nbsp;package:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm install @capacitor\/android<\/code><\/pre>\n\n\n\n<p>After that you add the platform:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npx cap add android<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Add the iOS Platform<\/strong><\/h2>\n\n\n\n<p>Install the<code>&nbsp;@capacitor\/ios<\/code>&nbsp;package:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm install @capacitor\/ios<\/code><\/pre>\n\n\n\n<p>After that you add the platform:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npx cap add ios<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">Add the Barcode Scanner<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Install the Plugin<\/h2>\n\n\n\n<p>To use the ML Kit Barcode Scanning SDK in Capacitor, we need the&nbsp;<a href=\"https:\/\/capawesome.io\/plugins\/mlkit\/barcode-scanning\/\">Capacitor ML Kit Barcode Scanning Plugin<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm install @capacitor-mlkit\/barcode-scanning\nnpx ionic cap sync<\/code><\/pre>\n\n\n\n<p>On Android, the SDKs also require the following permissions in the&nbsp;<code>AndroidManifest.xml<\/code>&nbsp;before or after the&nbsp;<code>application<\/code>&nbsp;tag:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">&lt;!-- To get access to the camera. --&gt;\n&lt;uses-permission android:name=&quot;android.permission.CAMERA&quot; \/&gt;\n&lt;!-- To get access to the flashlight. --&gt;\n&lt;uses-permission android:name=&quot;android.permission.FLASHLIGHT&quot;\/&gt;<\/code><\/pre>\n\n\n\n<p>You also need to add the following metadata in the&nbsp;<code>application<\/code>&nbsp;tag in your&nbsp;<code>AndroidManifest.xml<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">&lt;meta-data android:name=&quot;com.google.mlkit.vision.DEPENDENCIES&quot; android:value=&quot;barcode_ui&quot;\/&gt;<\/code><\/pre>\n\n\n\n<p>On&nbsp;<strong>iOS<\/strong>, add the&nbsp;<code>NSCameraUsageDescription<\/code>&nbsp;key to the&nbsp;<code>ios\/App\/App\/Info.plist<\/code>&nbsp;file, which tells the user why the app needs to use the camera:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">&lt;key&gt;NSCameraUsageDescription&lt;\/key&gt;\n&lt;string&gt;The app enables the scanning of various barcodes.&lt;\/string&gt;<\/code><\/pre>\n\n\n\n<p>The plugin is now ready to use.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Build the UI<\/h2>\n\n\n\n<p>Scanning a barcode is as simple as it gets: You just have to call the\u00a0<a href=\"https:\/\/capawesome.io\/plugins\/mlkit\/barcode-scanning\/#scan\"><code>scan(...)<\/code><\/a>\u00a0method of the plugin and receive the scanned barcode as a result. To request the necessary permissions and to show the user a dialog in case of missing permissions, we will also use the\u00a0<a href=\"https:\/\/capawesome.io\/plugins\/mlkit\/barcode-scanning\/#requestpermissions\"><code>requestPermissions()<\/code><\/a>\u00a0method.<\/p>\n\n\n\n<p>The following code goes to your&nbsp;<code>src\/app\/home\/home.page.ts<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import { Component, OnInit } from &#039;@angular\/core&#039;;\nimport { Barcode, BarcodeScanner } from &#039;@capacitor-mlkit\/barcode-scanning&#039;;\nimport { AlertController } from &#039;@ionic\/angular&#039;;\n\n@Component({\n  selector: &#039;app-home&#039;,\n  templateUrl: &#039;home.page.html&#039;,\n  styleUrls: [&#039;home.page.scss&#039;],\n})\nexport class HomePage implements OnInit {\n  isSupported = false;\n  barcodes: Barcode[] = [];\n\n  constructor(private alertController: AlertController) {}\n\n  ngOnInit() {\n    BarcodeScanner.isSupported().then((result) =&gt; {\n      this.isSupported = result.supported;\n    });\n  }\n\n  async scan(): Promise&lt;void&gt; {\n    const granted = await this.requestPermissions();\n    if (!granted) {\n      this.presentAlert();\n      return;\n    }\n    const { barcodes } = await BarcodeScanner.scan();\n    this.barcodes.push(...barcodes);\n  }\n\n  async requestPermissions(): Promise&lt;boolean&gt; {\n    const { camera } = await BarcodeScanner.requestPermissions();\n    return camera === &#039;granted&#039; || camera === &#039;limited&#039;;\n  }\n\n  async presentAlert(): Promise&lt;void&gt; {\n    const alert = await this.alertController.create({\n      header: &#039;Permission denied&#039;,\n      message: &#039;Please grant camera permission to use the barcode scanner.&#039;,\n      buttons: [&#039;OK&#039;],\n    });\n    await alert.present();\n  }\n}<\/code><\/pre>\n\n\n\n<p>To make the scanning process even faster and to reduce the error rate even further, you could filter on the formats you are looking for (e.g. QR codes) using the&nbsp;<a href=\"https:\/\/capawesome.io\/plugins\/mlkit\/barcode-scanning\/#scanoptions\"><code>formats<\/code><\/a>&nbsp;option. <\/p>\n\n\n\n<p>Last but not least, the only thing missing is the template. To keep the app simple, we just list all scanned barcodes with&nbsp;<a href=\"https:\/\/ionicframework.com\/docs\/api\/list\"><code>ion-list<\/code><\/a>. The scanning process is started via a floating action button in the bottom right corner.<\/p>\n\n\n\n<p>For this, change your&nbsp;<code>src\/app\/home\/home.page.html<\/code> to:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">&lt;ion-header&gt;\n  &lt;ion-toolbar&gt;\n    &lt;ion-title&gt;Barcode Scanner&lt;\/ion-title&gt;\n  &lt;\/ion-toolbar&gt;\n&lt;\/ion-header&gt;\n\n&lt;ion-content&gt;\n  &lt;ion-list&gt;\n    &lt;ion-item *ngFor=&quot;let barcode of barcodes&quot;&gt;\n      &lt;ion-label position=&quot;stacked&quot;&gt;{{ barcode.format }}&lt;\/ion-label&gt;\n      &lt;ion-input type=&quot;text&quot; [value]=&quot;barcode.rawValue&quot;&gt;&lt;\/ion-input&gt;\n    &lt;\/ion-item&gt;\n  &lt;\/ion-list&gt;\n  &lt;ion-fab slot=&quot;fixed&quot; vertical=&quot;bottom&quot; horizontal=&quot;end&quot;&gt;\n    &lt;ion-fab-button (click)=&quot;scan()&quot; [disabled]=&quot;!isSupported&quot;&gt;\n      &lt;ion-icon name=&quot;scan&quot;&gt;&lt;\/ion-icon&gt;\n    &lt;\/ion-fab-button&gt;\n  &lt;\/ion-fab&gt;\n&lt;\/ion-content&gt;<\/code><\/pre>\n\n\n\n<p>Now everything is ready for the first launch! \ud83c\udf89<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Run the App<\/h1>\n\n\n\n<p>Run the app and scan your first barcode or QR code:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\"># Run the Android platform\nnpx ionic cap run android\n\n# Run the iOS platform\nnpx ionic cap run ios<\/code><\/pre>\n\n\n\n<p>That was easy, wasn&#8217;t it?<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Conclusion<\/h1>\n\n\n\n<p>Implementing a barcode scanner across multiple platforms can be challenging. However, the Capacitor ML Kit barcode scanning plugin does most of the work for you, and the performance of the ML Kit SDK is quite impressive. Only the Web platform is not supported by Google&#8217;s machine learning SDK. If you also want to support the Web platform, you can just combine this plugin with other libraries like&nbsp;<a href=\"https:\/\/github.com\/zxing-js\/library\">zxing-js\/library<\/a>&nbsp;or the&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Barcode_Detection_API\">Barcode Detection API<\/a>&nbsp;(still experimental).<\/p>\n\n\n\n<p>Be sure to check out the&nbsp;<a href=\"https:\/\/capawesome.io\/plugins\/mlkit\/barcode-scanning\/#api\">API Reference<\/a>&nbsp;to see what else you can do with this plugin. If you have any questions, just&nbsp;<a href=\"https:\/\/github.com\/capawesome-team\/capacitor-mlkit\/discussions\/new\/choose\">create a discussion<\/a>&nbsp;in the GitHub repository. Make sure you follow&nbsp;<a href=\"https:\/\/twitter.com\/capawesomeio\">Capawesome<\/a>&nbsp;on Twitter, so you don&#8217;t miss any future updates.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This easy-to-follow tutorial from Robin Genz will walk you through how to build an Ionic Barcode Scanner with Capacitor. <\/p>\n","protected":false},"author":104,"featured_media":5212,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"26","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,124],"tags":[151,25],"class_list":["post-5209","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-tutorials","tag-capacitor","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>How to build an Ionic Barcode Scanner with Capacitor - Ionic Blog<\/title>\n<meta name=\"description\" content=\"This easy-to-follow tutorial from Robin Genz will walk you through how to build an Ionic Barcode Scanner with Capacitor.\" \/>\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\/how-to-build-an-ionic-barcode-scanner-with-capacitor\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build an Ionic Barcode Scanner with Capacitor\" \/>\n<meta property=\"og:description\" content=\"This easy-to-follow tutorial from Robin Genz will walk you through how to build an Ionic Barcode Scanner with Capacitor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-05T16:35:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-08T13:53:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Robin Genz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Robin Genz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor\"},\"author\":{\"name\":\"Robin Genz\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c0a6e1b12a4fc7c2aef7c942172d5dab\"},\"headline\":\"How to build an Ionic Barcode Scanner with Capacitor\",\"datePublished\":\"2023-05-05T16:35:17+00:00\",\"dateModified\":\"2023-05-08T13:53:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor\"},\"wordCount\":712,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png\",\"keywords\":[\"Capacitor\",\"Tutorials\"],\"articleSection\":[\"All\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor\",\"url\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor\",\"name\":\"How to build an Ionic Barcode Scanner with Capacitor - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png\",\"datePublished\":\"2023-05-05T16:35:17+00:00\",\"dateModified\":\"2023-05-08T13:53:52+00:00\",\"description\":\"This easy-to-follow tutorial from Robin Genz will walk you through how to build an Ionic Barcode Scanner with Capacitor.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to build an Ionic Barcode Scanner with Capacitor\"}]},{\"@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\/c0a6e1b12a4fc7c2aef7c942172d5dab\",\"name\":\"Robin Genz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/13857929-150x150.jpeg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/13857929-150x150.jpeg\",\"caption\":\"Robin Genz\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/robingenz\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to build an Ionic Barcode Scanner with Capacitor - Ionic Blog","description":"This easy-to-follow tutorial from Robin Genz will walk you through how to build an Ionic Barcode Scanner with Capacitor.","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\/how-to-build-an-ionic-barcode-scanner-with-capacitor","og_locale":"en_US","og_type":"article","og_title":"How to build an Ionic Barcode Scanner with Capacitor","og_description":"This easy-to-follow tutorial from Robin Genz will walk you through how to build an Ionic Barcode Scanner with Capacitor.","og_url":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor","og_site_name":"Ionic Blog","article_published_time":"2023-05-05T16:35:17+00:00","article_modified_time":"2023-05-08T13:53:52+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png","type":"image\/png"}],"author":"Robin Genz","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Robin Genz","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor"},"author":{"name":"Robin Genz","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c0a6e1b12a4fc7c2aef7c942172d5dab"},"headline":"How to build an Ionic Barcode Scanner with Capacitor","datePublished":"2023-05-05T16:35:17+00:00","dateModified":"2023-05-08T13:53:52+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor"},"wordCount":712,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png","keywords":["Capacitor","Tutorials"],"articleSection":["All","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor","url":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor","name":"How to build an Ionic Barcode Scanner with Capacitor - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png","datePublished":"2023-05-05T16:35:17+00:00","dateModified":"2023-05-08T13:53:52+00:00","description":"This easy-to-follow tutorial from Robin Genz will walk you through how to build an Ionic Barcode Scanner with Capacitor.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/how-to-build-an-ionic-barcode-scanner-with-capacitor#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"How to build an Ionic Barcode Scanner with Capacitor"}]},{"@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\/c0a6e1b12a4fc7c2aef7c942172d5dab","name":"Robin Genz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/13857929-150x150.jpeg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/13857929-150x150.jpeg","caption":"Robin Genz"},"url":"https:\/\/ionic.io\/blog\/author\/robingenz"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/barcodecapacitor-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5209","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\/104"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=5209"}],"version-history":[{"count":9,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5209\/revisions"}],"predecessor-version":[{"id":5253,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5209\/revisions\/5253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/5212"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=5209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=5209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=5209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}