Video con processingjs (javascript)

Ayer escribí sobre las virtudes de processingjs, lancé una pregunta al aire sobre el avance de processing + html5 y realidad aumentada. No pude con mi genio y comencé a buscar información al respecto. Lo que encontré me gustó. Desde el 2012 se iniciaron los proyectos para lanzar propiedades de html5 como el video y sonido.

Si bien no es propiamente realidad aumentada con processingjs, es un gran avance en el trabajo.
Comenzaré a lanzar un proyecto básico y luego a dar algunos ejemplos. Para la visualización de processingjs usaré el plugin para wordpress.

1) Activa tu cámara

Cualquiera que ha trabajado con processing podrá entender que cuando quería exportar sketch que vinculara tu cámara web era un dolor de cabeza pues los applet por ‘motivos de seguridad’ restringía demasiado. Teníamos que trabajar con java lite y etc de documentos.

Ahora con processingjs es mucho más fácil porque utilizaremos una propiedad de html5 para visualizar video. Netamente se aplicara una web kit (herramienta) llamada GetUserMedia. Si necesitas más info puedes leer algo aquí.

En este punto iniciaremos de manera básica los elementos para hacer set-up. En esta instancia generaremos las opciones de video como por ejemplo atributos de video, ancho, alto, autoplay, etc)

var video = document.createElement(«video»);
video.setAttribute(«style», «display:none;»);
video.setAttribute(«id», «videoOutput»);
video.setAttribute(«width», «400px»);
video.setAttribute(«height», «300px»);
video.setAttribute(«autoplay», «true»);
if(document.body!=null) document.body.appendChild(video);

function init() {
if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia({video:true}, gotStream, noStream);

function gotStream(stream) {
video.src = webkitURL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
streamError();
};
}

function noStream() {
alert(‘No camera available.’);
}

function streamError() {
alert(‘Camera error.’);
}
}
}

Aquí se armará la visualización de video con processing. El famoso PImage

var ctx;
PImage img;
int nb=20;

Luego pasaremos instalar Void Setup y Void Draw

void setup(){
size(400,300);
ctx = externals.context;
init();
}

void draw(){
pushMatrix();
translate(width,0);
scale(-1,1);//mirror the video
ctx.drawImage(video, 0, 0, width, height); //video is defined outside processing code
popMatrix();
}

Correcto. Ya tenemos el código primario para lanzar el ejemplo. Lo que veremos será lo siguiente:

Si necesitan descargar el código pueden descargarlo aquí. Este es un ejemplo primario y modificado.

Ahora pasaremos a realizar un ejemplo más complejo. Lo genial de processing es que uno puede leer el código y comprenderlo y así seguir estudiando y sacar diferentes ejemplos. Aquí tenemos uno de la librería online más grande processing llamada Openprocessing. Aquí he sacado este sketch