Your Smart IOT

<p>Most smart phones on the market have at least one camera if not two.  You may want to leverage these cameras to make the next Instagram or SnapChat type application.  Lucky for us, the native Android and iOS camera can be easily accessed using <a href="http://bit.ly/1sQrjjm" target="_blank" title="IonicFramework">Ionic Framework</a> and the AngularJS extension set, ngCordova.</p>
<p>The following will help you add camera functionality into your latest creation.</p>
<p>Let’s start by creating a new Ionic project with the Android and iOS platforms:</p>
<div id="crayon-5745fc96182aa196990125" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" touchscreen minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Create Android and iOS <a href="http://bit.ly/1sQrwD3" itemprop="url" target="_bank" title="Ionic Framework"><strong>Ionic Framework</strong></a> 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-5745fc96182aa196990125-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182aa196990125-2">2</div>
<div class="crayon-num" data-line="crayon-5745fc96182aa196990125-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182aa196990125-4">4</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5745fc96182aa196990125-1" class="crayon-line"><span class="crayon-e">ionic</span> <span class="crayon-e">start</span> <span class="crayon-e">IonicProject</span> <span class="crayon-e">blank</span></div>
<div id="crayon-5745fc96182aa196990125-2" class="crayon-line crayon-striped-line"><span class="crayon-r">cd</span> <span class="crayon-e">IonicProject</span></div>
<div id="crayon-5745fc96182aa196990125-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">android</span></div>
<div id="crayon-5745fc96182aa196990125-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">ios</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>Remember that you must be using a Mac if you wish to build for iOS.</p>
<p>The next thing we want to do is add the <a href="http://bit.ly/1sQrvyZ" target="_blank" title="Apache Cordova Camera Plugin">Apache Cordova camera plugin</a>.  This can be done by running the following:</p>
<div id="crayon-5745fc96182bc378710900" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" touchscreen 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-5745fc96182bc378710900-1">1</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5745fc96182bc378710900-1" class="crayon-line"><span class="crayon-e">cordova</span> <span class="crayon-e">plugin</span> <span class="crayon-e">add</span> <span class="crayon-v">org</span><span class="crayon-e">.apache</span><span class="crayon-e">.cordova</span><span class="crayon-e">.camera</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>For this tutorial we are going to be using the AngularJS extension set for Apache Cordova called <a href="http://bit.ly/1qK4HPq" target="_blank" title="ngCordova">ngCordova</a>.  Start by downloading the <a href="http://bit.ly/1sQs0sV" target="_blank" title="ngCordova Latest Release">latest release</a> of ngCordova and placing the <strong>ng-cordova.min.js</strong> file in your project’s <strong>www/js</strong> directory.</p>
<p>Next we need to include this file in our project’s code.  Open the <strong>index.html</strong> file and include the script before the <strong>cordova.js</strong> line like below:</p>
<div id="crayon-5745fc96182c3467359058" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" touchscreen minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">index.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-5745fc96182c3467359058-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182c3467359058-2">2</div>
<div class="crayon-num" data-line="crayon-5745fc96182c3467359058-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182c3467359058-4">4</div>
<div class="crayon-num" data-line="crayon-5745fc96182c3467359058-5">5</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182c3467359058-6">6</div>
<div class="crayon-num" data-line="crayon-5745fc96182c3467359058-7">7</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182c3467359058-8">8</div>
<div class="crayon-num crayon-marked-num crayon-top" data-line="crayon-5745fc96182c3467359058-9">9</div>
<div class="crayon-num crayon-marked-num crayon-bottom crayon-striped-num" data-line="crayon-5745fc96182c3467359058-10">10</div>
<div class="crayon-num" data-line="crayon-5745fc96182c3467359058-11">11</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182c3467359058-12">12</div>
<div class="crayon-num" data-line="crayon-5745fc96182c3467359058-13">13</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5745fc96182c3467359058-1" class="crayon-line"><span class="crayon-r"><html></span></div>
<div id="crayon-5745fc96182c3467359058-2" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"><head></span></div>
<div id="crayon-5745fc96182c3467359058-3" class="crayon-line"><span class="crayon-i">        </span><span class="crayon-r"><meta</span> <span class="crayon-e">charset</span><span class="crayon-o">=</span><span class="crayon-s">“utf-8”</span><span class="crayon-r">></span></div>
<div id="crayon-5745fc96182c3467359058-4" class="crayon-line crayon-striped-line"><span class="crayon-i">        </span><span class="crayon-r"><meta</span> <span class="crayon-e">name</span><span class="crayon-o">=</span><span class="crayon-s">“viewport”</span> <span class="crayon-e">content</span><span class="crayon-o">=</span><span class="crayon-s">“initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”</span><span class="crayon-r">></span></div>
<div id="crayon-5745fc96182c3467359058-5" class="crayon-line"><span class="crayon-i">        </span><span class="crayon-r"><title></span><span class="crayon-r"></title></span></div>
<div id="crayon-5745fc96182c3467359058-6" class="crayon-line crayon-striped-line"><span class="crayon-i">        </span><span class="crayon-r"><link</span> <span class="crayon-e">href</span><span class="crayon-o">=</span><span class="crayon-s">“lib/ionic/css/ionic.css”</span> <span class="crayon-e">rel</span><span class="crayon-o">=</span><span class="crayon-s">“stylesheet”</span><span class="crayon-r">></span></div>
<div id="crayon-5745fc96182c3467359058-7" class="crayon-line"><span class="crayon-i">        </span><span class="crayon-r"><link</span> <span class="crayon-e">href</span><span class="crayon-o">=</span><span class="crayon-s">“css/style.css”</span> <span class="crayon-e">rel</span><span class="crayon-o">=</span><span class="crayon-s">“stylesheet”</span><span class="crayon-r">></span></div>
<div id="crayon-5745fc96182c3467359058-8" class="crayon-line crayon-striped-line"><span class="crayon-i">        <span class="crayon-ta"><script</span> <span class="crayon-e">src</span><span class="crayon-o">=</span><span class="crayon-s">“lib/ionic/js/ionic.bundle.js”</span><span class="crayon-o">></span><span class="crayon-ta"></script></span></span></div>
<div id="crayon-5745fc96182c3467359058-9" class="crayon-line crayon-marked-line crayon-top"><span class="crayon-i">        <span class="crayon-ta"><script</span> <span class="crayon-e">src</span><span class="crayon-o">=</span><span class="crayon-s">“js/ng-cordova.min.js”</span><span class="crayon-o">></span><span class="crayon-ta"></script></span></span></div>
<div id="crayon-5745fc96182c3467359058-10" class="crayon-line crayon-marked-line crayon-bottom crayon-striped-line"><span class="crayon-i">        <span class="crayon-ta"><script</span> <span class="crayon-e">src</span><span class="crayon-o">=</span><span class="crayon-s">“cordova.js”</span><span class="crayon-o">></span><span class="crayon-ta"></script></span></span></div>
<div id="crayon-5745fc96182c3467359058-11" class="crayon-line"><span class="crayon-i">        <span class="crayon-ta"><script</span> <span class="crayon-e">src</span><span class="crayon-o">=</span><span class="crayon-s">“js/app.js”</span><span class="crayon-o">></span><span class="crayon-ta"></script></span></span></div>
<div id="crayon-5745fc96182c3467359058-12" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"></head></span></div>
<div id="crayon-5745fc96182c3467359058-13" class="crayon-line"><span class="crayon-i">    </span><span class="crayon-r"><body</span> <span class="crayon-e">ng-app</span><span class="crayon-o">=</span><span class="crayon-s">“starter”</span><span class="crayon-r">></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>This will include the library into our project, but now we need to include it for use in AngularJS.  Open your <strong>app.js</strong> file and alter the <strong>angular.module</strong> line to look like the following:</p>
<div id="crayon-5745fc96182ca514840679" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" touchscreen minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app.js</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-5745fc96182ca514840679-1">1</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5745fc96182ca514840679-1" class="crayon-line"><span class="crayon-v">angular</span><span class="crayon-sy">.</span><span class="crayon-e">module</span><span class="crayon-sy">(</span><span class="crayon-s">‘starter’</span><span class="crayon-sy">,</span> <span class="crayon-sy">[</span><span class="crayon-s">‘ionic’</span><span class="crayon-sy">,</span> <span class="crayon-s">‘ngCordova’</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>Now we’re ready for the fun stuff.  Inside your <strong>app.js</strong> file, we need to add a controller with a method that will launch the camera.  The following was copied almost exactly from the ngCordova documentation:</p>
<div id="crayon-5745fc96182d0746193978" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" touchscreen minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app.js</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-5745fc96182d0746193978-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-2">2</div>
<div class="crayon-num" data-line="crayon-5745fc96182d0746193978-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-4">4</div>
<div class="crayon-num" data-line="crayon-5745fc96182d0746193978-5">5</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-6">6</div>
<div class="crayon-num" data-line="crayon-5745fc96182d0746193978-7">7</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-8">8</div>
<div class="crayon-num" data-line="crayon-5745fc96182d0746193978-9">9</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-10">10</div>
<div class="crayon-num" data-line="crayon-5745fc96182d0746193978-11">11</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-12">12</div>
<div class="crayon-num" data-line="crayon-5745fc96182d0746193978-13">13</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-14">14</div>
<div class="crayon-num" data-line="crayon-5745fc96182d0746193978-15">15</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-16">16</div>
<div class="crayon-num crayon-marked-num crayon-top crayon-bottom" data-line="crayon-5745fc96182d0746193978-17">17</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-18">18</div>
<div class="crayon-num" data-line="crayon-5745fc96182d0746193978-19">19</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-20">20</div>
<div class="crayon-num" data-line="crayon-5745fc96182d0746193978-21">21</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d0746193978-22">22</div>
<div class="crayon-num" data-line="crayon-5745fc96182d0746193978-23">23</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5745fc96182d0746193978-1" class="crayon-line"><span class="crayon-v">exampleApp</span><span class="crayon-sy">.</span><span class="crayon-e">controller</span><span class="crayon-sy">(</span><span class="crayon-s">“ExampleController”</span><span class="crayon-sy">,</span> <span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-v">scope</span><span class="crayon-sy">,</span> <span class="crayon-sy">$</span><span class="crayon-v">cordovaCamera</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5745fc96182d0746193978-2" class="crayon-line crayon-striped-line"></div>
<div id="crayon-5745fc96182d0746193978-3" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-sy">$</span><span class="crayon-v">scope</span><span class="crayon-sy">.</span><span class="crayon-v">takePicture</span> <span class="crayon-o">=</span> <span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5745fc96182d0746193978-4" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-t">var</span> <span class="crayon-v">options</span> <span class="crayon-o">=</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5745fc96182d0746193978-5" class="crayon-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-5745fc96182d0746193978-6" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">destinationType</span> <span class="crayon-o">:</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-5745fc96182d0746193978-7" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">sourceType</span> <span class="crayon-o">:</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-5745fc96182d0746193978-8" class="crayon-line crayon-striped-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-5745fc96182d0746193978-9" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">encodingType</span><span class="crayon-o">:</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-5745fc96182d0746193978-10" class="crayon-line crayon-striped-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-5745fc96182d0746193978-11" class="crayon-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-5745fc96182d0746193978-12" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">popoverOptions</span><span class="crayon-o">:</span> <span class="crayon-v">CameraPopoverOptions</span><span class="crayon-sy">,</span></div>
<div id="crayon-5745fc96182d0746193978-13" 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-5745fc96182d0746193978-14" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div>
<div id="crayon-5745fc96182d0746193978-15" class="crayon-line"></div>
<div id="crayon-5745fc96182d0746193978-16" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">$</span><span class="crayon-v">cordovaCamera</span><span class="crayon-sy">.</span><span class="crayon-e">getPicture</span><span class="crayon-sy">(</span><span class="crayon-v">options</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-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">imageData</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5745fc96182d0746193978-17" class="crayon-line crayon-marked-line crayon-top crayon-bottom"><span class="crayon-h">            </span><span class="crayon-sy">$</span><span class="crayon-v">scope</span><span class="crayon-sy">.</span><span class="crayon-e">imgURI</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-5745fc96182d0746193978-18" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span> <span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">err</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5745fc96182d0746193978-19" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-c">// An error occured. Show a message to the user</span></div>
<div id="crayon-5745fc96182d0746193978-20" 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-5745fc96182d0746193978-21" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-sy">}</span></div>
<div id="crayon-5745fc96182d0746193978-22" class="crayon-line crayon-striped-line"></div>
<div id="crayon-5745fc96182d0746193978-23" 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>Notice on line 17, I added a bunch of other data to my scope.  Because our destination type is <strong>DATA_URL</strong>we will be returning raw camera data rather than a file.  By adding <strong>data:image/jpeg;base64</strong> we can use an HTML img tag to display our freshly created snapshot.</p>
<div id="crayon-5745fc96182d6274681847" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" touchscreen minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">index.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-5745fc96182d6274681847-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d6274681847-2">2</div>
<div class="crayon-num" data-line="crayon-5745fc96182d6274681847-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5745fc96182d6274681847-4">4</div>
<div class="crayon-num" data-line="crayon-5745fc96182d6274681847-5">5</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5745fc96182d6274681847-1" class="crayon-line"><span class="crayon-r"><ion-content</span> <span class="crayon-e">ng-controller</span><span class="crayon-o">=</span><span class="crayon-s">“ExampleController”</span><span class="crayon-r">></span></div>
<div id="crayon-5745fc96182d6274681847-2" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"><img</span> <span class="crayon-e">ng-show</span><span class="crayon-o">=</span><span class="crayon-s">“imgURI !== undefined”</span> <span class="crayon-e">ng-src</span><span class="crayon-o">=</span><span class="crayon-s">“”</span><span class="crayon-r">></span></div>
<div id="crayon-5745fc96182d6274681847-3" class="crayon-line"><span class="crayon-i">    </span><span class="crayon-r"><img</span> <span class="crayon-e">ng-show</span><span class="crayon-o">=</span><span class="crayon-s">“imgURI === undefined”</span> <span class="crayon-e">ng-src</span><span class="crayon-o">=</span><span class="crayon-s">“http://bit.ly/1qK4KuA;</span><span class="crayon-r">></span></div>
<div id="crayon-5745fc96182d6274681847-4" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"><button</span> <span class="crayon-e">class</span><span class="crayon-o">=</span><span class="crayon-s">“button”</span> <span class="crayon-e">ng-click</span><span class="crayon-o">=</span><span class="crayon-s">“takePicture()”</span><span class="crayon-r">></span><span class="crayon-i">Take Picture</span><span class="crayon-r"></button></span></div>
<div id="crayon-5745fc96182d6274681847-5" class="crayon-line"><span class="crayon-r"></ion-content></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>Just like that, you can call <strong>takePicture()</strong> from your UI and initialize the native Android and iOS camera in Ionic Framework.</p>
<p>A video version of this article can be seen below.</p>
<p><iframe width="678" height="381" src="https://www.youtube.com/embed/hDWxfpLIIvo?feature=oembed" frameborder="0" allowfullscreen=""></iframe></p>
<p> </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="backforunical722" name="backforunical722" 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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Use The Android And iOS Camera With Ionic Framework','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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://bit.ly/1sQrZoR The Android And iOS Camera With Ionic Framework','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="backforunical722" name="backforunical722" 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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework&mini=true&url=http://bit.ly/1XReO0g" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://bit.ly/1qK4g7R The Android And iOS Camera With Ionic Framework&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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://bit.ly/1sQrw6a The Android And iOS Camera With Ionic Framework','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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://di.gg/1qK4ax3 The Android And iOS Camera With Ionic Framework','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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://stumble.it/1sQrH1g The Android And iOS Camera With Ionic Framework','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="backforunical722" name="backforunical722" 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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://bit.ly/1qK4zQ9 The Android And iOS Camera With Ionic Framework','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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://bit.ly/1sQryuL The Android And iOS Camera With Ionic Framework','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="backforunical722" name="backforunical722" 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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://bit.ly/1qK4Cvj The Android And iOS Camera With Ionic Framework','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="backforunical722" name="backforunical722" 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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://bit.ly/1sQrJpZ The Android And iOS Camera With Ionic Framework','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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework&pic=&ralateUid=&" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://bit.ly/1qK4P1o The Android And iOS Camera With Ionic Framework&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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://bit.ly/1sQrRG0 The Android And iOS Camera With Ionic Framework','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%20Android%20And%20iOS%20Camera%20With%20Ionic%20Framework" id="backforunical722" name="backforunical722" onclick="javascript:void window.open('http://bit.ly/1qK4dsJ The Android And iOS Camera With Ionic Framework','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 Android And iOS Camera With Ionic Framework

Most smart phones on the market have at least one camera if not two. You may want to leverage these cameras to make the next Instagram or S...

Use The Android And iOS Camera With Ionic Framework

Contact Form