ARjs Location Based & Marker Based - ARjs Studio | WebAR (En Captions)

En este video hablaremos sobre cómo generar tus primeros ejemplos de webAR con la librería ARJS. Comenzaremos explicando sobre ARjs Location based que permite generar experiencias de realidad aumentada en una zona específica; luego explicaremos sobre ARjs Marker based, el proceso más conocido de realidad aumentada. Todo esto lo generaremos con ARJS Studio.
//
In this video we will talk about how to generate your first webAR examples with the ARJS library. We will start by explaining about ARjs Location based that allows us to generate augmented reality experiences in a specific area (GPS); Then we will explain about ARjs Marker based, the best known augmented reality process. We will generate all this with ARJS Studio.
ARjs es una de las plataformas más usadas de WebAR que es 100% open source.
Apóyame:
🔥 Patreon: / emiliusvgs
🔥 Dona Paypal: www.paypal.me/...
Redes Sociales:
✅ Te gustó este video? Subscríbete bit.ly/2RQLlGM
✅ También puedes seguirme en twitter! / emiliusvgs
✅ Únete a mi comunidad de Realidad Extendida! / emiliusvgs.web
✅ Conoce mi web y aprende más de este mundo XR emiliusvgs.com
Mi VR / AR software y hardware:
⚡ Insta 360 One X
⚡ Samsung A8 que permite utilizar ARCore
⚡ Iphone 8 para utilizar ARkit y AR Quick Look
⚡ Oculus Quest
⚡ Aryzon
⚡ Zapbox
⚡ Merge Cube
#ARJS #AFRAME #AugmentedReality

[@emiliusvgs]

Download the files and support me -> www.patreon.com/emiliusvgs Más información -> emiliusvgs.com/arjs-studio-location-marker-tutorial/

[@spybooth1235]

Excelente!!!! ArJs ha ido actualizando, intentaré utilizarlo denuevo. Me gusta más de esta manera por qué no hay necesidad de utilizar ninguna aplicación; solo la cámara de tu celular . Gracias por el tutorial ; éxitos !!!!

[@emiliusvgs]

Así es! ARjs tiene una mayor capacidad de difusión. Gracias por tu mensaje!

[@ronby0405]

gracias Crack te amo, acabas de salvar mi proyecto de semestre :') sigue adelante. Saludos desde Ecuador

[@emiliusvgs]

jaja de nada! espero que te haya ido bien

Excelente video de verdad, muy bien explicado y práctico. Gracias.

[@emiliusvgs]

hola! muchas gracias. Estaré sacando más temas de ARjs :)

[@ashmichael5679]

love your videos would love to see you create an app with filter

[@WalrusesAreTheOne]

Why is it not possible to upload multiple models on the studio? That makes no sense. I have a scene consisting of several models. I can only upload one.

[@sofc223]

Me ayudarías? En mi celular si visualiza el proyecto pero cuando lo intento ver en el navegador de la tablet que tengo me dice que cambie la versión de móvil y que recargue la página.. No encuentro soluciones.. O es que solo funciona en celulares y no en tablets?

[@Michael-b7z8y]

muy bien explicado

[@emiliusvgs]

gracias!!

[@miguelretamero2853]

Muy buenas! muchas gracias por el tutorial. Son todos estupendos! tengo una duda. Es posible hacerlo con más de un marker? quiero decir, que una vez entras en la página web, se pueda enfocar a distintos markers y que cada uno esté asociado a un objeto 3d distinto. He visto algunos ejemplos en la web pero ninguno explica cómo. Quedo atento a tu respuesta. Un saludo desde España!

[@shouxiliu9218]

Can I run this on Iphone?

[@nicolaslockheimers]

Your videos are amazing, THANK YOU!

[@emiliusvgs]

thank you!

[@mrdxiong]

You've stated that the experience trembles due to low lighting. Have you played around with that to fix the trembles?

[@emiliusvgs]

Hi! Basically it is to have good lighting of your environment (room, office).

[@gsasiambarrena]

Hola hola!, te consulto: ¿ porque al momento de exportar el proyecto no tengo acceso a los dos links, publicar en github o bien descargarlo en mi pc? figuran en pantalla en gris, y no tiene enlace. Gracias.!

[@emiliusvgs]

hola! debe aparecer un link para exportarlo si o si. Trata de practicar vía glitch.com para lanzar la experiencia de prueba

[@carlosdanielbenitez7358]

tambien tengo el mismo poblema no deja descargar los archivos

