Stream DirectX Sample in Twitch Developer Rig

Once you’ve finished all the steps required to set up the DirectX Sample to work via the Twitch Developer Rig, there are a few more steps required to run the sample.

Note

This information is dependent upon systems maintained by Twitch. We do our best to keep it updated, but you should see the Twitch developer documentation for the latest information.

Add the Genvid Libraries

From the Genvid MILE SDK root folder:

  1. Go to the api/web/dist folder.

  2. Copy genvid.umd.js and genvid-math.umd.js.

  3. Paste both files to the samples/cube/twitch-extension/js folder.

Add the Three.js Library

You can download the library from the official three.js Github here.

  1. Put the three.js in /samples/cube/twitch-extension/js.

  2. In /samples/cube/twitch-extension/video_overlay.html add a <script> tag between the head tags with a src attribute pointing to the file you just downloaded.

  3. Example:

    <script src="js/three.js" type="text/javascript"></script>
    

Host Front-end Files

First, you need to tell your Developer Rig where the front-end files are hosted.

  1. Open your Twitch Developer Rig.

  2. Click Project Details.

  3. Next to Host your front-end files, click Select.

  4. Select the folder where you saved your overlay files (/samples/cube/twitch-extension).

  5. Click Select Folder.

  6. Click Run Front End.

At this point you’ll see the message Running… and a window for the Developer Rig Web Server log will pop up showing the current file being served.

Create Extension View

Next, you create an Extension View which will hold the Genvid overlay.

  1. Start your cluster.

  2. Make sure that it is streaming in your Twitch Channel.

  3. In your Twitch Developer Rig, click Extensions Views.

  4. Click Create New View.

  5. Select Overlay.

  6. Type a name for your view under View Label.

  7. Select the Overlay Size.

    This should be the same as the setting in your cluster. (Probably 1280 x 720.)

  8. Click Save.

Your stream should now be embedded in your Developer Rig.

Set Configuration Service for local cluster

Now you set the endpoint to connect to for your cluster to authenticate and then connect to a web socket.

  1. Click Configuration Service.

  2. Under Configuration Type, select Broadcaster.

  3. Click Fetch Configuration.

  4. Paste the following JSON object in the configuration box.

    {"web-endpoint":"https://[::1]:{web_server_port}/api/public/channels/join"}
    
  5. Replace {web_server_port} with the port for your cluster. To find the port number:

    • Go to the Health page of your Cluster UI.

    • Click web.

    • Copy the Port value.

    Cluster UI Health Page
  6. Click Save.

The Extension Views window should now show the DirectX stream and 2 orange buttons. If not, click Refresh All Views.

Set Configuration Service for cloud cluster

Now you set the endpoint to connect to for your cluster to authenticate and then connect to a web socket.

  1. Click Configuration Service.

  2. Under Configuration Type, select Broadcaster.

  3. Click Fetch Configuration.

  4. Paste the following JSON object in the configuration box.

    {"web-endpoint":"https://<cluster>/api/public/channels/join"}
    
  5. Replace <cluster> with the name of your cloud cluster web endpoint. To find it:

    • Go to the Settings page of your Cluster UI.

    • Click Config.

    • It will be the value associated to the cloud/endpoint/web key.

    Cluster UI Settings Config Page
  6. Click Save.

The Extension Views window should now show the DirectX stream and 2 orange buttons. If not, click Refresh All Views.

Note

The Twitch Developer Rig doesn’t populate the Twitch onContext callback, nor does it trigger the callback every second. This lets you decide when to trigger onContext based on what you need for your own project.

Because the Genvid MILE SDK relies on the hlsLatencyBroadcaster property, you need to trigger a context modification at least once to start your overlay.

  1. Click Edit Context.

  2. Change the hlsLatencyBroadcaster value.

    A typical value is around 2 sec, but you can adjust it based on your own environment/network.