Friday, March 12th, 2010
Ambilight Sample; video and canvas
Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect.
As the video runs, a snapshot is sent over to JavaScript land where colors are worked out:
JAVASCRIPT:
function getMidColors(side) {
var w = buffer.width,
h = buffer.height,
lamps = getOption('lamps'),
block_width = getOption('block_size'),
block_height = Math.ceil(h / lamps),
pxl = block_width * block_height * 4,
result = [],
var w = buffer.width,
h = buffer.height,
lamps = getOption('lamps'),
block_width = getOption('block_size'),
block_height = Math.ceil(h / lamps),
pxl = block_width * block_height * 4,
result = [],
img_data = buffer_ctx.getImageData(side == 'right' ? w - block_width : 0, 0, block_width, h),
total_pixels = img_data.data.length;
for (var i = 0; i <lamps; i++) {
var from = i * w * block_width;
result.push( calcMidColor(img_data.data, i * pxl, Math.min((i + 1) * pxl, total_pixels - 1)) );
}
return result;
}
Then, two canvas objects are placed, one on each side, of the video itself.
Pretty cool that it can be done, but its mostly distracting! Of course, I feel the same way about the tv effect.
I’m glad just to see access to this kind of data from JS (hopefully <audio> is next, etc.).. Creative types will put it to good use – pending good taste, of course. ;)
so pixel data from a video can be read by javascript?
zomg facial recognition on the web.
Pretty cool effect I wonder if a similar process could be applied with box-reflect to make a “reflection” appear under the video
@chriswel: box-reflect works without javascript tricks
It’s a shame there’s such a lag between the video and the JavaScript (at least there is on Chrome). Very exciting possibilities though. I wonder if it would be possible to delay the video output to sync the two…
That’s simpy cool : the result is bluffing