Context is empty on start

I am new to twitch extensions and were trying around with the overlay Extension to get a feeling of it. My problem right now is that I cant figure out how to get properties of the context, like displaysize or ismute etc on start.
If I take a new extension and log the context in the twitch developer rig like that:

twitch.onContext(function(context) {

the output is:


As soon as I change anything of the context by clicking Edit Context, I get the full context:

{“arePlayerControlsVisible”:false,“bitrate”:5000,“bufferSize”:100,“displayResolution”:“800x450”,“game”:“Don’t Starve”,“hlsLatencyBroadcaster”:5,“isFullScreen”:false,“isMuted”:false,“isPaused”:false,“isTheatreMode”:false,“language”:“en”,“playbackMode”:“video”,“theme”:“light”,“videoResolution”:“1280x720”,“volume”:0.5,“mode”:“viewer”}

My question now is, how can I get the full context on start or at least the displayResolution?

I believe on a live channel the context is almost always full (as long as the broadcaster is live of course)

I can confirm this later, once I get to my PC. The reason the first fire is blank or reduced may be down to the rig.

OnContext is also fired about once every 1-4 seconds in a live environment so you don’t have to wait long for updates


You’ve set the rig to a channel. That channel is not live. Make the channel live and you get a “good” payload.

Looks like what you describe might be a bug. As editing one value in the rig causes a full payload to be returned.

Your best solution is to change the view to use a channel that is live and use live data. (Or make the channel you already have set, live)

If you need display Resolution in order to control sizing of your extension there are other options for this. (Get the size of the iframe)

I actually tried with an live channel, but had the same result.

I also tried to get the size of a div i made by Document.getElementById() but I was never able to get any properties of the element. If I tried the code in a usual html context it worked so its not a wrong code. Can you give me a brief explanation what you mean exactly?

The result I want to get is to always know how big the place is that I can use for my extension.

set the body to this css:

body {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

Then get the width/height of body.

Is one solution

but I have to test myself if it is changing right? the onContext thing would notify me if the context is changed, right?

Nope as onContext works fine on live.

so my error, is a bug of the Twitch Developer Rig Tool?

If you are intend to get the new display size when the player changes dimensions, you can do that easier on the live twitch website. As the rig only makes a “fixed” dimension player

okay thanks. in that case I have to live stream on my channel to test it? and use console.log instead of twitch log, right?


heres a relevant code snippet that might help:

window.Twitch.ext.onAuthorized((auth) => {
    // do size check here
var previousContext = '';
window.Twitch.ext.onContext((cng) => {
    console.log('Context', cng);
    if (previousContext) {
        if (cng.displayResolution != previousContext.displayResolution) {
            // do the size check here
    } else if (cng != previousContext) {
        // do the size check here
    previousContext = cng;

I check and do sizing “at boot” and when the context is read as changed.

1 Like