Your Smart IOT

<p>As I continue to port my <a href="http://bit.ly/1sQrjjm" target="_blank">Ionic Framework</a> tutorials to Ionic 2, I figured it was time to discuss how to make use of the device camera within an application.  There are often needs to obtain pictures within an application.  Maybe you’re creating an application like Imgur, or maybe you just want to be able to obtain a profile picture.  Like I mentioned, I had written a camera tutorial a few years back on how to <a href="http://bit.ly/1qK4ig7" target="_blank">use the camera in an Ionic Framework application</a>.</p>
<p>This time around we’re going to see how to snap pictures within an Ionic 2 Android and iOS mobile application.</p>
<p>Let’s start by creating a fresh Ionic 2 project.  From the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following commands:</p>
<div id="crayon-5746050e8c63f270782307" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Create a Fresh Ionic 2 Project</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">Shell</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e8c63f270782307-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c63f270782307-2">2</div>
<div class="crayon-num" data-line="crayon-5746050e8c63f270782307-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c63f270782307-4">4</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e8c63f270782307-1" class="crayon-line"><span class="crayon-e">ionic</span> <span class="crayon-e">start</span> <span class="crayon-e">CameraProject</span> <span class="crayon-v">blank</span> <span class="crayon-o">—</span><span class="crayon-v">v2</span> <span class="crayon-o">—</span><span class="crayon-e">typescript</span></div>
<div id="crayon-5746050e8c63f270782307-2" class="crayon-line crayon-striped-line"><span class="crayon-r">cd</span> <span class="crayon-e">CameraProject</span></div>
<div id="crayon-5746050e8c63f270782307-3" class="crayon-line"><span class="crayon-e">ionic</span> <span class="crayon-e">platform</span> <span class="crayon-e">add</span> <span class="crayon-e">ios</span></div>
<div id="crayon-5746050e8c63f270782307-4" class="crayon-line crayon-striped-line"><span class="crayon-e">ionic</span> <span class="crayon-e">platform</span> <span class="crayon-e">add</span> <span class="crayon-v">android</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>A few things to note above.  We are creating an Ionic 2 TypeScript project.  This means that you need to have the appropriate Ionic CLI installed.  If you are not using a Mac then you cannot add and build for the iOS platform.</p>
<p>To use the Android and iOS device camera there are a few options.  Both options require the <a href="http://bit.ly/1sQrvyZ" target="_blank">Apache Cordova camera plugin</a>.  You can use vanilla JavaScript with the plugin or you can use <a href="http://bit.ly/1qK43BK" target="_blank">Ionic Native</a>.</p>
<p>We’re going to use Ionic Native, but first lets install the Apache Cordova plugin:</p>
<div id="crayon-5746050e8c655164775095" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Install Apache Cordova Camera Plugin</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">Shell</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e8c655164775095-1">1</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e8c655164775095-1" class="crayon-line"><span class="crayon-e">ionic</span> <span class="crayon-e">plugin</span> <span class="crayon-e">add</span> <span class="crayon-v">cordova</span><span class="crayon-o">–</span><span class="crayon-v">plugin</span><span class="crayon-o">–</span><span class="crayon-v">camera</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>Let me start by saying that as of now, April 2016, the official Ionic Native documentation for the camera plugin is terrible.  To learn how to use this plugin I had to dig into the <a href="http://bit.ly/1sQrTgW" target="_blank">source code</a>.  I’m going to save you the trouble.</p>
<h2>Developing the Ionic 2 Device Camera Logic</h2>
<p>The logic file won’t be too complicated.  Essentially we’ll be creating a function that uses <code>Camera</code> class with various options.  There are some catches though which we’ll see.  First open the project’s <strong>app/pages/home/home.ts</strong> file and include the following code:</p>
<div id="crayon-5746050e8c660251510395" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/pages/home/home.ts</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">JavaScript</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-2">2</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-4">4</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-5">5</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-6">6</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-7">7</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-8">8</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-9">9</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-10">10</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-11">11</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-12">12</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-13">13</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-14">14</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-15">15</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-16">16</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-17">17</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-18">18</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-19">19</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-20">20</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-21">21</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-22">22</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-23">23</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-24">24</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-25">25</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-26">26</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-27">27</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-28">28</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-29">29</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-30">30</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-31">31</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-32">32</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-33">33</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-34">34</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-35">35</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-36">36</div>
<div class="crayon-num" data-line="crayon-5746050e8c660251510395-37">37</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c660251510395-38">38</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e8c660251510395-1" class="crayon-line"><span class="crayon-e">import</span> <span class="crayon-sy">{</span><span class="crayon-v">Page</span><span class="crayon-sy">}</span> <span class="crayon-i">from</span> <span class="crayon-s">‘ionic-angular’</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-2" class="crayon-line crayon-striped-line"><span class="crayon-e">import</span> <span class="crayon-sy">{</span><span class="crayon-v">Camera</span><span class="crayon-sy">}</span> <span class="crayon-i">from</span> <span class="crayon-s">‘ionic-native’</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-3" class="crayon-line"><span class="crayon-e">import</span> <span class="crayon-sy">{</span><span class="crayon-v">NgZone</span><span class="crayon-sy">}</span> <span class="crayon-i">from</span> <span class="crayon-s">“angular2/core”</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-4" class="crayon-line crayon-striped-line"></div>
<div id="crayon-5746050e8c660251510395-5" class="crayon-line"><span class="crayon-r">declare</span> <span class="crayon-t">var</span> <span class="crayon-v">navigator:</span> <span class="crayon-v">any</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-6" class="crayon-line crayon-striped-line"></div>
<div id="crayon-5746050e8c660251510395-7" class="crayon-line"><span class="crayon-sy">@</span><span class="crayon-e">Page</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div>
<div id="crayon-5746050e8c660251510395-8" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">templateUrl</span><span class="crayon-o">:</span> <span class="crayon-s">‘build/pages/home/home.html’</span></div>
<div id="crayon-5746050e8c660251510395-9" class="crayon-line"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div>
<div id="crayon-5746050e8c660251510395-10" class="crayon-line crayon-striped-line"><span class="crayon-e">export</span> <span class="crayon-t">class</span> <span class="crayon-e">HomePage</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e8c660251510395-11" class="crayon-line"></div>
<div id="crayon-5746050e8c660251510395-12" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">base64Image</span><span class="crayon-o">:</span> <span class="crayon-t">string</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-13" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">zone</span><span class="crayon-o">:</span> <span class="crayon-v">any</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-14" class="crayon-line crayon-striped-line"></div>
<div id="crayon-5746050e8c660251510395-15" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-r">constructor</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e8c660251510395-16" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">base64Image</span> <span class="crayon-o">=</span> <span class="crayon-s">“http://bit.ly/1qK45JV;</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-17" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">zone</span> <span class="crayon-o">=</span> <span class="crayon-r">new</span> <span class="crayon-e">NgZone</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">enableLongStackTrace</span><span class="crayon-o">:</span> <span class="crayon-t">false</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-18" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-sy">}</span></div>
<div id="crayon-5746050e8c660251510395-19" class="crayon-line"></div>
<div id="crayon-5746050e8c660251510395-20" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e">takePicture</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e8c660251510395-21" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-v">Camera</span><span class="crayon-sy">.</span><span class="crayon-e">getPicture</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div>
<div id="crayon-5746050e8c660251510395-22" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">quality</span> <span class="crayon-o">:</span> <span class="crayon-cn">75</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e8c660251510395-23" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">destinationType</span> <span class="crayon-o">:</span> <span class="crayon-v">navigator</span><span class="crayon-sy">.</span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-v">DestinationType</span><span class="crayon-sy">.</span><span class="crayon-v">DATA_URL</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e8c660251510395-24" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">sourceType</span> <span class="crayon-o">:</span> <span class="crayon-v">navigator</span><span class="crayon-sy">.</span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-v">PictureSourceType</span><span class="crayon-sy">.</span><span class="crayon-v">CAMERA</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e8c660251510395-25" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">allowEdit</span> <span class="crayon-o">:</span> <span class="crayon-t">true</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e8c660251510395-26" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">encodingType</span><span class="crayon-o">:</span> <span class="crayon-v">navigator</span><span class="crayon-sy">.</span><span class="crayon-v">camera</span><span class="crayon-sy">.</span><span class="crayon-v">EncodingType</span><span class="crayon-sy">.</span><span class="crayon-v">JPEG</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e8c660251510395-27" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">targetWidth</span><span class="crayon-o">:</span> <span class="crayon-cn">300</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e8c660251510395-28" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">targetHeight</span><span class="crayon-o">:</span> <span class="crayon-cn">300</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e8c660251510395-29" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">saveToPhotoAlbum</span><span class="crayon-o">:</span> <span class="crayon-t">false</span></div>
<div id="crayon-5746050e8c660251510395-30" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-st">then</span><span class="crayon-sy">(</span><span class="crayon-v">imageData</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e8c660251510395-31" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">zone</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e8c660251510395-32" class="crayon-line crayon-striped-line"><span class="crayon-h">                </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">base64Image</span> <span class="crayon-o">=</span> <span class="crayon-s">“data:image/jpeg;base64,”</span> <span class="crayon-o">+</span> <span class="crayon-v">imageData</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-33" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-34" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span> <span class="crayon-v">error</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e8c660251510395-35" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">“ERROR -> “</span> <span class="crayon-o">+</span> <span class="crayon-v">JSON</span><span class="crayon-sy">.</span><span class="crayon-e">stringify</span><span class="crayon-sy">(</span><span class="crayon-v">error</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-36" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c660251510395-37" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-sy">}</span></div>
<div id="crayon-5746050e8c660251510395-38" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>Let’s break everything down because I’m sure some of it won’t make sense.</p>
<p>The first import that didn’t ship with our blank template is as follows:</p>
<div id="crayon-5746050e8c66b840752042" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/pages/home/home.ts</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">JavaScript</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e8c66b840752042-1">1</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e8c66b840752042-1" class="crayon-line"><span class="crayon-e">import</span> <span class="crayon-sy">{</span><span class="crayon-v">Camera</span><span class="crayon-sy">}</span> <span class="crayon-i">from</span> <span class="crayon-s">‘ionic-native’</span><span class="crayon-sy">;</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>This allows us to use some Angular 2 friendly camera functionality with Ionic Native.</p>
<p>Notice how I’m declaring a <code>navigator</code> variable.  This is for the camera options.  Since it is vanilla JavaScript, TypeScript will throw some errors if we try to use it without first declaring it.</p>
<p>The next import is where things can get a little nutty.  We are including the <code>NgZone</code> class because as of now in the current Angular 2 and Ionic 2 beta, scope variables don’t always refresh the way they should.  If you’re familiar with AngularJS 1, you’ll remember the <code>$scope.apply()</code> function that would refresh the scope.  I like to think of this as similar.  My hope is that it changes in the future.</p>
<p>With the imports out of the way we find ourselves in the constructor method:</p>
<div id="crayon-5746050e8c676040196179" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/pages/home/home.ts</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">JavaScript</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e8c676040196179-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c676040196179-2">2</div>
<div class="crayon-num" data-line="crayon-5746050e8c676040196179-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c676040196179-4">4</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e8c676040196179-1" class="crayon-line"><span class="crayon-r">constructor</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e8c676040196179-2" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">base64Image</span> <span class="crayon-o">=</span> <span class="crayon-s">“http://bit.ly/1qK45JV;</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c676040196179-3" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">zone</span> <span class="crayon-o">=</span> <span class="crayon-r">new</span> <span class="crayon-e">NgZone</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">enableLongStackTrace</span><span class="crayon-o">:</span> <span class="crayon-t">false</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c676040196179-4" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>In the constructor we are defining a placeholder image to be used when no camera image exists.  We are also initializing our <code>NgZone</code> object for future use.</p>
<p>Like I said previously, the <code>takePicture</code> function just calls the Ionic Native camera class and passes it a bunch of options that I dug out of the Ionic source code.  You can choose to use the <code>navigator</code> variable that we declared earlier or the numeric values directly.  My preference is the <code>navigator</code> because then you can refer to the official Apache Cordova camera documentation for appropriate properties.</p>
<p>Finally you see this:</p>
<div id="crayon-5746050e8c682182163283" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/pages/home/home.ts</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">JavaScript</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e8c682182163283-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c682182163283-2">2</div>
<div class="crayon-num" data-line="crayon-5746050e8c682182163283-3">3</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e8c682182163283-1" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">zone</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e8c682182163283-2" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">base64Image</span> <span class="crayon-o">=</span> <span class="crayon-s">“data:image/jpeg;base64,”</span> <span class="crayon-o">+</span> <span class="crayon-v">imageData</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e8c682182163283-3" class="crayon-line"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>This is how we are force refreshing the <code>base64Image</code> variable that is bound to the UI.  If we don’t do this, the UI will still contain the placeholder image even after we’ve taken a picture.</p>
<p>The logic at this point is done.</p>
<h2>Designing the Ionic 2 UI</h2>
<p>With the logic out of the way, let’s cook up a simple UI.  Essentially we’re only going to have a placeholder image and navigation button on the screen.  Open the project’s <strong>app/pages/home/home.html</strong> file and include the following code:</p>
<div id="crayon-5746050e8c68c804903817" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/pages/home/home.html</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">XHTML</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e8c68c804903817-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c68c804903817-2">2</div>
<div class="crayon-num" data-line="crayon-5746050e8c68c804903817-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c68c804903817-4">4</div>
<div class="crayon-num" data-line="crayon-5746050e8c68c804903817-5">5</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c68c804903817-6">6</div>
<div class="crayon-num" data-line="crayon-5746050e8c68c804903817-7">7</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c68c804903817-8">8</div>
<div class="crayon-num" data-line="crayon-5746050e8c68c804903817-9">9</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c68c804903817-10">10</div>
<div class="crayon-num" data-line="crayon-5746050e8c68c804903817-11">11</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c68c804903817-12">12</div>
<div class="crayon-num" data-line="crayon-5746050e8c68c804903817-13">13</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e8c68c804903817-14">14</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e8c68c804903817-1" class="crayon-line"><span class="crayon-r"><ion-navbar</span> <span class="crayon-o">*</span>navbar<span class="crayon-r">></span></div>
<div id="crayon-5746050e8c68c804903817-2" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"><ion-title></span></div>
<div id="crayon-5746050e8c68c804903817-3" class="crayon-line"><span class="crayon-i">        Home</span></div>
<div id="crayon-5746050e8c68c804903817-4" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"></ion-title></span></div>
<div id="crayon-5746050e8c68c804903817-5" class="crayon-line"><span class="crayon-i">    </span><span class="crayon-r"><ion-buttons</span> end<span class="crayon-r">></span></div>
<div id="crayon-5746050e8c68c804903817-6" class="crayon-line crayon-striped-line"><span class="crayon-i">        </span><span class="crayon-r"><button</span> <span class="crayon-sy">(</span>click<span class="crayon-sy">)</span><span class="crayon-o">=</span><span class="crayon-s">“takePicture()”</span><span class="crayon-r">></span></div>
<div id="crayon-5746050e8c68c804903817-7" class="crayon-line"><span class="crayon-i">            </span><span class="crayon-r"><ion-icon</span> <span class="crayon-e">name</span><span class="crayon-o">=</span><span class="crayon-s">“camera”</span><span class="crayon-r">></span><span class="crayon-r"></ion-icon></span></div>
<div id="crayon-5746050e8c68c804903817-8" class="crayon-line crayon-striped-line"><span class="crayon-i">        </span><span class="crayon-r"></button></span></div>
<div id="crayon-5746050e8c68c804903817-9" class="crayon-line"><span class="crayon-i">    </span><span class="crayon-r"></ion-buttons></span></div>
<div id="crayon-5746050e8c68c804903817-10" class="crayon-line crayon-striped-line"><span class="crayon-r"></ion-navbar></span></div>
<div id="crayon-5746050e8c68c804903817-11" class="crayon-line"></div>
<div id="crayon-5746050e8c68c804903817-12" class="crayon-line crayon-striped-line"><span class="crayon-r"><ion-content</span> <span class="crayon-e">class</span><span class="crayon-o">=</span><span class="crayon-s">“home”</span><span class="crayon-r">></span></div>
<div id="crayon-5746050e8c68c804903817-13" class="crayon-line"><span class="crayon-i">    </span><span class="crayon-r"><img</span> <span class="crayon-e">src</span><span class="crayon-o">=</span><span class="crayon-s">“”</span> <span class="crayon-r">/></span></div>
<div id="crayon-5746050e8c68c804903817-14" class="crayon-line crayon-striped-line"><span class="crayon-r"></ion-content></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>The navigation button will be of a camera and appear on the right side.  The placeholder image will exist until a camera photo is taken.</p>
<p>This application will probably not work in an iOS simulator or web browser.  iOS simulators have issues when it comes to the device camera, and since this uses native platform code, the web browser won’t understand it.</p>
<div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
<h3>Share This:</h3>
<ul class="huge-it-share-buttons-list">
<li class=" nobackground"><a href="http://bit.ly/1XReO0c" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1XReO0c','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Use%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Use The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1sQrZoR%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1sQrZoR The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1XReO0d" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1XReO0d','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1qK4g7R%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App&mini=true&url=http://bit.ly/1XReO0g" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1qK4g7R The Device Camera In An Ionic 2 Android And iOS App&mini=true&url=http://bit.ly/1XReO0g','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1sQrw6a%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1sQrw6a The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://di.gg/1qK4ax3%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://di.gg/1qK4ax3 The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://stumble.it/1sQrH1g%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://stumble.it/1sQrH1g The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1XReO0l" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1XReO0l','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1qK4zQ9%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1qK4zQ9 The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQryuL%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1sQryuL The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1VNpzTU" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1VNpzTU','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1qK4Cvj%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1qK4Cvj The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1VNpzTX" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1VNpzTX','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQrJpZ%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1sQrJpZ The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1qK4P1o%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App&pic=&ralateUid=&" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1qK4P1o The Device Camera In An Ionic 2 Android And iOS App&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQrRG0%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1sQrRG0 The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1qK4dsJ%20The%20Device%20Camera%20In%20An%20Ionic%202%20Android%20And%20iOS%20App" id="backforunical720" name="backforunical720" onclick="javascript:void window.open('http://bit.ly/1qK4dsJ The Device Camera In An Ionic 2 Android And iOS App','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px" target="_blank"></a></li>
</ul>
<div class="clear"></div>
</div>
View more at: <a href="http://bit.ly/1XReQFr">http://bit.ly/1XReQFr</a>

Use The Device Camera In An Ionic 2 Android And iOS App

As I continue to port my Ionic Framework tutorials to Ionic 2, I figured it was time to discuss how to make use of the device camera within...

Use The Device Camera In An Ionic 2 Android And iOS App

Contact Form