[SOLVED] Viewer.html/js Communicate with PubSub

Extensions
9

Excellent. I have the viewers seeing Chroma effects synchronized with the video.

common.js

  window.Twitch.ext.onContext(function(context, contextFields) {
    //console.log("context", context);
    //console.log("contextFields", contextFields);
    if (context != undefined &&
      context.hlsLatencyBroadcaster != undefined) {
      receiveLatency = (context.hlsLatencyBroadcaster - 1) * 10; //100 ms intervals
	}
  });

I used a receive buffer so when PubSub messages are received I add some blank entries so that messages are received at the right time.

		  //add latency
		  while (receivedBuffer.length < receiveLatency) {
            receivedBuffer.push(undefined); //100ms intervals
		  }
		  //cap the buffer length to maintain sync
		  while (receivedBuffer.length > 0 &&
            receivedBuffer.length > receiveLatency) {
            receivedBuffer.splice(0, 1);
		  }

I have a function being called on a 100ms interval which displays the Chroma animations.

function showChromaState() {
  if (receivedBuffer.length > 0) {
    var json = receivedBuffer[0];
    receivedBuffer.splice(0, 1);

The interval is setup in the auth callback so I know if it’s a viewer or broadcaster.

  window.Twitch.ext.onAuthorized(function(auth) {
    //console.log("auth", auth);
    var parts = auth.token.split(".");
    var payload = JSON.parse(window.atob(parts[1]));
    //var streamer_id = payload.channel_id;
	isBroadcaster = payload.role == 'broadcaster';
	//console.log("broadcaster", isBroadcaster);
	if (isBroadcaster) {
      $('#user-access').text("Designation: Broadcaster");
      setInterval(function() { sendChromaState(); }, 100);
	} else {
      $('#user-access').text("Designation: Viewer");
      chromaSDK.init();
	  setInterval(function() { showChromaState(); }, 100);
	}
  });