Let’s Think Out Loud: Making a Twitch Embed Handler

Posted On

Earlier tonight, I said:

This is because I am looking at writing a new embed handler for WordPress that would allow embedding of a Twitch stream, video, or highlight using just the URL of the video itself. Let’s collaborate on this, because I don’t know what I’m doing.

First, enumerate the options that are available.

Live Broadcasts

The URL to a live broadcast is just the channel URL, like this one:

http://www.twitch.tv/backlogathon/

(Twitch forces “www” but we should probably act like it’s possible it won’t be there when someone adds the URL manually.)

The embed for that URL looks like this:

<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=backlogathon" bgcolor="#000000”>
	<param name="allowFullScreen" value="true" />
	<param name="allowScriptAccess" value="always" />
	<param name="allowNetworking" value="all" />
	<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
	<param name="flashvars" value="hostname=www.twitch.tv&channel=backlogathon&auto_play=true&start_volume=25" />
</object>
<a href="http://www.twitch.tv/backlogathon" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline; text-align:center;">Watch live video from backlogathon on www.twitch.tv</a>

The only thing in there that is provided in the URL is the channel ID, so the embed should assume using full $content_width in the embed handler and provide options for the rest in a shortcode.

There’s also a chat embed, but for the purposes of the media embed it’s not needed. Let’s leave that for the shortcode. We can probably omit the link addition to the bottom of the video, assuming that the blog owner will be adding that automatically.

Archived Broadcasts

Twitch archived broadcasts are referred to by channel ID, then a divider, then the ID of the archived broadcast, like this:

http://www.twitch.tv/backlogathon/b/512356452

The embed for that looks like this:

<object bgcolor='#000000' data='http://www.twitch.tv/widgets/archive_embed_player.swf' height='378' id='clip_embed_player_flash' type='application/x-shockwave-flash' width='620’>
	<param name='movie' value='http://www.twitch.tv/widgets/archive_embed_player.swf'>
	<param name='allowScriptAccess' value='always’>
	<param name='allowNetworking' value='all’>
	<param name='allowFullScreen' value='true’>
	<param name='flashvars' value='title=It%2BCame%2Bfrom%2Bthe%2BBacklog%2521&amp;channel=backlogathon&amp;auto_play=false&amp;start_volume=25&amp;archive_id=512356452’>
</object>
<br>
<a href="http://www.twitch.tv/backlogathon" class="trk" style="padding:2px 0px 4px; display:block; width: 320px; font-weight:normal; font-size:10px; text-decoration:underline; text-align:center;">Watch live video from backlogathon on TwitchTV</a>

The same bits from above would seem to apply here. We can omit the link at the end, and assume we want the video to span the content width.

Everything else we’ll leave to a shortcode, which will need some regex anyway.

Edited Highlights

Once you have edited a clip using the built-in tools, it’s available at a different URL, but much the same as the archive one:

http://www.twitch.tv/backlogathon/c/3915617

It generates this embed:

<object bgcolor='#000000' data='http://www.twitch.tv/widgets/archive_embed_player.swf' height='378' id='clip_embed_player_flash' type='application/x-shockwave-flash' width='620’>
	<param name='movie' value='http://www.twitch.tv/widgets/archive_embed_player.swf'>
	<param name='allowScriptAccess' value='always’>
	<param name='allowNetworking' value='all’>
	<param name='allowFullScreen' value='true’>
	<param name='flashvars' value='title=Titanfall%2B-%2BCTF%2Bon%2BCorporate%2B-%2B4.7%2BK%252FD%2BRun&amp;channel=backlogathon&amp;auto_play=false&amp;start_volume=25&amp;chapter_id=3915617’>
</object>
<br>
<a href="http://www.twitch.tv/backlogathon" class="trk" style="padding:2px 0px 4px; display:block; width: 320px; font-weight:normal; font-size:10px; text-decoration:underline; text-align:center;">Watch live video from backlogathon on TwitchTV</a>

