Hello, it’s possible use wikitude or metaio with ionic to develop an augmented reality app?
Thanks!!
2 Likes
I guess there is a phonegap/cordova sdk available
http://www.wikitude.com/products/extensions/phonegap-plugin-augmented-reality/
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?
Thanks!
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
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.
2 Likes
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.
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
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 
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.
<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!
4 Likes
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
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
-Charles