Implementing AR into Cordova App pt.1

Happy new years y’all! Hope we stick to our resolutions like we stick to searching for the right netflix show to watch. We can do it!

My internship has tasked me with a pretty hefty project and if you can’t tell from the headline there I am tasked with adding AR to our iOS app that has just been put on the Apple App Store. I have a feeling that our next patch will feature my implementation of AR. Generally I will be adding a feature that allows you to see the track you ran when you pull up your camera.

I am testing our ezar tech which has a cordova plugin that should be simple to add to our current app but that has been a pain since the plugin hasn’t had too much traction yet so the community support is a little lacking. I’ve learned that you should always find technology that is up to date and has good community support. But through all the pains I was able to add the plugin to a test ionic app and get the video overlay to come up.

First of all I had to add a plugin to a test ionic/cordova application before adding it to my internships app. Ionic is a library for building native applications, it uses html, css, and angular to build your native app. Cordova is very similar other than it uses html, css, and javascript. From google, ionic is a library built on top of cordova with AngularJS. I tried adding the ezar tech plugin like any other plugin using

cordova plugin add name_of_plugin

However I was getting errors like failed to fetch plugin or plugin needs a valid package.json. The google sifting began, I looked up the error everywhere from ionic community forums, SO, github issues, I felt like I hit a wall. Took a break(this is always good to step away from your code and come back to it with a fresh mind -it really helps) And went through the documentation again, I found out I was adding the plugin by it’s URL as opposed to the plugins actually local name. The ezar tech URL’s were not set up by the developer yet, so you cannot add plugins by URL you had to install them locally to work. I finally added the plugins a went back to the docs to start the video overlay which should be the start of AR, I had a hard time finding out where to add the use case code in this test ionic application. Another route I thought of was using the ezar tech’s own github repo to test out the app myself. I forked the ezar tech repo added the plugin and ran:

ionic platform add ios

ionic build ios

ionic serve

This pulled up something that looked like:

Screen Shot 2018-01-01 at 3.45.19 PM.png

This is a camera overlay on my laptop! I got it working, hooray! The only thing is the camera won’t work like intended since it is supposed to be a device like a iphone or android phone. Which leads me to my next attempt and blog post which is testing AR on my current iphone.

Many bugs and errors in the next episode…


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s