2

Tutorial headtracking

3May
en Canvas, Desarrollo web, HTML5, Tutoriales, WebRTC

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.

<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.

<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.


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);
});

Etiquetado en:

2 Comentarios

  1. Aurelio dice:

    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.

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.