Sim Bootleg


On the art of bootlegging live concerts and YouTube WebM video.

This post goes out to all the bootleggers out there, sacrificing their own concert experience so we can relive our favorites moments on YouTube later. Their efforts, for the most part, have gone under appreciated. Until now.

During this weekend’s Reykjavík Music Hack Day, Johannes and I built a modern concert bootleg simulator called OMGIG. The premise is simple: Take any YouTube video and see it through the bootlegger’s own eyes, that is the eyes behind a video recording iPhone.

Instructions #

  1. Search for any YouTube video.
  2. Change in the URL to
  3. That’s it!

You will then be transported back in time to the faithful day when that brave bootlegger forfeited his own vision to maximize your future viewing.


How’s it work? #

In general, the app is quite simple and you can find a list of all the technology used on the Music Hack Day wiki. However, there was one really interesting technique that came out of development which Jo has since turned into an open-source JavaScript library.

Placing a YouTube video into the iPhone graphic is easy enough, but what about blurring the background image? That’s where things got a little hacky.

I knew we could blur a video by placing it into a <video> element and sending it to an HTML5 canvas for stack blurring or by calling the CSS3 blur filter. But, how were we going to get a YouTube file into the <video> element? We know that YouTube has been creating WebM versions of all new uploads for their HTML5 players and that particular file format is made for the <video> element, but they don’t exactly make it clear as to how to access that in external apps. I’m guessing that’s because they don’t want you to…

Oh well. ;-)

After a lot of googling, we figured it out. Apparently, you can make a call to YouTube’s get_video_info end-point with a video_id and receive a list of video sources in addition to basic meta data. Then you’re just a bit of URI decoding away from uncovering the WebM source url. Hell, yeh. Rather than force you to do any decoding, Johannes extracted his source into a handy little library available on GitHub called YouTube-Video.

Go ahead. Fork it. We dare you.

We’re not entirely sure how this works as we should be running into cross-domain issues… perhaps CORS? Jo is still researching… What we do know is that this opens up the possibilities for all sorts of YouTube manipulation, especially when you draw the video element to canvas:

// Get DOM elements
v       = document.getElementById('v');
canvas  = document.getElementById('c');
context = canvas.getContext('2d');

// Set sizing
cw = 640;
ch = 360;
canvas.width  = cw;
canvas.height = ch;

// Listen for the `<video>` play event
v.addEventListener('play', function() {
  draw(this, context, cw, ch);
}, false);

// Draw it to `<canvas>`
draw = function (v, c, w, h) {
  c.drawImage(v, 0, 0, w, h);
  setTimeout(draw, 20, v, c, w, h);

So… #

…check out the inspiration and use the library to make your own YouTube hack. If you do come up with something cool, please let me know on Twitter.

Good luck!


Now read this

Point No. 02, Love Where You Are From

Aaron Draplin is a lot of things: large, beardy, michiganian. But I prefer, inspirational. I recently came across his 50 Point Plan To Ruin Yer Career and he had me at Point No. 02: Love Where You Are From I’m from the great state of... Continue →