I recently left my job at Mozilla to start a company. Before I do that, I wanted to work on some fun, quicker projects. Hulu With Me lets you watch TV shows in sync with someone else.
A few random notes:
* I wanted this to be frictionless as possible. Click the HuluWithMe button, get a link to send to a friend, and done. Let me know if you have problems or get confused.
* Debugging meant Firefox and Chrome, each running a flash video, each with an extension, and each with Firebug/Inspector open... it's amazing my computer survived. And each time I needed to test something, I had to watch commercials. So, debugging was a bit slow overall.
* This uses node.js + socket.io.
* Sorry non-Americans :(
* If you want to test with yourself on one computer, use Chrome + Firefox (not Firefox twice, etc).
* I couldn’t do Netflix for technical reasons, but would love to. If you know someone at Netflix that can help, I’d love an intro!
How does it work with ads? For example, if I get a 30s ad and the other person gets a 60s ad, does it still sync up?
I watch shows like this (on hulu, hbo go, netflix) w/ my SO fairly often and one thing I found with hulu is that oftentimes our videos get out of sync due to minor glitches here and there, e.g. we'll sync up after the end of a commercial break, but by the next commercial break we're out of sync by 5+ seconds. Just something to keep in mind...
That was the hard part :) I keep track of where everyone is in commercials. If you finish early, the video is paused and it says you're waiting for the other person to finish.
As for glitches: I experimented with a good way to fix this, but settled with just resyncing at every action (pause/play/commercial/etc). It would be annoying to have it keep syncing constantly, and a few seconds due to dropped frames isn't a huge deal.
Awesome work, Greg! You may be interested in following some of the WebRTC work around peer to peer connections http://www.w3.org/2011/04/webrtc-charter.html It's in the distant future but they need real world cases to get the APIs right.
I think this idea is great. One idea I had was creating a real time connection between friends watching the same live sports games in different cities ...
That way they can curse each other out or scream in unision and talk about strategy as the game is progressing.
Hulu phones home every time anything happens, so I use the add-on to watch for new activity and send it to Node. The Node server is actually pretty dumb -- it just adds people to a room, and "broadcasts" any JSON it gets.
Well done! I worked on an Android/Node app a few months ago that also uses socket.io to do the same thing (synchronize video playback among a set of users). I was impressed at how well the Node server performed as the number of users grew, especially compared to a blocking TCP socket implementation.
Did you use any particular js lib to control the video on the players? Or was that part not js.
I ask this because I was doing a server/video player that syncs up to 20 slave audio players with the media, to allow for multilanguage, and did not find anything specific.
The video playback app was on Android devices, so it used the regular Android Java APIs. Still, the chatroom approach that gkoberger describes would work for any platform, as long as each player can play, pause, and seek, and have a separate thread that emits and receives events in the chatroom.
http://popcornjs.org/ appears to be a library for controlling HTML5 video, if that might work for you.
Thanks. I've got a friend who moved across the country. I've been looking for something like this for a long time. Recently we've been using synchtube (http://www.synchtube.com/) which works really well. Now if there were only a way to do this with netflix.
SynchTube doesn't do Hulu, and hangouts wouldn't be able to account for things like pausing or commercials. You could watch and chat, but this add-on makes it so that if one person pauses or skips around, it happens for the other person.
I just sent this to my girlfriend, who is in China this summer while I'm in California. I'd actually been considering the best way to do something like this, so this will be perfect for us - thanks!
I just launched Autobahn, a plugin for banning stories on Hacker News as well as instant profiles with twitter photos. Took me three weeks because I focused on graphics, UI, etc. How long did it take you?
Wow, this is neat! Hulu should hire you immediately.
This sort of thing gets shown at every Netflix hack day. It's technically very doable; my three-year-old out-of-date memories are that licensing constraints--in which N promised to never, ever allow anyone to "frame" their video or support any sort of live user commentary--prevent it from going into production.
27 comments
[ 2.9 ms ] story [ 72.3 ms ] threadI recently left my job at Mozilla to start a company. Before I do that, I wanted to work on some fun, quicker projects. Hulu With Me lets you watch TV shows in sync with someone else.
A few random notes:
* I wanted this to be frictionless as possible. Click the HuluWithMe button, get a link to send to a friend, and done. Let me know if you have problems or get confused.
* Debugging meant Firefox and Chrome, each running a flash video, each with an extension, and each with Firebug/Inspector open... it's amazing my computer survived. And each time I needed to test something, I had to watch commercials. So, debugging was a bit slow overall.
* This uses node.js + socket.io.
* Sorry non-Americans :(
* If you want to test with yourself on one computer, use Chrome + Firefox (not Firefox twice, etc).
* I couldn’t do Netflix for technical reasons, but would love to. If you know someone at Netflix that can help, I’d love an intro!
* Work at Hulu? Say hi!
I watch shows like this (on hulu, hbo go, netflix) w/ my SO fairly often and one thing I found with hulu is that oftentimes our videos get out of sync due to minor glitches here and there, e.g. we'll sync up after the end of a commercial break, but by the next commercial break we're out of sync by 5+ seconds. Just something to keep in mind...
As for glitches: I experimented with a good way to fix this, but settled with just resyncing at every action (pause/play/commercial/etc). It would be annoying to have it keep syncing constantly, and a few seconds due to dropped frames isn't a huge deal.
That way they can curse each other out or scream in unision and talk about strategy as the game is progressing.
I ask this because I was doing a server/video player that syncs up to 20 slave audio players with the media, to allow for multilanguage, and did not find anything specific.
http://popcornjs.org/ appears to be a library for controlling HTML5 video, if that might work for you.
Edit: also, the slanted screenshots above the steps (1, 2, 3) create an uncomfortable optical illusion that the whole page is slanted.
http://news.ycombinator.com/item?id=4197062
So happy we weren't working on the same thing. :)
This sort of thing gets shown at every Netflix hack day. It's technically very doable; my three-year-old out-of-date memories are that licensing constraints--in which N promised to never, ever allow anyone to "frame" their video or support any sort of live user commentary--prevent it from going into production.