[@matiascarrisi549]

A mi me pasa igual y noté que si pongo la ubicación en cualquier lugar del hemisferio norte si me deja, si pongo algun lugar en el mapa del hemisferio sur se desabilita la opcion para publicar o descargar, yo vivo en Argentina asi que no pudo hacerlo

[@Ivan-eg5cp]

hola bro.!! estoy empezando a aprender sobre esto de la RA quiero hacer una business card, con ar.js y a-frame... pero me es un lio hacerle botones y lo del cursor y esas cosas. tendras tu algun tuto o algo que me recomiendes? muuchas gracias y buenos videos

[@emiliusvgs]

hola! es complejo trabajar con arjs para estos temas. Te recomiendo Mind AR hiukim.github.io/mind-ar-js-doc/ | Tengo un tuto kzbin.info/www/bejne/jJXKZKeQd5pmntk

[@jimmytellezsandoval200]

Hola acabo de probar el arjs video marker pero no me reproduce nada cuando pongo la cámara sobre el marcador, me podrías decir que puede ser? Muchas gracias!

[@emiliusvgs]

hola! posiblmente puede ser un tema de actualización, en realidad puede ser varios factores. Tienes algún mensaje de la consola o de error?

[@jimmytellezsandoval200]

@@emiliusvgs no me da ningún error, incluso me descargue los projectos de ar.js studio de la pagina oficial pero cuando pongo la cámara sobre el marcador no me aparece nada.

[@jimmytellezsandoval200]

@@emiliusvgs Ya lo resolví el problema es que necesitamos alojar nuestros archivos en un servidor web o en Wampserver en lugar de intentar ejecutarlos directamente desde el sistema de archivos local, para evitar problemas con la política de seguridad de mismo origen, conocida como CORS. Esta política restringe la carga de recursos desde diferentes orígenes en los navegadores por razones de seguridad. Al utilizar un servidor, nos aseguramos de que todos los recursos se carguen de manera adecuada y eficiente, ya que estarán hospedados en un único origen, eliminando así los problemas de CORS.

[@emiliusvgs]

@@jimmytellezsandoval200 es cierto! para esos casos suelo utilizar Glitch.com para hacer los prototipos

[@martinc2772]

Hasta el momento tengo la duda si la imagen aparece en las coordenadas que le das o la imagen se activa cuando te ubicas con el celular en esas coordenadas

[@emiliusvgs]

Yo creería que es un poco de ambos. El objeto debe aparecer en las coordenadas pero se activa si estoy cerca. Debe existir cierto rango

[@Salem01]

Hello, First thank you for the tutorial I'm just getting into AR and it was a great start. I'm facing an issue with loading the video AR on the phone, it just shows me a black square above the marker when I target the camera at it. On the browser it works perfectly fine. If you have any hints or ideas as to whats causing the issue it would be much appreciated. (permissions for camera are working fine on the phone).

[@hernandezperezdavid1222]

Hola me interesó ¿¿¿¿Cómo puedo hacer la segunda animación con un marcado pero offline sin necesidad de conectarme a internet y solo una app como Instagram????

[@emiliusvgs]

hola, quizá puedes trabajar en localhost o en todo caso como mobile AR. WebAR requiere conectarse a internet

[@BartBurkhardt]

También probé este ejemplo de ar.js basado en la ubicación. Y funcionó, pero para ser honesto, es bastante inútil ya que no tiene ningún seguimiento SLAM para poder investigar y mirar alrededor del objeto. La combinación sería muy interesante, pero solo usar GPS y poner algo superpuesto en la cámara no es lo que considero AR.

[@emiliusvgs]

si! falta la actualización que permita seguir progresando. Es una librería que no ha tenido actualizaciones potentes en los últimos años

[@alepereira5627]

parabens pelo video !!! só tenho que agradecer me ajudou muito ,parabéns !!

[@emiliusvgs]

Muito obrigado pela sua mensagem! :)

[@julianpch]

genial!!!

[@emiliusvgs]

gracias Julian por estar pendiente de mi contenido :)

[@sofc223]

Hay forma de poner dos marcadores y dos diseños diferentes???

[@emiliusvgs]

hola! si es posible dependiendo de la herramienta que quieras usar, por ejemplo con spark ar kzbin.info/www/bejne/jIe6cnmHga52raM. En realidad casi todas las plataformas ya ofrecen esta solución de multi target

[@sofc223]

@@emiliusvgs Pero si lo quiero usar en Ar.js, como le hago??

[@sofc223]

@@emiliusvgs Quiero hacer en si un libro de Ra, donde cada marcador aparezca un diseño diferente, y lo quiero hacer en ar.js

[@sofc223]

@@emiliusvgs Si podrías ayudarme con el código en glitch me serviría bastante

[@mabustillo14_]

Muy bueno!! Es posible agregar varios modelos 3D y cambiar de modelo 3D en la pantalla al presionar un boton, todo en un solo link de glitch??

[@emiliusvgs]

Hola! Si es posible pero debes trabajar sobretodo en la lógica con Aframe. Existe bastante información. También investigaré

[@joacodesignuxseo2994]

Es posible interactuar con el elemento 3d para ponerlo sobre diferentes superficies???

[@emiliusvgs]

Hola! se puede hacer via ground plane o también llamado plane tracking, por el momento creo que ARjs no lo soporta

[@javierdiaz6007]

Hola emilius! que linea de codigo se debe poner en ARJS para que pueda el marcador ser leido por IOS

[@emiliusvgs]

Hola! checa algunas directrices y elementos necesarios para cargar vía iOS ar-js-org.github.io/AR.js-Docs/

[@franharbynoguera9808]

Cómo puedo hacer que me reproduzca un vídeo sobre un marcador ntf ?

[@emiliusvgs]

hola! ese es otro código. Posiblemente lo voy a trabajar en un próximo video

[@martinc2772]

hola emilius, es posible en ARjs Location el usuario pueda modificar tamaño y posición del objeto?

[@emiliusvgs]

Hola! creería que sí. He visto que hay capacidad de interacción. Ahora tendrías que probar que tal se ve con ARjs Location. Checa su documentación oficial ar-js-org.github.io/AR.js-Docs/ui-events/

[@angelinelin4771]

I have follow the steps from the video. But I have issue on the location based AR. My phone will open the camera, but the AR is not showing. Do you know what is the possible issue? (I have changeed the image source as well.) Thank you in advance.

[@emiliusvgs]

Hi! what kind of smartphone do you have? Sometimes I have had problems with android

[@gmontesinos]

Gracias, otra pregunta se puede hacer con varias imágenes y un solo link de glitch?

[@emiliusvgs]

Hola! eso es multitarget y posiblemente se pueda. Investigaré

[@gmontesinos]

@@emiliusvgs xvr gracias

[@jesusvaldez446]

Excelente video, te felicito!!! oye solo que tengo un problema al hacer la prueba con un marcador, resulta que se escucha el video, pero no se ve. Primero tuve un problema con el zoom de la cámara que ya lo pude curregir, pero ahora tengo este problema. No se ve el video, pero si se escucha.

[@emiliusvgs]

hola! has probado con otro navegador o smartphone?

[@yogasrinivasreddy504]

Hi @emiliusvgs great video!!! but can you tell me why the package is not working when i try to open it as a normal html file(by clicking on it and opening it in chrome) but only works in the case of deploying it in a live server like glitch or github?

[@emiliusvgs]

Hi! Maybe you need to connect web package to work

[@cuaticito]

Hola man, muy buen video, gracias por compartirlo. Quería hacerte una pregunta, ¿sabes porqué cuándo genero un modelo (en pc) tanto en localhost como en glitch, al presentar el marcador se muestra el modelo, pero no puedo hacerlo girar con el mouse, pero si pongo 'inspeccionar' y mantengo clickeado el mouse si peudo manipularlo, digamos, si puedo girarlo al modelo?. (Espero haberme explicado bien)

[@emiliusvgs]

Hola! posiblemente falte agregar elementos de interaccion. Recuerdo que en la web general hablaban al respecto.

[@angeltonio4432]

Hola una pregunta imagino que te puedes montar una web tuya propia y desde ahi hacer todas tus cosas cierto??...otra cosa es necesario que el movil tiene que tener compatibilidad con ARCore para que funcione esto??..slds

[@emiliusvgs]

hola! así es. Recuerda que tu web debe tener ssl, es decir que comience con HTTPS. Respecto a la compatibilidad de ARcore no es extrictamente necesario. La tecnología webAR va por otro lado, utilizando javascript. Igual es recomendable tener un smartphone de gama media

[@angeltonio4432]

@@emiliusvgs y es obligatorio el ssl???..slds

[@emiliusvgs]

@@angeltonio4432 son elementos de seguridad de las páginas web y ya que utilizas la cámara para activar la AR, Chrome lo pide como requisito en varias experiencias

