justin tv

Evening project: GamerChannels.com

September 18th, 2011

Most normal people I know have at least one sport they try and keep up with. Could be Football, Tennis, or maybe even something like competitive Poker.

Myself? I’m a fan of competitive video games. Starcraft, specifically.

It’s a geeky choice for evening entertainment, but I’m definitely not alone in my programming selection. Over 60,000 people tuned in from all over the world this past weekend to watch a live tournament in Spain called DreamHack. Some events see even more attention than this—and the winners often take home prizes in the tens (or hundreds) of thousands of dollars.

A lot of the individuals who “cast” live video streams use live video streaming service Justin.tv. JTV is great, but I find it a little difficult to navigate my way around the site, or watch video on my tablet. Thankfully, JTV has put together an API that has allowed me to create my own customized stream browser :)

I spent some time last night putting together a basic video browser with the API that tracks some of my favorite streams. I don’t currently have any plans for it, but I’m hosting the app at GamerChannels.com for the time being.

With how much momentum I’ve seen competitive gaming gain in the past 2 years, who knows… I may invest some more time into this project so it will be more useful for others.

Justin.tv Error #2048

September 17th, 2011

Just spent the past 2 hours troubleshooting a problem I was having with the Justin.tv API. Thought I’d save a few headaches for anyone else who runs into this problem and post about it.

I was having no trouble getting the API to do the things I wanted, but the Embed code for streams seemed to be borked.

I kept getting: “Something went wrong: Error #2048″

Did some digging and wasn’t able to find any error code documentation. I couldn’t even get embed codes working directly from channels.

Turns out that for whatever reason, Justin.tv doesn’t like “localhost”. That’s a pretty strange quirk… not sure if it’s intentional or not (haven’t seen any mention of it in the API documentation). I added a new host “test.local” and was immediately able to see the embed codes working.

Guide for setting up custom hosts on Mac →
…and on Windows →

This is what developing web-based JTV Apps for Android looks like

May 13th, 2011

Sad day. Turns out that the Justin.tv Javascript API doesn’t work for Android devices. Maybe their Live Video SWF aPI works with Android, but Flash is the culprit and reason I wanted to work with the API in the first place. It would be really awesome if JTV had more choices for how you use their API—including a non-flash based way to stream video so developers could design applications for most new mobile devices.

This isn’t a complaint; I think services like JTV opening up their platform for developers will lead to some great things in the next few years. I’ll bet that the first big player to build out a strong platform that is cross-device compatible is going to explode in popularity.

Anyways, I didn’t get past just building a simple test, so not much time wasted here. I’m not happy with the controls on the flash player for Justin TV when watching on my Motorola Xoom, and wanted to build a more reliable interface for myself and other Android users. The flash controls are clunky, slow to respond, and I can never seem to hit the right button (often times stopping my video, and forcing me to redirect to a justin.tv channel page when I’m watching from a pop-out or embed).

I’m sort of a beginner when it comes to building out these sorts of things, and there weren’t any good examples for getting a basic stream running in JTV’s docs. If you’re new to this sort of stuff, here’s the code I used to build out a basic player:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JTV for Android</title>
<link href="stylesheets/reset.css" rel="stylesheet" type="text/css">
<link href="stylesheets/common.css" rel="stylesheet" type="text/css">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://www-cdn.justin.tv/javascripts/jtv_api.js"></script>
<script src="javascripts/app.js"></script>
</head>
 
<body>
<div id="player"></div>
</body>
</html>

Javascript (app.js):

$(document).ready(function() {
 
	var gid = document.getElementById;
 
	var options = {
		channel:'theleggett',
		consumer_key:'e6ql03EOgx31mZgQfopQ',
		auto_play:true,
		custom:true,
		width:480,
		height:360
	};
 
	var player = jtv_api.new_player('player', options);
 
});