#getusermedia

Jogo de quebra-cabeça com realidade aumentada. INSTRUÇÕES Necessário possuir um com computador com webcam e imprimir em uma folha A4 as QR-Markers para poder jogar. Faça o Download, clique aqui das QR-Markes Recorte as peças QR-Markers separadamente deixando uma borda branca, não recorte rente ao preenchimento preto. Acesse o jogo…

This weekend's hack is Gifatar. With Gifatar you can take a series of mugshots using your webcam and turn them into an avatar ... or rather a gifatar. The source is here and the app looks smth like this: 

Once in while, i try to write some blog entry that is not just link to some interesting article :) This is 200 post so I think that would be the time to write something. I don't have much free time so i will be short and with a few links :)

I recently took a little more time to read about webRTC, this is a really simple but powerful functions provided by JavaScript. You could already found a link to the html5rock article on insidehtml5 http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

Creating video chat inside browser has never been easier. But that's not the part that got my full attention, I clicked on link inside Google I/O presentation and found a game FaceKat where you move by moving your  head. Game recognize your head and that is the only input in playing a game, you should definitely try this game, but somewhere where people will not look weird when you move your head in all directions :)

After that game i started reading more about recognition of your head inside JavaScript and found some libraries. First of them is headtrackr

headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard.

This library is very simple to use, you should look at different examples of use that allows.

But i want to find something more useful that tracking only head of person so i found second library tracking.js  this library has more options.

The tracking.js brings to web elements tracking techniques of a real scene captured by the camera, through natural interactions from object tracking, color markers, among others, allowing the development of interfaces and games through a simple and intuitive API.

tracking.js - demo from Eduardo Lundgren on Vimeo.

This library gives you little more control, you can't be a Tony Stark and move everything with hand gestures but it is a good start.

At the end look at this Chrome experiment and get motivated so you also try to do something!

Abaixo temos dois exemplos de trabalho com webcam a partir da API getUserMedia que está começando a ser implantada nos browsers, no entanto ainda somente o Google Chrome consegue suportar ela. Já outros navegadores estão começando a implantar esta nova API que permite o trabalho com webcam, desde trabalho com fotos e videos.

Captando e salvando uma imagem da webcam.

No link do código postado abaixo temos o exemplo de uma aplicação desenvolvida em HTML5 e Javascript, utilizamdo jQuery. Com ela, utilizamos a webcam do usuário para captar uma imagem, desenhar ela em CANVAS, depois poderemos salvar ela no sistema do usuário.

Esta aplicação funciona corretamente no Google Chrome e no Opera.

Link do projeto: https://github.com/sandroSilva/SnapShot

Captando e salvando um vídeo da webcam.

No link abaixo temos o exemplo de captação da imagem da webcam, encodando o video para WebM e permitindo que o usuário salve o video produzido em seu computador.

Utilizei a classe Whammy que é um WebM Encoder em Javascript (http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/).

Esta aplicação funciona corretamente somente no Google Chrome.