[@KevinAlvaradoM]

@@angeltonio4432 recontra obligatorio, si no te dará error RTC creo al cargar la página y mostrara nada

[@antonio_morvill]

@@KevinAlvaradoM puedes usar un dominio gratuito que comienza con http, nomas ponle awebo https, igual te carga y te permite abrir la camara, burlas la seguridad

[@zerfertwo]

Great. But, from a user view, we need to install an application to watch the effect, right?

[@MACH_SDQ]

no, only the web link. That´s the idea of AR Js, you do not need to install apps to run the AR

[@zerfertwo]

Marcos Cortes I got it. We need to create a web, with a camera feature, for users can watching the effect. How we can create that web? It’s necessary an specific programming language?

[@MACH_SDQ]

@@zerfertwo you can do it with html, css and js any text editor work well

[@zerfertwo]

Marcos Cortes Perfect! Thank you a lot! 💪

[@emiliusvgs]

hi! Fernando, as Marcos says. You don't need to install an app. WebAR allows working with browsers. It's more massive

[@johangomez148]

hola como hago para agregar varios videos. con un mismo visor

[@emiliusvgs]

Hola! tecnicamente es posible. Voy a desarrollar una serie de videos webAR

[@johangomez148]

@@emiliusvgs hola e conseguido unir varios vídeo...pero a la hora de usar el mismo visor solo me reproduce uno... E intentado buscar la manera de que mientras el marcador no esté visible se pare... Y cuando esté visible se reproduzca .. No tengo muchos conocimientos en programar... Si me podrían ayudar estaría muy bien gracias

[@emiliusvgs]

@@johangomez148 investigaré al respecto!

[@Cryptokashii]

Thank you for this video my friend! lately ar.js is not sending new links or creating repo on github, maybe you know the reason? thank you so much!

[@emiliusvgs]

Hi! thanks for the information. I will check what is going on

[@josevelasco2197]

Excelente este tutorial, ya lo hice pero me aparece Webcam error, alguna sugerencia? Uso Huawei p30, gracias por tu conocimiento!

[@emiliusvgs]

hola! quizá exista una dependencia de seguridad. Has habilitado todas las opciones?

[@josevelasco2197]

@@emiliusvgs lo estaba haciendo en una compu prestada y tenia desconectada la webcam, seria eso?

[@gururh3706]

Se puede sin geolocalización?

[@emiliusvgs]

hola! te refieres como plane tracker? Por el momento no. Checa más info al respecto :) ar-js-org.github.io/AR.js-Docs/

[@TheMetaidea]

Si mas de AR.js

[@emiliusvgs]

de acuerdo! :D

[@homerlopez2016]

Gracias por el tutorial!! tengo una pregunta: he visto que existe diseños 3D animados, como podria generarlos en un image-tracking? tendras el codigo ?

[@emiliusvgs]

hola! existe una modificación en el código, posiblemente pueda hacer algo al respecto

[@dantegarcia5845]

Más haci bro

[@emiliusvgs]

lo tendré en cuenta! gracias! :)

[@himanshu1111shu]

Do u have any solution for multi tracking

[@emiliusvgs]

Hi! not yet! I didn't testing with multitrackers

[@himanshu1111shu]

@@emiliusvgs can u make commercial project

[@pablomoragasalvatierra9605]

Hola emili ! muy buen contenida Saludos desde Chile :D Soy nuevo en esto y quería consultar si con esto es posible marcar una ruta de algun camino en particular Muchas gracias de antemano.

[@emiliusvgs]

hola! sí es posible cambiar la ruta de la URL sin problemas. Tu vas a descargar los archivos y subirlo en el dominio

Buenos días. ¡Muchas gracias por el video!. En Glitch funciona perfectamente, pero a la hora de cargar la url en mi móvil sale Error de la Cámara. ¿Podría ser una problema de compatibilidad?. ¿Qué sistemas operativos mínimos deberían tener los dispositivos móviles para una correcto funcionamiento de la Web-AR?. Gracias de nuevo.

[@emiliusvgs]

hola! posiblemente te falta llamar los códigos necesarios para activar la cámara. Existen requisitos de seguridad sobre todo: la web debe ser https, utilizar chrome por lo general (Si es android)

[@andresv4822]

Muchas gracias por el tutorial muy practico. He tenido problemas porque en algunos celulares funciona y en otros no. Por ejemplo, en mi xiaomi note 10 pro, abre la camara sin problema. En un samsung s20 ultra no carga la camara, dice que hay un error. Leyendo un poco encontré que esto se debe a que no esta accediendo a la camara correcta, pero no supe como resolverlo. Te ha sucedido? sabes como resolverlo?

