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="mi_video_html5_origen" >
</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="mi_canvas" style="top: 0; left: 0; 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("#mi_video_html5_origen");
// en la variable video alamcenamos el elemento video
// si el dispositivo permite el acceso a la cámara...
if (navigator.mediaDevices.getUserMedia)
{
// si podemos usar el video
var puede_usar_el_video = function(stream)
{
mi_video.srcObject = stream;
// utilizaremos la imagen de la camara para mostrar en el video
};
// si no tenemos acceso a la camara
var error_al_usar_el_video = function(error)
{
console.log(error);
// en la consola registramos el error
};
navigator.mediaDevices.getUserMedia(
{
audio: false,
// no captures audio
video: { facingMode: { ideal: 'user' } }
// si es un dispositivo movil, usa la camara del frente
}).then(puede_usar_el_video, error_al_usar_el_video);
}
window.onload = function()
// esto es un comentario en javascript
// aqui creamos una función
// 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("mi_canvas");
// el elemento bautizado "mi_canvas" sera usado para proyectar el video
// capturado por la cámara
// usaremos el video de la camara para crear realidad aumentada
// combinaremos el video con una imagen sobreimpuesta en canvas
var ancho_pantalla = window.innerWidth;
// cuanto espacio tenemos disponible...
// el canvas y la agumented reality serán responsivos
var alto_pantalla = (ancho_pantalla * 9) / 16;
// calculamos proporcionalmente el alto del canvas
mi_canvas.width = ancho_pantalla;
mi_canvas.height = alto_pantalla;
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
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);
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, ancho_pantalla, alto_pantalla);
// aqui utilizamo el método drawimage para mostrar el video capturado 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
// el método drawimage también se puede para cargar un video en el canvas...
contexto.drawImage(img_palomita, 0, 0, ancho_pantalla, alto_pantalla);
// una vez dibujado el video, sobre el ponemos nuestra realidad aumentada
// 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
}
}
</script>
</body>
</html>
Este ejemplo es parte de un tutorial más completo que puede consultarse:
Este sitio utiliza cookies propias y de terceros para mejorar sus servicios. Si continua navegando, entendemos que acepta su uso. Política de Privacidad
Menú ::
@feesgo
