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:

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 =;

for (var i = 0; i < lamps; i++) { var from = i * w * block_width; result.push( calcMidColor(, i * pxl, Math.min((i + 1) * pxl, total_pixels - 1)) ); } return result; } [/javascript] Then, two canvas objects are placed, one on each side, of the video itself.

Posted by Dion Almaer at 6:30 am

4.5 rating from 49 votes


Comments feed TrackBack URI

Pretty cool that it can be done, but its mostly distracting! Of course, I feel the same way about the tv effect.

Comment by genericallyloud — March 12, 2010

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. ;)

Comment by Schill — March 12, 2010

so pixel data from a video can be read by javascript?

zomg facial recognition on the web.

Comment by minkeytorture — March 12, 2010

Pretty cool effect I wonder if a similar process could be applied with box-reflect to make a “reflection” appear under the video

Comment by chriswel — March 12, 2010

@chriswel: box-reflect works without javascript tricks

Comment by MattCoz — March 13, 2010

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…

Comment by Skilldrick — March 15, 2010

That’s simpy cool : the result is bluffing

Comment by agenceweb — March 16, 2010

Leave a comment

You must be logged in to post a comment.