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
 
edwin_r_c profile image
Edwin Ramirez

That was really cool. Congrats.

Collapse
 
s3artis profile image
Matt Weingaertner

Amazing 😱

Collapse
 
2279silent profile image
Burgess

Looks pretty easy.I wanna try it

Collapse
 
jdorfman profile image
Justin Dorfman

This is remarkable. Amazing demo.

Collapse
 
risyandi profile image
Risyandi

Awesome, thanks for share alexandra

Collapse
 
halton profile image
Halton Huo

Really cool stuff

Collapse
 
gautamkrishnar profile image
Gautam Krishna R

Liked it...

Collapse
 
redochka profile image
reda

Excellent demo. Thanks

Collapse
 
caseyreeddev profile image
Casey Reed

Awesome project! Thanks for sharing

Collapse
 
pandageneration_16 profile image
Doan-Bao-Nguyen

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

-Bao

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 :)

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