Connecting the chat controlled robot to Twitch Pt1

Wow, you guys really stepped up and brought some AMAZING robot names to the table but what DID we end up naming it? I figured out, for the most part, how to make the robot do a thing and setup a new Twitch overlay. It was a little makeshift at the time but it was a start!

This was streamed on Twitch on Jan 3, 2021.

Special thanks to Greg Needel of REV Robotics, @Esden for the robotics care packages and @tigga1986 for the pan&tilt camera bracket design!

00:00:00 Stream Starts
Happy Sunday!
Scotty welcomes the regulars, the Robot says “Hi Twitch!”
Ambrose has just been out and is about to take a nap.
Scotty wants to get the Robot streaming on Twitch TODAY!
Scotty is a little worried as the latency on twitch is a bit high. Remo really flexing with their sub second latency.
Nightbot now has !commands which provides a list of commands.
The robot and Scotty welcome Nosh into chat and thank him for his mod work.

00:03:22 Idea explanation
The robot is going to stream to it’s own twitch channel over wifi.
Scotty wants to add an overlay on the twitch stream that has buttons that chat can press.
The buttons in this overlay on the stream will then control the robot.
Scotty wants to replicate the Remo.tv API to use twitch!
The robot (“Barking” in the background) is a little distracting so Scotty mayu have to turn it off soon.

00:07:35 Trying to prepare the robot for reconfiguration
Scotty shows chat the remo.tv view for people who haven’t seen it and then moves to limit some of the robot’s functions to aid in focus and building the twitch infrastructure.
After a little trouble with commands, almost being rickrolled by alexa, the robot and dog making off with Scotty’s lunch and a massive HypeTrain coming through, Scotty and Ambrose are a little too worked up to get back to the robot

00:23:54 Fetch with Ambrose
Taking @Ja_ames advice and channel point redemption, Scotty goes to play fetch with Ambrose outside, leaving the robot to it’s nefarious agenda

00:26:22 Robot preparation
Scotty comes back from playing fetch and VIPs @Ferferite, congrats!
Scotty successfully mutes the robot and starts to limit more robot functions
It doesn’t take long to limit the robot’s functionality to just tilting the camera – this has been done to keep the background quiet to help Scotty focus on programming.
Scotty explains the twitch overlay extension a bit, focussing on desktop and sets up a very, very brief demonstration.

00:46:47 Naming the Robot
The robot needs to have it’s own name because it needs it’s own channel and that needs a name, etc. etc.
Idea’s?
Scotty starts to write down name suggestions
After a back-and-forth on whether or not Scotty wants to executive decision this before someone stream snipes the name and registers a channel, Scotty Polls it anyway.
SpareParts wins!
Scotty claims https://www.twitch.tv/daspareparts
Scotty performs basic channel hygiene on SpareParts’ Twitch account and sets up the robot to stream to twitch.