[@emiliusvgs]

hola! no precisamente con ARjs pero sí con otras experiencias WebAR. Debe existir una opción inicial donde se seleccione la primera cámara. Lo que pasa con Samsung es que por lo general ya utilizan 4 cámaras y eso puede "confundir" al sistema.

[@gmontesinos]

Hola Emilius como puedo hacer que el video tenga sonido gracias :)

[@emiliusvgs]

hola! justo en la última parte del video hablo que hay unas líneas de código que debemos modificar para que suene el video. Lo más práctico que puedes hacer es eliminar esos campos. kzbin.info/www/bejne/rIiqcoawasxjd5I

[@carlosalejandro9025]

remueve la palabra mute y tambien autoplay (con autoplay activado el audio se inicia anter de que escane el tracker,)

[@ChrisRodriguez9694]

A mí también me tiemblan los modelos haciendo location based, pienso que aún no está muy refinado el cálculo de geolocalización, tal vez lo mejoren en próximas actualizaciones

[@emiliusvgs]

hola! Estaba pensando que posiblemente era la luz y mi smartphone que es gama media. ¿Qué smartphone utilizaste? Gracias por comentar!

[@ChrisRodriguez9694]

@@emiliusvgs yo lo probé con un Xiaomi Mi A2 Lite, también gama media, en mi caso lo puse en la calle así que había buena iluminación, sentí que si me alejaba o acercaba al objeto tardaba en recalcular la posición, y aún quedandome quieto el objeto seguía moviéndose en su lugar

[@martinc2772]

@@ChrisRodriguez9694 a mi tambien me pasa, creo que es un problema de la libreria, tambien me ocurre con los videos en image tracking no se fijan.

[@emiliusvgs]

Entonces eso es lo más probable. Nada como un sdks más preciso claro esta

[@martinc2772]

@@emiliusvgs si, ojalá que lo mejoren pronto

[@pedronan5938]

Muy buen tutorial! Por el momento no logro que funcione, Descargue los archivos de AR.js studio y los importe en Glitch como indicas en el video, reemplaze las rutas y actualize Google Chrome. Al entrar en la web vovi.glitch.me por ejemplo con https carga bien la pagina pero no reproduce el video. Intente con 3 targets diferentes inclusive un QR pero tampoco. Tienes idea que puede ser? tengo un Moto G4. Saludos!

[@emiliusvgs]

hola! el video se queda estático o simplemente ni aparece? has probado agregar un objeto o una imagen para ver si existe un error general?

[@pedronan5938]

@@emiliusvgs Ni aparece. Probé cambiando el target al nativo de AR.js como hiciste vos y si funciona. Al parecer la calidad de targets que estaba usando era baja. La cuestión es que necesito usar un QR como target y al parecer no sirve y tiene poca complejidad T.T

[@emiliusvgs]

Sii. Creería que un qr code no están óptimo

[@pedronan5938]

@@emiliusvgs Hola Emiliusvgs aquí de nuevo, estoy intentando armar markers propios similares al oficial de AR y ninguno funciona. Solo con el logo de AR que se brinda de ejemplo funciona. Tu as conseguido crear tu propio marker y que funcione? Saludos.

[@emiliusvgs]

@@pedronan5938 Hola! He trabajado con ese ejemplo y con NTF marker

[@brokenalma]

Nice tutorial Can we make android app with that ( not web app)

[@emiliusvgs]

Hi! you can create it but with other platform

[@brokenalma]

@@emiliusvgs thanks for the reply Can you tell me which platform is better , I know little bit javascript

[@startuplove]

help!!1 how to make noise???

[@isaiaschavezconnect8463]

Usenme como botón de "No manches"

[@carlosrivera3805]

así no tiene gracia!! exigimos que lo pruebe en la torre eiffel!!!

[@emiliusvgs]

jajaja espero conocer la torre algún día

[@mpaforoufakis]

Why english title but spanish content? DISLIKE

[@emiliusvgs]

jaja what? My friend, my headline said: EN CAPTIONS. You can use it and watch my video with english captions! Try it!

[@mpaforoufakis]

@@emiliusvgs ok I missed that.. changing now to LIKE! :)

[@pablomoragasalvatierra9605]

Also, these terms and concepts are used in english throughout all latinomerica, I'm from Chile and I learned them in english :D