AR Augmented Reality ( Realidad Aumentada ) con canvas, javascript y HTML5.

27 de enero de 2018

Con el elemento CANVAS de HTML5 y javascript se pueden crear realidad aumentada AR Augmented Reality (Realidad Aumentada) interactiva y multiplataforma que funcionen en dispositivos móviles y computadoras de escritorio.

Por cuestiones de seguridad, la realidad aumentada sólo funciona en sitios web que tienen un certificado se seguridad SSL y utilizan el protocolo https. Afortunadamente letsencrypt.org regala certificados de seguridad SSL

Además el usuario debe permitir el acceso a la cámara o cámara web del dispositivo.

Este es un ejemplo de AR Augmented Reality ( Realidad Aumentada ):

El código de esta AR Augmented Reality ( Realidad Aumentada ) es:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #video_html5 { display: none; // se utiliza un video capturado por la webcam // el video se proyecta en el elemento video // como combinaremos el video con el canvas, ocultamos el video original } </style> </head> <body> <video autoplay="true" id="#video_html5" ></video> <-- // creamos un elemento video // el video capturado en la webcam se proyecta en el elemento video // utilizamos el elemento video para proyectarlo // como combinaremos el video con el canvas, ocultamos el video original con css // este video no se mostrara en la pantalla --> <p> <canvas id="canvas" width="800" height="450" style="border:3px solid #ccc;"></canvas> </p> <-- // creamos un elemento canvas // lo utilizaremos para mostrar el video // y poner encima nuestra AR Augmented Reality ( Realidad Aumentada ) --> <script> // inicia javascript // con javascript se anima en canvas var mi_video = document.querySelector("#video_html5"); // en la variable video alamcenamos el elemento video navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; // diferentes navegadores utilizan metodos diferentes para tener acceso // a la cámara // con este codigo homogeneizamos todas los métodos en uno if (navigator.getUserMedia) // si el navegador puede tener acceso a la cárama { navigator.getUserMedia({video: true}, muestra_Video, video_Error); // si el navegador recibe señal de la camara // ejecuta la funcion muestra_Video // si el navegador no recibe señal de la camara // ejecuta la funcion video_Error } function muestra_Video(stream) // la funcion muestra video { mi_video.src = window.URL.createObjectURL(stream); // el elemento video tendrá como fuente del video // lo que capture la cámara web // window.URL.createObjectURL(stream) // recupera lo que la camara web captura } function video_Error(e) { // si no tiene acceso a la camara // puede mostrarse un mensaje de error } window.onload = function() // cuando la página se cargue, ejecutarmos el siguiente código { animacion_con_canvas(); // cuando la página se cargue, ejecutarmos otra función animacion_con_canvas(); } function animacion_con_canvas() // creamos la función animacion_con_canvas { var mi_canvas = document.getElementById("canvas"); // el elemento bautizado "canvas" sera usado para crear la animaciòn var contexto = mi_canvas.getContext("2d"); // creamos el contexto para poder animar en canvas // canvas soporta animaciones en 2d y en 3d, // en este ejemplo usaremos animaciones 2d var img_palomita = new Image(); // creamos un objeto del tipo imagen // Como todo objeto tiene propiedades métodos y eventos // en este caso pondremos por encima del video una imagen fija // pero podemos poner lo que sea... // una sprite animation // una animacion webgl // una animacion hecha con javascript img_palomita.src ="x.png"; // con la propiedad src definimos // la imagen a cargar. DEBE ESCRIBIRSE LA RUTA CORRECTA A LA IMAGEN img_palomita.addEventListener('load', animar_imagen, false); // agregamos un event listenter a la imagen // cuando se cargue, ejecutaremos la funcion animar_imagen function animar_imagen() // creamos la función mostrar_imagen para mostrar la imagen en el canvas // esta función se ejecuta cuando la imagen se ha cargado { fx_animar_imagen = requestAnimationFrame(animar_imagen); // invocamos la función requestAnimationFrame // requestAnimationFrame intenta ejecutar una función 60 veces por segundo // en este caso ejecutará la función animar_imagen // el método requestAnimationFrame utiliza las variables (función a ejecutar) contexto.drawImage(mi_video, 0, 0, 800, 450); // aqui utilizamo el método drawimage para mostrar a nuestra imagen dentro del canvas // el método drawimage utiliza las variables (imagen a cargar, posición en x, posición en y) // el método drawimage se puede usar indistintamente para cargar imágenes jpg, png o svg // aquí la posición en x cambiará dinámicamente contexto.drawImage(img_palomita, 0, 0, 800, 450); } } </script> </body> </html>

Este ejemplo es parte de un tutorial más completo que puede consultarse:

Sitios de interés

Mozilla Developer Network Sitio para aprender html5, javascript, css

W3Schools Sitio para aprender html5, javascript, css, php, sql

CodeAcademy Sitio para aprender html5, javascript, css, php, sql

BrowserQuest

Asteroids

El juego de google para el Halloween de 2016

Keepout

Hexgl

Contre Jour


Comenta y opina este texto     Lee mi libro de visitas
© 1997-2018 Alain García Gómez
albegago@hotmail.com
Twitter: @feesgo
El vínculo a este documento es:

Compartir en facebook Compartir en twitter Compartir en whatsapp Rss

Puedes apoyar a este sitio invitándome a comer...

Este sitio utiliza cookies propias y de terceros para mejorar sus servicios. Si continua navegando, entendemos que acepta su uso. Política de Privacidad