Screenshot o captura de pantalla a nuestra aplicacion de Realidad Aumentada usando ar.js

¡Hola Aumentados! Bienvenido a este nuevo tutorial donde aprenderemos a hacer un Screenshot o captura de pantalla a nuestra aplicación de Realidad Aumentada que muestra un objeto 3D (NO video) utilizando la librería ar.js.

La aplicación que vamos a desarrollar nos permitirá realizar un screenshot de toda la pantalla de nuestra aplicación siempre y cuando se esté visualizando un objeto 3D (COLLADA «DAE», OBJ, glTF 2.0 and glTF, PLY, JSON, FBX entre otros que la librería A-frame y AR.js nos permitan).

La razón por la que debe de ser un objeto 3D y no un video, es por que cuando se inicializa la acción de captura de pantalla. Nuestro código captura el video de nuestro dispositivo y además de eso captura nuestro modelo 3D, básicamente trabaja con dos capas (la fotografía es igual a una Capa de video y una Capa de modelo 3D) luego, las sobrepone mostrándonos así nuestro screenshot perfecto.

Por que no un screenshot de video AR (Augmented Reality)? Esto es debido a que necesitamos diferenciar los dos tipos de videos que se encuentran en nuestras aplicaciones:

• El primero, es el que visualizamos en la pantalla de nuestro dispositivo, ya sea un pc, un Android o un móvil iOS cuando nuestra aplicación entra en función.
• El segundo, es el que este asignado a nuestro marcador en la aplicación de AR (Augmented Reality).

por tal motivo, debemos de diferenciar los distintos tipos de video que se encuentran en nuestro código y además de eso en el código de A-frame y Ar.js. fácil, ¿no? ¿El Problema? solo existe un tipo de asignación para video y es <video> o <a-video>. Pero tranquilo, aquí en Realidad Aumentada Empezando Desde Cero te vamos a enseñar a cómo hacerlo en un próximo tutorial, así que es solo cuestión de tiempo y de cómo reacciones a esta entrada. Así que dale mucho amor y compártela.

¡Empecemos!

En esta ocasión vamos a crear un botón en nuestra aplicación de ar.js para poder acceder a la propiedad que nos permite realizar la captura de pantalla, inicialmente creamos el estilo para nuestro botón.

  .button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    border: 2px solid rgba(9, 148, 28, 0.541);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
    
  }
  .wrap {
  border: solid 1px #ccc;
  padding: 10px;
  text-align: center;
}
#output {
  display: inline-block;
  top: 4px;
  position: relative;
  border: dotted 1px #ccc;
  padding: 2px;
}
.button {
  border: solid 2px #ccc;
}

De esta manera ya tendremos un diseño para nuestro botón que le dará un toque extra a nuestra aplicación, continuemos.

Ahora bien, pasemos a la sección de la cual les hablaba arriba (Capas de video y modelo 3D). Vamos a utilizar dos scripts nuevos.

• MergeImages. Su web es https://github.com/lukechilds/merge-images
• CaptureVideoFrame. Su web es https://github.com/ilkkao/capture-video-frame

MergeImages: Para utilizarlo en nuestra aplicación recuerda agregarlo en la cabecera de nuestro código, llamando así al script.

• <script src="https://unpkg.com/merge-images"></script>

CaptureVideoFrame: Para utilizarlo en nuestra aplicación recuerda agregarlo en la cabecera de nuestro código, llamando asi al script.

• <script src="capture-video-frame.js"></script>

ahora pasemos al codigo que vamos a utilizar para la seccion de MergeImages:

function resizeCanvas(origCanvas, width, height) {
	let resizedCanvas = document.createElement("canvas");
	let resizedContext = resizedCanvas.getContext("2d");

	resizedCanvas.height = height;
	resizedCanvas.width = width;

	resizedContext.drawImage(origCanvas, 0, 0, width, height);
	return resizedCanvas.toDataURL();
}

document.getElementById("foto-button").addEventListener("click", function() {
	let aScene = document.querySelector("a-scene").components.screenshot.getCanvas("perspective");
	let frame = captureVideoFrame("video", "png");
	aScene = resizeCanvas(aScene, frame.width, frame.height);
	frame = frame.dataUri;
	
  mergeImages([frame, aScene]).then(b64 => {
		let link = document.getElementById("descarga-link", "jpeg");
		link.setAttribute("download", "FOTO.jpeg");
		link.setAttribute("href", b64);
		link.click();
    console.log("foto tomada");
	});
});

y ahora la seccion que se encargara de la captura del video y su procesamiento.

function captureVideoFrame(video, format, width, height) {
        if (typeof video === 'string') {
            video = document.querySelector(video);
        }
        format = format || 'jpeg';

        if (!video || (format !== 'png' && format !== 'jpeg')) {
            return false;
        }
        var canvas = document.createElement("CANVAS");
        canvas.width = width || video.videoWidth;
        canvas.height = height || video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        var dataUri = canvas.toDataURL('image/' + format);
        var data = dataUri.split(',')[1];
        var mimeType = dataUri.split(';')[0].slice(5)

        var bytes = window.atob(data);
        var buf = new ArrayBuffer(bytes.length);
        var arr = new Uint8Array(buf);

        for (var i = 0; i < bytes.length; i++) {
            arr[i] = bytes.charCodeAt(i);
        }
        var blob = new Blob([ arr ], { type: mimeType });
        return { blob: blob, dataUri: dataUri, format: format, width: canvas.width, height: canvas.height };
    };

Recuerda que estos códigos son JavaScript así que tendrás que ubicarlos dentro de las etiquetas <script> </script> de tu aplicación de lo contrario no funcionaran.

Ahora solo nos queda crear nuestro botón y la manera en que se va a descargar nuestra imagen.

<button class="button" id="foto-button">SNAPSHOT</button>
<a id="descarga-link" href="#"></a>

y listo! sí agregaste todos los elementos de manera correcta en tu aplicación, esta debería de funcionar de maravilla!

Ahora bien. Puntos a tener en cuenta después de llegar hasta aquí en el tutorial.

• Cuando se interactúa con el botón de snapshot, screenshot o captura de pantalla en un computador de mesa (desktop) o laptop, la imagen aparecerá como con un dialogo de descargar como si estuvieras descargando cualquier imagen.
• En el caso de los dispositivos móviles Android e iOS. Aparecerá un cuadro de dialogo para descargar, pero en el caso del iPhone, la imagen no será guardada en el carrete de fotografías (Galería). Esta se descargará y se guardara en la sección archivos como un archivo descargado. (En un próximo tutorial enseñare cómo hacer para que se guarde en el carrete de fotos).

Te gusto este post, pero quieres saber más al respecto y quieres un VIDEOTUTORIAL! Solo házmelo saber en la caja de comentarios y reacciona a este post compartiéndolo o dándole me gusta en mi canal de YouTube o Facebook. Así realizare este video tutorial.

Facebook: https://www.facebook.com/realidadaumentadaempezandodesdecero

YouTube: https://www.youtube.com/user/carlosreinamcr

• Te gustaría tener todo el código organizado y en un archivo .HTML para descargar? Escríbeme un comentario y con gusto te lo compartiré.