Skip to main content

Caktus Ship It! Day 2014 Q3 Post-Mortem - Part 1: Proof of Concept in Under an Hour

Today was one of our very fun Ship It! Day events at Caktus Group and the first in our new office. It snuck up on a lot of us, what with the busy move we're still settling down from, but it also is a great chance to unwind and to really enjoy our new shared workspace.

I'm going to start ending these events with a personal post-mortem on what I worked on. I decided to learn about WebRTC by building a tool I'd love to have with friends: a shared music player. The problem is simple: some of us think the room is to quiet and some of us like quiet. What we need is a way to play music together with headphones.

The goal was a simple app that can play MP3s. Everyone with the app open should be able to play songs and everyone connected would listen at the same time. We all hear the same thing. If someone leaves, they'll take their music with them.

So, I set about this yesterday afternoon (when our Ship It festivities officially begin) and I had a vague idea where I wanted to start. I had seen an interesting proof-of-concept called instant.io which provided file sharing in the browser. What made it novel from other demos was its use of BitTorrent as the sharing mechanism, so it could be used to effectively distribute a large file to a large number of recipients efficiently!

My starting theory was
BitTorrent combined with Winamp, in your Browser
So I set on this task by cloning the instant.io repository and running it locally, which was a little more trouble than I expected. The actual setup of the project was pretty odd, and depended on things specific to the owners machine. What I did learn from instant.io was to find my way to the WebTorrent project, on top of which instant.io was built.

I cleaned up the repository I had cloned to run a bit easier on my machine and started pulling examples from the WebTorrent website. I quickly got the file sharing working locally, dropping files onto one browser and seeing download links appear in the second.

So far, so good!

The next step was rudimentary music playing. I dropped a simple HTML5 audio tag into the page
<audio controls />
And took a look at where the instant.io code was rendering its download links after completing the transfer of a file from one peer to the next. It was easy enough to find where it looped through the files of a completed torrent and wrote the links into the page.

torrent.files.forEach(function (file) {
    file.createReadStream().pipe(concat(function (buf) {
      var a = document.createElement('a')
      a.download = file.name
      a.href = URL.createObjectURL(new Blob([ buf ]))
      a.textContent = 'download ' + file.name
      log.innerHTML += a.outerHTML + '
    }))
  })

A torrent can contain multiple files, and that was a fact that I had neglected, but for the current testing I just assumed that I'm only dropping one file at a time and I just take the first file in the torrent. It was very easy to assign the Data URI being generated here to the audio tag and trigger playback.
  var file = torrent.files[0]
  file.createReadStream().pipe(concat(function (buf) {
    var a = document.querySelector('audio')
    a.src = URL.createObjectURL(new Blob([ buf ]))
    a.play()
  }))

Success! I had, in less than an hour, built a simple tool that lets a bunch of people drop any MP3 into their browser window and all be listening to the same song in just a few seconds. It worked great, but I had a lot of work ahead of me.


Part 1: Proof of Concept in Under an Hour

Part 2: Playlists and Reseeding Songs

Part 3: Two Steps Back and Three Steps Forward

Comments

Popular posts from this blog

Respect and Code Reviews

Code Reviews in a development team only function best, or possible at all, when everyone approaches them with respect. That’s something I’ve usually taken for granted because I’ve had the opportunity to work with amazing developers who shine not just in their technical skills but in their interpersonal skills on a team. That isn’t always the case, so I’m going to put into words something that often exists just in assumptions.
You have to respect your code. This is first only because the nature and intent of code reviews are to safeguard the quality of your code, so even having code reviews demonstrates a baseline of respect for that code. But, maybe not everyone on the team has the same level of respect or entered a team with existing review traditions that they aren’t acquainted with.
There can be culture shock when you enter a team that’s really heavy on code reviews, but also if you enter a team or interact with a colleague who doesn’t share that level of respect for the process or…

CARDIAC: The Cardboard Computer

I am just so excited about this.


CARDIAC. The Cardboard Computer. How cool is that? This piece of history is amazing and better than that: it is extremely accessible. This fantastic design was built in 1969 by David Hagelbarger at Bell Labs to explain what computers were to those who would otherwise have no exposure to them. Miraculously, the CARDIAC (CARDboard Interactive Aid to Computation) was able to actually function as a slow and rudimentary computer. 
One of the most fascinating aspects of this gem is that at the time of its publication the scope it was able to demonstrate was actually useful in explaining what a computer was. Could you imagine trying to explain computers today with anything close to the CARDIAC?

It had 100 memory locations and only ten instructions. The memory held signed 3-digit numbers (-999 through 999) and instructions could be encoded such that the first digit was the instruction and the second two digits were the address of memory to operate on. The only re…

How To Care If BSD, MIT, or GPL Licenses Are Used

The two recent posts about some individuals' choice of GPL versus others' preference for BSD and MIT style licensing has caused a lot of debate and response. I've seen everything as an interesting combination of very important topics being taken far too seriously and far too personally. All involved need to take a few steps back.

For the uninitiated and as a clarifier for the initiated, we're dealing with (basically) three categories of licensing when someone releases software (and/or its code):
Closed Source. Easiest to explain, because you just get nothing.GPL. If you get the software, you get the source code, you get to change it, and anything you combine it with must be under the same terms.MIT and BSD. If you get the software, you might get the source code, you get to change it, and you have no obligations about anything else you combine it with.The situation gets stickier when we look at those combinations and the transitions between them.

Use GPL code with Closed S…