Hace poco, Paul Rouget nos sorprendió con una demostración de como editar video en tiempo real con javascript.

He hecho otra demostración basándome en su código de como hacer esto. El ejemplo consiste en crear un cubo “3D” (en realidad es 2.5D)  sobre una plantilla impresa en un folio.

La plantilla son cuatro cuadrados  de colores rojo, verde, azul y negro dispuestos en forma de cuadrado. El video esta gravado con una cámara normal y convertido a ogg/theora con ffmpeg2theora. Despues el video se inserta en la pagina con la etiqueta <video/> de html5 y cuando se le da al play, se dibuja en un canvas  la imagen del video, despues se detecta el centro de los cuadrados y dibuja un “cubo” tomando estos 4 puntos como base.

Lanzar demo. Necesitas tener Firefox 3.5 b3 y un poco de paciencia (el video tarda en cargar) para que funcione

Realidad aumentada con javascript y

Lanzar demo.

YouWoTMA General javascript, mozilla, video