Integrate GCode viewer as a Twitch

Development
1

I'm new to development, so I'm starting here.

I started playing around with Twitch's Developer Rig, and I don't see why someone couldn't add an extension that mimics or pulls the gcode viewer and webcam from an Octoprint. I would like to do this so that it appears in a pop-out like the Destiny 2 extension (called a component extension per Twitch, basically a sandboxed iframe). Writing some code to show the live cam is easy, but I'm not sure on how to proceed with the GCODE viewer?

Ways I have thought about doing it:

  1. Use get or scrape the HTML to get the content inside the tab and use the existing .js scripts in my test Octopi.
  2. Stream the terminal live via some sort of tunnel and build my own viewer (wayy difficult and would be off time).
  3. Just scale an Octoprint window to fill in the area.

I'm not finding much, but I was hoping that someone might have tried to either use the built-in rendering in Octoprint or made their own. Any hints or ideas totally welcomed. If anyone is curious about the Twitch Extentions, here's the dev page: https://dev.twitch.tv/docs/extensions

2

The Pretty GCode plugin is an advanced 3D version of OctoPrint's gcode viewer and it has the option to be in sync with print progress. It utilizes three.js for the rendering side.

Edit: It also has a fullscreen mode that then has pop-up panels for other stuff too like the terminal tab, webcam, etc.

3

And the webcam streaming to twitch has also been done (by me and one other) in the RTMPStreamer plugin and webcamstreamer plugin.

4

Thanks, I'll take a look at the code and see if I can wrap it in extensions like I want!

5

One of the main reasons I made PrettyGCode was to stream to Twitch/YouTube. I use OBS Studio and the browser source.