DEV Community

Cover image for Augmented Reality in 10 Lines of HTML

Augmented Reality in 10 Lines of HTML

Alexandra Etienne on April 10, 2017

Collapse
 
maibarra profile image
Marco Ibarra •

This is the kind of project that really brings together Imagination and Engineering at their best ✨

Awesome demo, great execution, good quality 👌

I am really looking forward to play around with these demos 😃

Congratulations!

Collapse
 
jsalvador profile image
Juanjo Salvador •

Wow, that's awesome!

Collapse
 
henriquemota99 profile image
henriquemota99 •

Is it possible to use my own image instead of Hiro? Like a face with a black border or something?

Collapse
 
andraconnect profile image
Alexandra Etienne •

Hi! Thanks for your interest...this might be able to help artoolkit.org/documentation/doku.p...

Also - if you're running into any difficulties please report them on the github issue and we'll be happy to help github.com/jeromeetienne/AR.js/issues

Collapse
 
cindoc profile image
Cindy Dochstader •

I would like to know this too, please!

Collapse
 
redhendev profile image
Brian New •

This was really helpful, thank you.

P.s. Could anyone help? I've tried loading a different texture, but all I'm getting is a white material (if url is wrong/file not found, then A-frame seems to apply a black material) -- so it looks like the texture file is being found OK, but not being applied.

codepen.io/RedHenDev/pen/MogOXb

I've tried deployment from both Glitch and CodePen, without success.

Any idea how to solve this?

Thanks again!

Collapse
 
halton profile image
Halton Huo •

Really cool stuff

Collapse
 
2279silent profile image
Burgess •

Looks pretty easy.I wanna try it

Collapse
 
redochka profile image
reda •

Excellent demo. Thanks

Collapse
 
risyandi profile image
Risyandi •

Awesome, thanks for share alexandra

Collapse
 
caseyreeddev profile image
Casey Reed •

Awesome project! Thanks for sharing

Collapse
 
jdorfman profile image
Justin Dorfman •

This is remarkable. Amazing demo.

Collapse
 
edwin_r_c profile image
Edwin Ramirez •

That was really cool. Congrats.

Collapse
 
s3artis profile image
Matt Weingaertner •

Amazing 😱

Collapse
 
gautamkrishnar profile image
Gautam Krishna R •

Liked it...

Collapse
 
pandageneration_16 profile image
Doan-Bao-Nguyen •

Hi sorry for my brashness...where is the code?

-Bao

Collapse
 
waihow1981 profile image
waihow •

This is awesome! But I meet an error with message "WebRTC issue! navigator.getUserMedia not present in your browser", how should I solve it?

Collapse
 
andraconnect profile image
Alexandra Etienne •

Hey waihow...make sure that you are not using iOS....also, please report your bug on the github issue and we'll be happy to help github.com/jeromeetienne/AR.js/issues 😀

Collapse
 
markroland profile image
Mark Roland •

I just tried this in Chrome 58 with the hiro.jpg marker printed out on an 8.5 x 11 and nothing happened. I've never worked AR before... am I missing something? Thanks!

Collapse
 
andraconnect profile image
Alexandra Etienne •

Thanks so much for all the kind words and the support guys! We wanted to make AR seem easy-to-learn for everyone 👍

Collapse
 
douglasevaristo profile image
Douglas Evaristo •

Hi :) Were i dev the 3d to put on scene? Unity? Thankyou :)