Friday, March 12th, 2010

Ambilight Sample; video and canvas

Category: Canvas, Examples, Video

<>p>ambilight

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
< view plain text >
  1. function getMidColors(side) {
  2.     var w = buffer.width,
  3.         h = buffer.height,
  4.         lamps = getOption('lamps'),
  5.         block_width = getOption('block_size'),
  6.         block_height = Math.ceil(h / lamps),
  7.         pxl = block_width * block_height * 4,
  8.         result = [],
  9.  
  10.         img_data = buffer_ctx.getImageData(side == 'right' ? w - block_width : 0, 0, block_width, h),
  11.         total_pixels = img_data.data.length;
  12.  
  13.  
  14.     for (var i = 0; i < lamps; i++) {
  15.         var from = i * w * block_width;
  16.         result.push( calcMidColor(img_data.data, i * pxl, Math.min((i + 1) * pxl, total_pixels - 1)) );
  17.     }
  18.  
  19.     return result;
  20. }

Then, two canvas objects are placed, one on each side, of the video itself.

Posted by Dion Almaer at 6:30 am
7 Comments

++++-
4.5 rating from 49 votes

7 Comments »

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.