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

Statement Functions

At a small suggestion in #python, I wrote up a simple module that allows the use of many python statements in places requiring statements. This post serves as the announcement and documentation. You can find the release here . The pattern is the statement's keyword appended with a single underscore, so the first, of course, is print_. The example writes 'some+text' to an IOString for a URL query string. This mostly follows what it seems the print function will be in py3k. print_("some", "text", outfile=query_iostring, sep="+", end="") An obvious second choice was to wrap if statements. They take a condition value, and expect a truth value or callback an an optional else value or callback. Values and callbacks are named if_true, cb_true, if_false, and cb_false. if_(raw_input("Continue?")=="Y", cb_true=play_game, cb_false=quit) Of course, often your else might be an error case, so raising an exception could be useful

How To Teach Software Development

How To Teach Software Development Introduction Developers Quality Control Motivation Execution Businesses Students Schools Education is broken. Education about software development is even more broken. It is a sad observation of the industry from my eyes. I come to see good developers from what should be great educations as survivors, more than anything. Do they get a headstart from their education or do they overcome it? This is the first part in a series on software education. I want to open a discussion here. Please comment if you have thoughts. Blog about it, yourself. Write about how you disagree with me. Write more if you don't. We have a troubled industry. We care enough to do something about it. We hark on the bad developers the way people used to point at freak shows, but we only hurt ourselves but not improving the situation. We have to deal with their bad code. We are the twenty percent and we can't talk to the eighty percent, by definition, so we need to impro