Friday, March 12th, 2010
Ambilight Sample; video and canvas
Category: Canvas, Examples
, Video
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 = [],
-
-
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.
Related Content:
4.5 rating from 46 votes
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