Sim Bootleg

OMGIG

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 youtube.com in the URL to omgig.com
  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.

Inspiring!

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!

 
39
Kudos
 
39
Kudos

Read this next

Hipster Stack

You probably haven’t heard of it. Are you headed to Hollywood Hack Day this weekend? Well, you should be. It’s at the io/LA co-work space I started working out of recently. I’ll be there pitching the SoundCloud API,... Continue →