Twitch Extension Development Process

Create a Twitch Extension

  1. Open your Twitch Developer Account.

  2. Click Dashboard.

  3. Click Create Extension.

  4. Choose a name for your extension. (It can be anything.)

  5. Click Continue.

  6. Under Create an Extension Version select Panel ‣ Video - Fullscreen.

  7. Enter something in Summary.

  8. Click Create Extension Version.

We use the Twitch Extension Configuration Service, so you need to activate it.

  1. Select the Capabilities tab.

  2. Under Select how you will configure your extension select Extension Configuration Service.

  3. Click Save Changes.

Associate the Twitch Developer Rig with Your Extension

  1. Open your Twitch Developer Rig.

  2. Log in using your Twitch Account Credentials, if necessary.

  3. Click Add Project?.

    Note: If this is the first project you’ve created, click Create Your First Project and skip the next step.

  4. Click Create Project.

  5. In the first drop-down menu under Select Existing or Create New Extension, select the Twitch Extension you just created.

    Note: If you don’t see it, click the Refresh button.

  6. Click Next.

  7. Select the folder for your Twitch Extension project.

    Note: In this case, it is samplestwitch. In general, it has to be the parent of the folder where your files are served.

  8. Select None - I’ll use my own code as your template.

  9. Click Next.

  10. Click Get Started.

    This creates a JSON file in your project folder with all information related to the dev rig and project.

Things to consider when using the Twitch Developer Rig

  • Twitch files (assets) that are served locally are sent by a web server on a random port.

  • Update your configurations using the Configuration Service Panel. Configurations changed through the extension views don’t seem to work.

  • Although you won’t get a CSP error in the Developer Rig, you still must make sure you comply to the Twitch Guidelines and Policies before going into hosted test or production.

Twitch Context

Twitch Context is triggered once per second. In our Genvid Client, we need the hlsLatencyBroadcaster to calculate the latency between the Genvid stack and Twitch platform.

The Twitch onContext callback must be bound to the Genvid Client to retrieve hlsLatencyBroadcaster. To do this, use an event listener on the twitchoncontext property of the Genvid Client video_player object.

Caution

If you listen directly to the TwitchExtension JS API event onContext, it will break the Genvid Web API. To avoid this, go through the Genvid JS API event system instead.

To use onContext, listen to the ‘twitchextoncontext’ event by calling addEventListener() on videoPlayer.

On the Twitch website, the hlsLatencyBroadcaster value is generally 2 seconds or less. However, the Twitch Developer Rig default setting is 5 seconds. To simulate the correct latency in your Twitch Developer Rig, lower that value with the Edit Context button.

Other things to be aware of:

  • Keyboard event listeners ARE NOT ALLOWED in a Twitch Extension.