Visualização de bitmap com JavaScript
Posted by Dirceu | Filed under canvas, javascript, flv, streaming, rgb, html5, uncategorized
Imagens do tipo bitmap armazenam nada mais que uma lista (ou mapa) de cores a serem usadas em cada pixel de uma imagem.
Cada pixel pode ser representado, por exemplo, pela intensidade das cores: vermelho, verde e azul. Ex:
Essa cor seria R: 255, G: 55, B: 15 ou #ff0055 em hexadecimal.
Entendendo um pouco do funcionamento de bitmaps, ficará mais fácil entender a brincadeira aqui.
Com uma lista de cores (veja arquivo) eu desenhei uma imagem em uma tag HTML <canvas> com Javascript. Veja funcionando: Visualização de bitmap com Javascript.
Pode parecer besteira ou "muito inútil", mas afinal: por que os navegadores ficaram mais rápidos?
Em uma apresentação recente John Resign, desenvolvedor da Mozilla e responsável pelo engine de Javascript do Firefox, deu a entender que pode ser a hora de ver vídeo rodando em Javascript. Ou indo mais além, vídeo em streaming.
O número exibido na demonstração é quantas vezes a imagem conseguiu ser renderizada em um tempo limite de 1 segundo. (Quem usar Firebug vai ler isso no console).
Jacob Seidelin também fez algumas experiências com a exibição de imagens/vídeo em Javascript conseguiu fazer uma sequência de JPGs rodaram a 15 fps, o que foi suficiente para isso: Making a Javascript Video Player.
Como comentado lá no post do Jacob, considerando que temos codecs de sucesso para streaming de vídeo como o FLV tudo isso é inútil, prova de conceito, toycode que estava a algum tempo em minha pasta "playground" e agora fica disponível para inspirar idéias.
O script que usei para gerar a lista de cores à partir da imagem pode ser encontrado no gist.
Previous Post Next Post