01:14:17 Creating the extension and overlay
Scotty creates a project in Twitch Developer Rig to start the overlay extension.
Scotty has some template files from an example project, there is no front end and there IS a backend.
The backend will talk WebSockets between the user and the robot with some authentication eventually.
Scotty tries to setup basic buttons with JavaScript inside of an HTML markup file but the extension viewer doesn’t want to load it!
After loading the extension FrontEnd, the overlay becomes visible.
Scotty creates some simple buttons for left, right, forward, back, turn left and turn right.
With the help of chat, Scotty is reminded of Bootstrap when looking for the “Twitter CSS Layout system” ( https://getbootstrap.com/ )
Robot keeps rebooting, Scotty figures it’s probably the batteries so goes to replace them.
Scotty wants to make the buttons bigger but has to check the Bootstrap documentation to figure out what exactly is being used.
We learn that Logo and BASIC were the first coding languages Scotty ever learned, at school!
https://en.wikipedia.org/wiki/Logo_(programming_language)
https://en.wikipedia.org/wiki/BASIC
Scotty gets the buttons looking better with CSS, following the twitch extension documentation on guidelines and sometimes, just by adding some padding.

01:51:45 How to communicate with SpareParts?
After consulting the twitch documentation, Scotty starts to formulate an idea…. ~ish
“Closures; everyone’s favourite Javascript topic!”
While talking about games he’s been enjoying and what chat likes, Scotty codes away using jquery libraries in JavaScript to setup the functions of the buttons.
In testing, there’s something not quite right, Twitch isn’t seeing the request.
After going through his code, Scotty realizes he must have errors somewhere, his browser’s dev console confirms this.
Now he has a thread to investigate
@SkaveRat helps by reminding to set the CORS header in python ( https://flask-cors.readthedocs.io/en/latest/ )
Scotty is now able to send a request to SpareParts from Twitch but it doesn’t look like a call or command is made.
He rewrites some parts suggested by @SkaveRat and gets a “working” button (A request is sent which calls the right function) after which Scotty takes a quick break
When back from break, Scotty lets on he finds talking and programming at the same time to be difficult.
Some brief chitchat about keyboards, programming and debugging (like pair and rubber duck) ( https://en.wikipedia.org/wiki/Rubber_duck_debugging ) ( https://en.wikipedia.org/wiki/Pair_programming )
Scotty gets back on track; figuring out how to mix websockets and webcalls. He wants to send a message out a websocket when a webcall is made.
Scotty sets up the sockets end in python first.
Scotty gets raided by Roxkstar74, guided by Levelsio who were on an AMA together.
Scotty recaps the stream for the raiders and interacts with chat while another HypeTrain starts
He tries to get back to coding but Ambrose lets him know it’s dinner time.

02:53:52 Make the buttons do a thing!
Navigating around Ambrose’ food shenanigans, Scotty starts figuring out how the Websockets works
He manages to get data pulled out but it’s not entirely to Scotty’s liking as it onl;y seemed to work once and not on subsequent requests.
Scotty troubleshoots through his code with some help from chat and documentation, eventually concluding (though possibly not proving) that worker thread was locking the queue or maybe hogging cpu cycles.
This strengths Scotty’s vision that this should be pub/sub and not queue based as possible multiple websockets in future may suffer performance loss. ( https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern )
However – we now have communication between the client and the robot, so it works for now!

03:18:14 Logging Frustration on controller code
We have commands going from the frontend (client on twitch with the overlay) all the way to the robot so now we need to get the API working.
Scotty wants to repurpose the remo.tv controller code so Scotty needs to make the server act like remo.tv does when the robot connects to it.
gunicorn is modified to allow the server to listen on all interfaces. ( https://gunicorn.org/ )
In testing, Scotty discovers he needs more workers, which are added simply enough.
He then moves to enable access logging to get more information when sending requests so he has an accurate overview of what’s going on through the coding process.
This proves to be unexpectedly challenging with Gunicorn as open issues on Github and interaction with chat and consulting documentation proves.
Scotty starts to investigate flask sockets ( https://github.com/heroku-python/flask-sockets ) to identify the culprit here but decides there must be another way to achieve this.
Scotty promises chat that if anyone knows how to set this up he’ll be their best friend.
Eventually, Scotty turns to Wireshark to try to use it as an access log. Predictably, this works just fine.

03:52:48 Getting the controller code to authenticate
Scotty filters through the wireshark log results only to find the TCP stream is encrypted as it’s a secure websocket.
After a brief venture, @Jalopy_Jones reminds Scotty that this is the entire point of websockets.
This makes using wireshark as logging inefficient as it’ll only show the encrypted stream.
Scotty rewrites the socket code to print the message and finally gets something usable.
Now to grab the reply!
Authentication gives some issues until Scotty finds that chat channels are part of the Auth process.
“Doing some serious surgery”, Scotty removes a lot of remo code and sets Authenticated to TRUE
This still doesn’t give joy so he follows the authentication error to find what conditions need to be satisfied for authentication.
Scotty finds he needs to a ‘d’ data for the host and tries this by adding it to the json he sends through the websocket.
HE manages to force an unknown event type error with malformed data which is good but doesn’t point to any obvious leads for next steps.
Going through the code more, Scotty finds a commented global authentication, he uncomments it and the authentication works.

04:15:52 Making the robot move
Scotty adds buttons and commands to the sockets and tries to move the robot….. to no avail.
But, the robot does give an error, it expects a username in a user object.
Scotty adds these to the server but there’s still no bot movement.
Scotty figures out the ws.receive is blocking messages
He tries to get round it by removing used/closed sockets from the open sockets list
with some minor other tweaks, the robot now moves…. once.
After troubleshooting, writing some code that opens new sockets and going through everything, Scotty figures the open sockets are in other workers.
Time to take a break!

04:53:24 Winding Down
Scotty needs to research how to use websockets.
Thank you all for watching!
Scotty ends stream by Raiding Ryan56k ( https://www.twitch.tv/ryan56k )

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>