Augmented reality with ionic possible?


#1

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

Thanks!!


#2

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


#3

Did you find a solution?


#4

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

Thanks!


#5

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.

Thanks


#6

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


#7

I’m looking the same.


#8

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


#10

Someone made any progress?


#11

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.


#12

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


#13

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

hopefully it works.

edit:

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


#14

Has anyone found a solution for this?


#15

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.


#16

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:


#17

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!


#18

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.

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

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

var i = 0;

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

                        // Create a projection and bind it to the POI
                        awe.projections.add({ 
                            id:'test_projection', 
                            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
                        awe.events.add([{
                            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
                                        awe.pois.update({
                                            data: {
                                                visible: true,
                                                position: { x:0, y:0, z:0 },
                                                rotation: { x: i },
                                                matrix: event.detail['64'].transform
                                            },
                                            where: {
                                                id: 'poi_1'
                                            }
                                        });

                                        awe.projection.update({
                                            date: {
                                                rotation: { x: 180 }
                                            },
                                            where: { id:'test_projection'}
                                        });
                                    }
                                    else {
                                        // If a different marker of the marker is gone remove the projection 
                                        awe.pois.update({
                                            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!


#19

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: https://itunes.apple.com/us/app/jefferson-institute/id1030783510?mt=8


#20

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


#21

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
-Charles