Embedding Twitch into WordPress with WP Twitch
I’m going to start testing out live video streaming of open source projects. I’ve been a viewer of Twitch.tv for a while and have recently started checking out LiveCoding.tv.
To make it easy to find my stream, I figured I’d embed it directly on my WordPress blog. While there are a few plugins that purport to do that through WordPress widgets or shortcodes, they each have a major limitation: they always showed up. In my case, I only want the stream to show when I’m broadcasting, not waste time with a black box in the middle of the page.
I decided to dust off my PHP skills (which I haven’t touched in many years) and write my own plugin. Thankfully, Twitch provides an intuitive, anonymous API and WordPress plugins are incredibly straightforward.
Figuring out when the broadcast is active
In order to figure out whether a Twitch channel is actively broadcasting, we can query the REST endpoint at https://api.twitch.tv/kraken/streams/{$channel} (in my case https://api.twitch.tv/kraken/streams/bertjohnsondotcom).
If “stream” is “null”, the channel is offline. Otherwise, it has a JSON object describing the stream.
My plugin simply checks that value and if it’s online, shows the Twitch IFRAME.
Supporting HTTPS
The normal way to embed a stream is by creating an IFRAME with a source of http://www.twitch.tv/{$channel}/embed (http://www.twitch.tv/bertjohnsondotcom/embed in my case). You’ll notice that’s over HTTP, but I use CloudFlare for SSL offloading to ensure all connections are performed over HTTPS.
By default, Twitch doesn’t support HTTPS streaming yet. It’s been on the roadmap for a while, but any attempts to visit https://secure.twitch.tv are redirected back to the HTTP version. When embedding the HTTP version of Twitch, you won’t see the content or even a warning on the HTTPS site in most browsers. Instead, it will silently fail.
To work around that, I found an HTTPS Flash endpoint available on Justin.tv’s CDN (which was the precursor to Twitch.tv). There’s a definite tradeoff, as requiring Flash means this won’t work on many browsers (including the vast majority of mobile platforms), but I consider that better than allowing non-encrypted traffic.
That Flash endpoint is available at https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.rfc07d37fc4eed1d17243b452dd3441665496e1e0.swf?channel={$channel} (https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.rfc07d37fc4eed1d17243b452dd3441665496e1e0.swf?channel=bertjohnsondotcom in my case).
Hopefully this is a temporary workaround and Twitch will support HTTPS everywhere soon.
Getting the plugin: WP Twitch
You can find source code for the WP Twitch plugin on GitHub at https://github.com/bertjohnson/WP-Twitch. You can download the ZIP archive from https://github.com/bertjohnson/WP-Twitch/releases/download/1.0/wp-twitch.zip.
I’ve also submitted it to the WordPress plugin directory. Since this is my first submission, it might take some time for review before it’s widely available.
It’s incredibly simplistic, but should meet most needs. I’ve embedded it into my theme via shortcodes, but it works just as well as a widget. Suggestions welcome.
The end result
Here’s a sample from my wife’s site, ToniJ.com:
