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

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 Range of Content on Planet Python

I've gotten a number of requests lately to contribute only Python related material to the Planet Python feeds and to be honest these requests have both surprised and insulted me, but they've continued. I am pretty sure they've come from a very small number of people, but they have become consistent. This is probably because of my current habit of writing about NaNoWriMo every day and those who aren't interested not looking forward to having the rest of the month reading about my novel. Planet Python will be getting a feed of only relevant posts in the future, but I'm going to be honest: I am kind of upset about it. I don't care if anyone thinks it is unreasonable of me to be upset about it, because the truth is Planet Python means something to me. It was probably the first thing I did that I considered "being part of the community" when I submitted my meager RSS feed to be added some seven years ago. My blog and my name on the list of authors at Plan

Pythonic Defined

Introduction Losing is Good Strings Dictionaries Conclusion Introduction Veterans and novices alike of Python will hear the term "pythonic" thrown around, and even a number of the veterans don't know what it means. There are times I do not know what it means, but that doesn't mean I can define a pretty good idea of what "pythonic" really means. Now, it has been defined at times as being whatever the BDFL decides, but we'll pull that out of the picture. I want to talk about what the word means for us today, and how it applied to what we do in the real world. Languages have their strengths and their idioms (ways of doing things), and when you exploit those you embrace the heart of that language. You can often tell when a programmer writing in one language is actually more comfortable with another, because the code they right is telltale of the other language. Java developers are notorious for writing Java in every language they get their hands on. Ho