Augmented reality with ionic possible?

Hello, it’s possible use wikitude or metaio with ionic to develop an augmented reality app?



I guess there is a phonegap/cordova sdk available

No one the ionic team has tried it, so be forewarned, there will most likely be bugs

1 Like

Did you find a solution?

I’m also searching a solution for that. Do you have any updates?


Not that I have found recently (other than paid ones). I was thinking about trying to use one of the camera projects out there then overlaying it on a canvas, but I haven’t had a chance to look into it yet.

Let me know if you do find anything.


So did anyone end up implementing Wikitude with Ionic? I am having hard time doing that.

I’m looking the same.

just start testing it on ionic , doing the same with ezAR

Someone made any progress?

I am actually going to try and build such a thing, I will write a blogpost on my research and progress so far. Will update this thread the moment I get started with writing the first post.

My goal is to have the camera output drawn on a canvas and use ThreeJS to create overlaps based on AR markers.


Really looking forward to that! If you can need a hand, give a pm!

I’m going to try to use ezAR as a backdrop against an existing SVG overlay.

hopefully it works.


hmm. Maybe I can keep this simpler - I’m going to try to make the fill attribute of the SVG be whatever the back camera is seeing with the cordova plugin

Has anyone found a solution for this?

I’ve actually managed to create something using AweJS. It’s not that hard writing a service to manage it all. Might provide some examples later this month.

Also keep in mind the poor performance on some devices when not using XWalk.

1 Like

Hey there BetaBugish, I was wondering if you were able to hook up AweJS marker with ionic. I’ve been trying for a while but can’t seem to get a live camera feed to find the marker. Would you let me know how you did it?

Thanks in advance :slightly_smiling:

I can send you some code, hit me up in a DM. But short story, yes it is very possible!
I’m currently using it for a client, so I can’t put it up on github or anything.

Sorry for the late reply too!

For the people still wondering whatever happened, I got struck with deadlines.
I’m writing a blogpost on the topic since I have some more free time now. The current PoC doesn’t use controllers/services at all, I’m just putting the divs on the main page, including AweJS and my own script.

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        #container {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            overflow: hidden;
    <div id="container"></div>
    <script type="text/javascript" src="js/awe-loader-min.js"></script>
    <script type="text/javascript" src="js/main.js">

The script itself is fairly straightforward too, plain awe-js stuff.

var i = 0;

window.addEventListener('load', function() {
        device_type: awe.AUTO_DETECT_DEVICE_TYPE,
        settings: {
            container_id: 'container',
            default_camera_position: { x:0, y:0, z:0 },
                    id: 'point_light',
                    type: 'point',
                    color: 0xFFFFFF,
        ready: function() {
                    capabilities: ['gum','webgl'],
                    files: [ 
                        [ 'js/awe-standard-dependencies.js', 'js/awe-standard.js'],
                    success: function() { 
                        // Add a point-of-interest
                            position: { x:0, y:0, z:0 },
                            visible: false

                        // Create a projection and bind it to the POI
                            geometry: { shape: 'cube', x:120, y:120, z:1 },
                            material:{ type: 'phong', color: 0xFFFFFF }, 
                            texture: { path: 'demo.webm' },
                        }, { poi_id: 'poi_1' });

                        // Add an event for the marker tracker
                            id: 'ar_tracking_marker',
                            device_types: {
                                pc: 1,
                                android: 1
                            // Things to execute once the tracker has been registered
                            register: function(handler) {
                                window.addEventListener('ar_tracking_marker', handler, false);
                            unregister: function(handler) {
                                window.removeEventListener('ar_tracking_marker', handler, false);
                            // Update callback
                            handler: function(event) {
                                i += 0.5;
                                if (event.detail) {
                                    // Check if its the right marker
                                    if (event.detail['64']) { // we are mapping marker #64 to this projection
                                        // Update the first POI to reflect the matrix of the marker
                                            data: {
                                                visible: true,
                                                position: { x:0, y:0, z:0 },
                                                rotation: { x: i },
                                                matrix: event.detail['64'].transform
                                            where: {
                                                id: 'poi_1'

                                            date: {
                                                rotation: { x: 180 }
                                            where: { id:'test_projection'}
                                    else {
                                        // If a different marker of the marker is gone remove the projection 
                                            data: {
                                                visible: false
                                            where: {
                                                id: 'poi_1'
                                    awe.scene_needs_rendering = 1;
                    capabilities: [],
                    success: function() { 

awe.AUTO_DETECT_DEVICE_TYPE will do all the magic for the getUserMedia API, it automatically selects the rear-facing camera.

This code results in a blank plane being drawn over the marker (64).

As stated before, I’m writing a more detailed walkthrough including the Ionic2 wrapping somewhere next week!


Cool, i managed to create app with Wikitude and Ionic but i couldn’t make it work inside Cordova, so Wikitude is basically a separate page that can’t use any of Cordova features.
You can check app on store:

1 Like

Looks great, but I can’t get this to work unfortunately. Do you maybe have a tutorial or full code for Ionic v1?

Hey BetaBugish this is right up my alley. WOuld i be able to replace the fles with an h264 alpha channel i really just want to try and put a video over a live recording like a green scree effect. Let me know what you think not able to find an answer anywhere