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

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

  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:

    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.

      1. We start by plugging the URL to the archived broadcast into this page:

        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().

Leave a comment: