LevFeels – a behind the scenes look

In October a portion of the popcorn-js team went to the Open Video Conference. At the conference we presented two separate demos one – a collaborative effort with Universal Subtitles, and the other – a remake of the Kuleshov Effect.

Check out the Universal Subtitles demo:

  • view the demo
  • read about it from the developer’s perspective here
  • read about it from the filmmakers perspective here

Check out the Kuleshov remake:

  • view the demo
  • read about it from the developer’s perspective here

The Kuleshov remake incorporated many different technologies including: twitter search, Flickr search, HTML5 video audio, and jQuery. The basic idea is to allow people to change the emotion by tweeting #levfeels {and the emotion: sad/angry/happy}. The video, the audio, and the Flickr pictures will all change depending on the current emotion calculated via twitter search.


We used jQuery’s $.getJSON function to search through the twitter api for the keyword lefFeels (http://search.twitter.com/search.json?q=lefFeels). This returns 15 most recent tweets from twitter. We verify that we have not received these tweets before (twitter will return the same tweets if no new ones were tweeted) and 1) calculate how many times sad, happy, or angry appeared 2) print the tweets on the screen. If no new tweets exist we use the setTimeout function to call the twitter function every 8 seconds. This is not ideal, ideally we should be able to stream the twitter feed so that the twitter function only executes when new tweets come along.


We ensure Flickr start loading right at the beginning via addEventListener(‘DOMContentLoaded’, , function(){…}, false). To get the actual images we once again use the  jQuery’s $.getJSON function to search through the Flickr api in order to find photos with tags: sad, happy, and angry (http://api.flickr.com/services/feeds/photos_public.gne?tags=). Once we get about 5 images of each emotion we start playing the video. The reason we do this is because before we can display the actual images on the canvas, the images needs to be downloaded, which means if we try to display the image before it is downloaded it will not display. To get the right effect of the image fitting on the laptop screen we skew the image before putting it on the canvas.

HTML5 Video

We use 4 separate videos for this demo. Three of them are based on emotion sad, happy, angry. The fourth video (which we refer to as the middle) is of the laptop screen. If you look at the code you will notice that the video tags, although they are used in the code, are not actually visible on the page. We are using the canvas element to display the videos and the Flickr images.

Don’t like the way our code works?

All of our code is available on GitHub. Dont be shy fork the repo and lets see what you can do ;P.


View all of my blogs on popcorn-js
View all of my blogs


Open Subtitles Design Summit – Building a Community

In my previous post I talked about the Open Subtitles Design Summit. I attended numerous sessions one of which was a discussion on community. Universal Subtitles is looking for a way to expand their community and promote their subtitle tool. Being on a number of open source projects I always ponder the best way of getting people involved. Here are some things I found useful that came out of the discussion.

Make it easy for people to get involved

Volunteers shouldn’t have to do a lot of research in order to figure out how to get involved. Documentation should be readily accessible and easy to find. The process for submitting new patches or new work should also be easy. Some projects may be on GitHub or Lighthouse or both. These type of tools, even though they are essential, require the user to set up accounts and configure them. Which means novice users will spend time they don’t necessary have just getting ready to contribute.  Deterring them from wanting to get their feet wet. The people from Universal Subtitles have already thought of this and that’s why they are allowing you to log-in through Twitter, Open ID or Google chances are a new contributor will already have one of these accounts.

Acknowledge Your Contributors

Contributors that spent countless hours working for free should not be taken advantage of. Nor should they wait weeks for someone to look at their work if a review process is a part of the workflow. Thank people for contributing and let them know that their contributions are appreciated. If the work that was submitted isn’t up to par or doesn’t meet the requirements of the project don’t just reject it. Outline your concerns and ask for a re-submission. You should always built a good rapport with other contributors before you tear their hard work to shreds.  If there is no review process a good thing to implement (something also being implemented by Universal Subtitles) is a point system. Contributors get points for each contribution. The points are displayed for everyone to see. This easily turns into a competition of who has the most points and leads to an increase in contributions.

The folks at Universal Subtitles are implementing these and other ideas. For more notes on this session check out the wiki.

View all of my blogs

Open Subtitles Design Summit – Improving popcorn-js

In my previous post I talked about the Open Subtitles Design Summit. I attended numerous sessions one of which was a discussion on how to improve popcorn-js. For those of you unfamiliar with popcorn you can read my previous blogs related to it (link at the bottom) or look at the demo.  People had many interesting ideas however, the most important is giving people the ability to add their own extensions/metadata kind of like you can get extensions for Firefox. For example is someone has a myspace account that they want to incorporate into the metadata how can they go about doing this. Do they need to rewrite our code and make additions or can they fill in a simple form and have the code generated? The answer to this is still in the discussion phase and I welcome your comments. Another game changing comment was the fact that we are making our own XML format as oppose to using a standard. With so many different media players out there doing the same thing, it is pointless for everyone to be inventing different XML formats. We should all get together and come up with a standard that can be incorporated into the W3C specification. This is a great idea that requires a lot of time and efforts.

Here is a list of the other ideas:

  • have an area where images used in the video can be displayed
  • sync multiple devices: for people who like to see the content on different devices. For example the video will play on their TV but the twitter will be displayed on their mobile phone at the correct time. (Doable?)
  • splitting things into different tracts like a twitter track or a wiki track. This way people can add their own tracks.
  • add polls and accept/display answers
  • do everything that youTube does
  • use webSRT format + custom data to streamline content

For more notes on this session check out the wiki.

View all of my blogs on popcorn-js

View all of my blogs

Open Subtitles Design Summit – Interacting with the W3C

In my previous post I talked about the Open Subtitles Design Summit. I attended numerous sessions one of which was a discussion on how to interact with the W3C. The W3C stands for World Wide Web Consortium and its purpose is working together to develop standards for the World Wide Web. Read more here.

For a long time I thought that the W3C worked alone to make these standards and that there was no way of collaboration with them. However, I found out that this was not true. In fact, this is quite the opposite. Let me run down the process. I will be using the SVG specification document for my examples.

Find the technology/ standard you want to talk about

The W3C has 60 different specification documents dealing with different web technologies. Due to the large-scale the W3C has different working groups dealing with the technology/standard. Think of it like a different department of the same company. This means that each department will have their own way of accepting feedback this may include email or bug filing. The link I provided above for the SVG spec document is an example of the Scalable Vector  Graphics technology/standard. To find this document I usually type “w3c svg spec” on Google.

Figure out how to contact the right people

Each specification document follows a similar (if not the exact same) template. The very top of the document tells you when it was last edited. So if you look at my SVG example you will see that it was edited on”W3C Working Draft 22 June 2010″. Further down you will notice a section entitled “Status of this Document”. This section will let you know how to get involved. Back again to the SVG example, you can send your issues via email to www-svg@w3.org. You will also notice that the document states that last call ends on 13 July 2010. What does this mean? Last Call means that the group is believed to have finished the specification. If you believe that the outline specification will not work in some instances you should contact them before Last Call and demonstrate why. After Last Call it is very hard (but not impossible) to change the specs. This does not include clarifications to the documents.

Best Practices for Contact

So you know who to contact but what do you say. The best way to prove your point is to illustrate it. This means provide basic examples of features that you believe need fixing. Basic is the key term here. Attaching a simplified test case is key. Do not include extra css, or libraries that will complicate the code. For example if you believe audio looping is broken (which it may be on Firefox) provide a simple html page with one audio tag with no other div, images, or html elements.  You want people to look at the code and not have to dissect it.

Other interesting features

The “Status of this Document” section also often gives you a link to a test suite. A test suite is a collection of tests that is used to check the browsers compatibility/behaviors. This is the tool the W3C uses to check if any part of the specifications are broken or not supported in the browser. Why wouldn’t a browser support the specification? With the frequent changes it is hard for browsers to catch up. Some browsers choose to support older specifications along with newer ones while others only support the newer ones. Either way the changes wont be available to the public until the browser (Firefox, Opera, Safari, Chrome) releases and updated version.

For more notes on this session check out the wiki.

View all of my blogs

Open Subtitles Design Summit – Look-up discussion

In my previous post I talked about the Open Subtitles Design Summit. I attended numerous sessions one of which was a discussion on how to streamline the process of looking up subtitles. With duplicate videos posted all over the internet it is hard for people to figure out whether or not subtitles for the video they want to watch are available. This means that people can potentially be spending time subtitling a video that someone has already subtitled. But how does one go about searching for subtitles. With so many variations of the same video it is hard to determine which videos are the same. One proposed idea was a standard of identifying media. A unique html tag that would assign a unique id to each original piece of media. If a media was altered this tag would still link back to the original piece. This type of system would allow for track-backs. The creator of the media would be able to figure out who is using their work and who has used it to produce alternate pieces. For more notes on this session check out the wiki.

View all of my blogs

Open Subtitles Design Summit

On September 29 & 30, the Open Subtitles Design Summit brought together roughly forty participants working in a range of disciplines and contexts related to open subtitling. The event was organized by Dean Jansen who is part of the Special Projects team at the Participatory Culture Foundation and also works on the Universal Subtitles project. The goals of the summit was connecting major stakeholders from projects, identifying ways to solve stakeholders’ subtitling needs, and move towards standardizing solutions.  A wiki was started in order to keep a record of the agenda and the generated ideas.

Even though I was unable to make it to the first day I learned a lot on day two.  I attended numerous group sessions which I will be summarizing in subsequent blogs. The sessions included:

Look-up discussion; a protocol or a way to search for video subtitles on the web.

Interacting with the W3C; how to weigh in on W3C standards.

Popcorn-js; what the library is missing.

Building Community; how to make a community around Universal Subtitles.

View all of my blogs

The Importance of testing on multiple browsers!!!

I spent most of last night preparing a demo for my open source project. I was trying to demonstrate the cursor(src, x, y) function I implemented 🙂 yay! So I prepared a simple html page with some processing.js stuff and ran it on my localhost. After googling and referencing multiple examples I got frustrated because my test wasn’t working on my browser! Luckily I decided to take a break (i went to sleep). The next day, I opened my example and it worked!!!!!!!!!!!!! Can u guess the problem? I was testing in Chrome and my example only works in Firefox! Can you believe it?

View all of my blogs