Repeat the above.

I don’t think there are any other URL possibilities with Twitch, or at least I have not seen them yet.

So that’s the list of what needs to be figured; next step (which I’m currently avoiding and/or failing at) is writing the correct regex and the handler for it.

4 comments on “Let’s Think Out Loud: Making a Twitch Embed Handler”

Comment navigation

  1. I like this a lot. What follows is my stream of consciousness as I follow along with what you’re doing and try to catch up. Not sure how to do URLs in a WP comment (can I use a href?), so the formatting is sloppy. But it’s free help, so deal. :)

    Step one is this Codex page: https://codex.wordpress.org/Embeds

    Which tells me that since Twitch doesn’t support oEmbed, I should be using wp_embed_register_handler:
    https://codex.wordpress.org/Function_Reference/wp_embed_register_handler

    And that function requires regex, which I’m guessing is how you’ve gotten to this point.

    Using your example, there are three URL “types” — for lack of a better word — that we’re interested in:

    http://www.twitch.tv/backlogathon/ — the live stream
    http://www.twitch.tv/backlogathon/b/512356452 — archived broadcasts
    http://www.twitch.tv/backlogathon/c/3915617 — edited highlight

    I see that wp_embed_register_handler allows you to specify a precedence, which means we mark the more specific URLs with an earlier priority, so the archived and edited clip URLs will get checked before the live stream one, since for the stream we’re going to have to say “any twitch.tv URL that’s not already processed” to get it to work. In other words, you can’t check for that URL because it is wholly included in the other ones, so it gets a later priority.

    In my head, then, I see three separate calls to wp_embed_register_handler, one for each of the URL formats detailed above.

    So let’s see if we can’t work on the archived broadcasts URL a bit. We want to get any URL of the format http://www.twitch.tv/{username}/b/. To do this, I’m using these two tools:

    A graphical tutorial on regex, specifically image #6: http://code.tutsplus.com/tutorials/8-regular-expressions-you-should-know–net-6149
    A regex tester, which I’ve fed the /b/ link we’re discussing: http://www.freeformatter.com/regex-tester.html

    Playing around with this for 15 minutes gives me a final regex of “^[(http|https)://www.twitch.tv/]+[a-z0-9-]+/+[b]+/”, which will return true if the pattern http://www.twitch.tv/{username}/b/ exists. One flaw already. It requires the “www”. Something to work on, I suppose. But it allows for https, so that’s something!

    Still to be determined is how to extract the username from the URL and feed it to the embed html object. Might need to pour another beer first.

  2. A ha! I got something useful. Can I use HTML formatting in a comment? Does it support code blocks, or the blockquote tag?

    1. I don’t think it supports code blocks, but you could link a gist.

      1. We start by plugging the URL to the archived broadcast into this page:
        http://txt2re.com/

        That gets us a visually overwhelming result, but it’s pretty simple. The way this tool works is you click on the part of the string result you’d like to match, and it’ll return ways to access everything up to and including that point.

        In this case, I clicked on the “int” under the “512356452” towards the very right. After that, click “PHP”, and you’ll see this: http://txt2re.com/index-php.php3?s=http://www.twitch.tv/backlogathon/b/512356452&-20&6&4

        Upload that to a server somewhere and run it. It spits out three variables: “backlogathon”, “b”, and “512356452”.

        It’s actually pretty ingenious how this tool works; it makes a bunch of mini regex patterns to identify each piece of your string, and then smashes them all together into one big pattern at the end. This makes it a handy tool for learning, as you can see what each individual piece is doing and tweak them to see how they behave.

        But the PHP code is messy, and the resulting regex will apply to any string, not just twitch.tv, which may complicate the wp_embed_register_handler() stuff that comes later. So we do a few minutes of cleanup on the “mini” regex patterns and put it all together into a well-documented piece of code: https://gist.github.com/anonymous/9700974

        That should get you to a point where you’re ready to attempt wp_embed_register_handler().

Comments are closed.