Pixelate flux vidéo avec HTML5

Question

Je suis en train de goofler avec quelques trucs HTML5 et je voulais combiner la bibliothèque Close Pixelate avec le getUserMedia API. Je veux pixelliser le flux à la volée (j'obtiens le taux de trame serait fou faible). Est-ce possible? Je voudrais juste donner à Close Pixelate l'objet vidéo au lieu de l'image.

This video by Rob Hawkes m'a donné l'idée.

Solution: http://jsfiddle.net/N46QF/ (vous avez besoin de Google Chrome Canary avec MediaStream activé en chrome: // flags/pour l'obtenir au travail)

Answer 1

Oui, je pense que cela est possible. Cependant, afin de manipuler les images de la vidéo au niveau du pixel, vous devrez d'abord les dessiner sur une toile en utilisant un intervalle (voir fiddle, testé dans firefox et chrome). Étant donné que la bibliothèque Close Pixelate attend une image en entrée (qu'elle dessine immédiatement sur une toile), vous devrez modifier légèrement le code afin de pouvoir transmettre directement votre canevas. Si la bibliothèque résiste à une instanciation répétée sur un intervalle ou si votre fréquence d'images est acceptable, je ne sais pas, mais je pense que cela devrait être assez facile à tester. Je serai certainement intéressé de voir les résultats! Si tout se passe, il pourrait être utile d'envisager de forker la bibliothèque Close Pixelate et de la modifier pour permettre l'entrée d'une image ou d'un canvas car cela semble être une extension utile.