Seguimos con WebRTC, esta vez vamos a ver cómo podemos utilizar la librería headtrackr.js de auduno para crear nuestras aplicaciones de seguimiento de rostro. Descargamos el fichero js y lo incluimos en nuestra página.
1 | <script src="headtrackr.js"></script> |
El próximo código inicia headtrackr con una etiqueta video a la cual se le asigna el stream, y una etiqueta canvas para copiar los videoframes. Las declaramos en el cuerpo de la página. Los DIVs que aparecen, se utilizaran para mostrar la información que nos brinda la API.
1 2 3 4 5 6 7 | <body> <canvas id="inputCanvas" width="320" height="240" style="display:none"> </canvas> <video id="inputVideo" autoplay loop></video> <div id="valores"></div> <div id="valores2"></div></body> |
Mientras headtrackr está iniciado, se estarán disparando en el documento los eventos *headtrackingEvent* y *facetrackingEvent*. *headtrackingEvent* tiene los atributos *x*, *y*, *z* los cuales estiman la posición de la cabeza del usuario en relación al centro de la pantalla(en centímetros). El evento *facetrackingEvent* tiene los atributos *x*, *y*, *width*, *height* y*angle*, los cuales tienen un valor estimado de la posición y tamaño de la cara en el video.
Este ejemplo escribe en los DIVs los valores devueltos en cada evento.
1 2 3 4 5 6 7 8 9 10 11 12 13 | var headtrack = document.getElementById("valores");var facetrack = document.getElementById("valores2");var inputCanvas= document.getElementById('inputCanvas');var htracker = new headtrackr.Tracker();htracker.init(inputVideo, inputCanvas);htracker.start();document.addEventListener("headtrackingEvent", function(event) { headtrack.text("x: "+event.x +" y:"+ event.y+ " z:"+ event.z);});document.addEventListener("facetrackingEvent", function(event) { facetrack.text("x: "+event.x +" y: "+ event.y+" width:"+ event.width +" height:"+ event.height+" angle:"+ event.angle);}); |
Yo no he trabajado con WebRTC, pero me hallé un tutorial que podrían encontrar interesante:
https://www.webdirections.org/blog/build-a-motion-activated-security-camera-with-webrtc-canvas-and-device-orientation/
En este juego para videoconsolas no tendrás
tanta presión por gastar para competir y vas a poder ganar basándote más en tus habilidades que en tu cartera.