Build Custom Twitch Bots & Overlays

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

Jason: Hello, everybody. And welcome to another episode of Learn with Jason. Today we have LuckyNoS7evin. Thanks for coming by.

LuckyNoS7evin: I'm not doing too bad. Getting the food out of the way, doing a stream with you.

Jason: I'm looking forward to this one because one of the things I that I love most about Twitch and the broadcast platform of Twitch is the customizability of it and the fact that we can play. So, building something like this and just kind of talking about the platform in general, it's such a it's a fun like meta like a meta stream, right?

LuckyNoS7evin: Definitely, definitely. And it's well, it's led to what my current day job is as well. Probably something we'll talk about during the stream.

Jason: Yeah.

LuckyNoS7evin: It's crazy what you can get out of it and do with Switch.

Jason: For those not familiar with your work, do you want to give us a background of who you are, what you do?

LuckyNoS7evin: Okay, so, you can see here, it's LuckyNoS7evin. I have been streaming on Twitch, September 2010. But officially, only about three years ago. Because I took a seven year hiatus. Now, what I have been doing since then is I have been doing Twitch bots, Twitch overlays, everything like that. When extensions came out in September '17, I have been doing both. I got recognized by the Twitch department and they said, let's do an associated stream. I created an extension in 3 hours and did an extension speed run.

Jason: Nice.

LuckyNoS7evin: That was a lot of fun. I spoke at TwitchCon Developer Day in 2018. And got invited to do a contract in 2019 which was featured chat. Which you may have seen on stream.

Jason: Featured chat, that's the highlighted message, right?

LuckyNoS7evin: Yeah.

Jason: I haven't used it. People use it in the chat itself.

LuckyNoS7evin: So, yeah, feature chat was something built for Twitch for TwitchCon 2019.

Jason: Nice.

LuckyNoS7evin: And they said you can come back and do it for 6 months. I'm 5.5 months into the 6 month contract which ends next month. So, that is me. As a day job. It's like, yeah, this is pretty fun. I sit here in my office and that's what I do. And I'm just sort of around Discord and around Switch all the time.

Jason: Yeah, yeah. That's a lot of fun, though. And the Discord, I think, is a very interesting I don't think we'll get too deep into Discord today. But I've really been impressed with Discord as a platform of a kind of if you think about, like, how they talk about third places. Like you've got your home, you've got your office and the coffee shop or the community center or the place you hang out with people. I think Discord has become a really interesting version of the third place. Especially now during the pandemic where people are kind of shut in, they can't go outside. We're looking for places to hang out with folks. And I feel like Discord has been such a welcome outlet for that.

I'm in a Discord called the party core Discord. That is active all day. People in voice chat hanging out. A lot of times sitting quietly, just in each other's presence. It's such an interesting thing to see. But, you know, I'm in a bunch of Discords. I'm in the live coder's Discord, which you and I are both in. The live coders, if you don't know, it's a collection of Twitch streamers who stream about code. It's a cool group, lots of cool things. And that's a Discord as well. I have seen it come up as a thing for events. The platform is really, really interesting. I think it's got a lot of potential.

LuckyNoS7evin: And is sort of took over where Team Speak left off. Team Speak is used quite heavily, especially if you want the huge servers that are around. But it took over from that little niche of we need some small team speaks to get this team together. And it just took over from that. And if took over from Twitch communities as well. Because, there was the Twitch app, which did have its chat servers. But they got shut down sometime last year. No one used them. Everyone was moving to Discord and everyone was having their own Discord community and Discord service. So, yeah.

When you sort of get that, I think Discord is one hell of a little bit of software that they've come around and sort of created.

Jason: Yeah. Okay. So, that's a good little gush for Discord. And what we're going to be talking about today and diving into is Twitch.

LuckyNoS7evin: Yes. Justin: Twitch is fascinating the history of Twitch is interesting. That was Justin TV, right?

LuckyNoS7evin: It was still Justin TV until 2014, I think?

Jason: Okay. And so, maybe you can confirm this because the way that I understand it in my head is that the origin of Justin TV is that someone named Justin just pointed a camera at himself and put that on a website. And then somehow that grew into livestreaming as we know it today.

LuckyNoS7evin: Pretty much.

Jason: Such a fascinating. What a delightfully weird Internet story.

LuckyNoS7evin: And interesting enough, Justin TV was his IRL streaming. It wasn't about game streaming back then.

Jason: That's what I think is interesting. Twitch came out Justin TV was this idea of like, what if I was always available on the Internet? And that kind of morph into Twitch, the gaming platform.

LuckyNoS7evin: Yes.

Jason: And then Twitch the gaming platform has been expanding. And when you look around, there are cooking streams, there are knitting streams. There are people playing board games. There are a whole bunch of coders and just about anything you can imagine, you can probably find somebody streaming it on Twitch. It's amazing.

LuckyNoS7evin: And was just said, we came full circle. Started as IRL, morphed into a game streaming platform very, very quickly. So, I was my user ID is in the 14 million. So and I know that somebody was two years before me was in the 12,000s.

Jason: Wow.

LuckyNoS7evin: So, in 2 years, it was 14 million users. Almost.

Jason: I guess that's the hockey stick shaped growth that everybody talks about.

LuckyNoS7evin: And I don't know, but the code is in the something millions. I don't know the official sort of and they do increment automatically. But they are not classed as numbers, funny enough.

Jason: Yeah, Ben. Sometimes I do make breakfast. I stopped recently. But for a while, I was doing a Sunday morning breakfast where my partner and I would just cook and turn on a camera and talk to the chat while we cook breakfast. Because we do slow brunches and stuff like that. It was an hour or two of streaming. And that in and of itself is kind of an odd thing to say out loud. It feels natural and community driven to have that kind of thing happening. To turn on my Twitch stream and talk to the people on my Twitch stream when I make breakfast does not feel weird. But when I said that out loud, it felt weird. Sometimes

LuckyNoS7evin: To people not in that circle, yes, it's weird.

Jason: Exactly. What do you think is behind the phenomenon? Why do people come to Twitch? What is the why does somebody want to watch somebody play a video game instead of playing the video game themselves? Coding. What do you think is driving that?

LuckyNoS7evin: On the video game front, it's living vicariously. Because a lot of people cannot afford $80 game after $80 game after $80 game. And you do have to like, you do have to pick and choose your game. And I know a lot of people that just buy one game a year. And that's the next version in the game that they bought the previously.

Jason: Yeah.

LuckyNoS7evin: Because that's what they know, like and do. And if they have any extra cash, they want to know if I'm gonna buy another game that is not the usual that I buy what am I gonna buy? Twitch is the perfect place to go. I want to see what this person is doing. And I think it also has also grown from that. So, now it's all about the personality of the streamer. One of the guys that got me back into streaming, back in early '17 was CohhCarnage. About good vibes and gaming. if somebody in the chat goes blah, blah you're out of there! But really happily.

He will answer questions and go through the response. And he just loves that whole just giving good vibes, basically.

Jason: Yeah.

LuckyNoS7evin: On that one.

Jason: Yeah. I find that's an interesting thing. Twitch it's a broadcast platform. But it's not a broadcast platform in the traditional sense. It's not television. It's not, I'm on a screen and you're observing the screen and that's all there is to it. And it's not real time. Because there is a little bit of delay. But there is that level of interactivity. Like you participate in a Twitch stream. You don't just watch. And you can. You can obviously just turn it on and put it on in the background and that is what it is. But you have the opportunity you can affect what happens on screen.

You can ask questions. The streamers that I like the most, they help they have the chat, help co author whatever adventure they're having today by like, you know, hey, what are we gonna build? And the chat will give ideas or something like that. And I think that's so much fun. And that's what really attracts me to this platform. That's why I use this versus something like Facebook Live or whatever. Is that we have the opportunity to to make it more interactive, to make it more playful. And to make it less of a, I am the creator and you are the consumer. And to turn it into a co creation.

LuckyNoS7evin: Yes.

Jason: That's what we're talking about today. Twitch bots, overlays, that's what they enable. What's your experience been? What are some of the favorite things you have seen created in the space?

LuckyNoS7evin: Okay. So, there's a couple of things sort of over the past 3 years where it's sort of improved and gotten changed as well. So, back in '17, the reason I got into coding streams, I started doing a few game streams and things like that, was it a company called Revlo. One of the original bots. Was shutting down. Because they couldn't afford their servers anymore. They couldn't do that. I was like, fine. I'm going to make me own bots. What I did is I streamed it.

Rather than going what was Ankhbot, which was then Streamlab's chatbot, some of the others. Sod it, I'm going it make my own. It's an experience and I can show it on screen. So, I started doing that. So, it was little things that when you did something in chat and got a reward from it, it would reply to you. And this whole bot mechanism in chat. And then you would put something on screen. So, I created a scoresheet. It was just I randomly did slots and came back with the results of that. So, it's little things like that. That you saw that added interaction.

And that added it's not really keeping people in your stream. Because a lot of them are there just to watch you. Sorry. A lot a lot of them are there to watch you doing code. They're not there to play with the slot machine. And yes, they love playing with it, because it's there. And because you're actually currently coding it on stream.

But that it's those extra little interactions that do help a little bit. And they do make people think about coming back. Like you've got the chat thing down here. That's just popping up every now and then. And you have the emotes Spam popping around. They add to a stream. They add to the interactivity. People can see the instant gratification. Something is going on, excellent, and I can affect it. And the one major thing I've seen recently, and I did work on, if you see a channel called Artificial Next...

Jason: I haven't.

LuckyNoS7evin: It's in the third season. The first two seasons were AI. And it's is that a period?

Jason: It does three things. You can make my arms flap with flap. You can grow the beard with the grow command. And then you can also make my beard shorter with the shave command which I don't know that anybody's ever actually fully shaved me. But, look, it's terrible. You shouldn't do that. So, you should only

LuckyNoS7evin: You've got the raised eyebrow.

Jason: This was a brilliant Cassidy Williams built that. We did a stream together where she that's a fully HTML and CSS creation.

LuckyNoS7evin: Nice.

Jason: And I just hooked it up to the chatbot. It's really fun.

LuckyNoS7evin: So, it's a live scripted show, and they can vote on what comes next.

Jason: Oh.

LuckyNoS7evin: They did two seasons. In the first season they won an Emmy.

Jason: Interesting.

LuckyNoS7evin: This season was a little bit interesting. I worked on gathering up chats, gathering up sentiment on chats and pushing those sentiments or everything like that off to a composer which another company were working on. And that composer would take the sentiments in how the rate of incline or decline in those different sentiments and compose the score for the show.

Jason: What? That is oh, man. So, this is the future that, like, this is one of those things that is both the coolest and most dystopian thing that I can imagine, right? Is like that I as a consumer dictate the future of my own entertainment. By my level of interactivity with the thing that I am observing, I determine the future of that thing.

LuckyNoS7evin: Yes.

Jason: It's such a cool thing. It can be very cool, or it can be very silo y, depending on how you apply this technology. But I love that idea of people are watching this and the chat feels happy. And the music becomes happier as they that's ah, that's amazing.

LuckyNoS7evin: Yeah. And there were four sentiments. One was sad, happy, mysterious and do you know what? I can't remember the fourth. That was the way it went. And in the first show, they were introducing and sort of telling chat how it works. And literally live on stream they were like, okay, for the next show, we'll add the sentiments for pizzas. For example, frozen pizza became a sad sentiment.

Jason: Accurate.

LuckyNoS7evin: Pineapple on pizza was mysterious.

And so, the so, they actually put those into the analysis for the week after. And I think they're still in there. But, yeah. Every single week sort of changing the words and making sure the system learned from what it was actually receiving and going in the right direction. But it was it was a lot of fun.

Jason: That is so much fun.

LuckyNoS7evin: Frozen pizza, very, very sad.

Jason: All right. I don't think we have the time to build a full AI sentiment analysis bot. But we do have the ability to build a bot on stream today. If you don't mind, I would love to just jump in and let's start writing some code here. I'm going to switch over to our pair programming view.

LuckyNoS7evin: No problem.

Jason: Make sure you go follow S7evin on Twitter, follow on Twitch. What should we do first? What should my first step here be?

LuckyNoS7evin: Do you know how to set up a Vue app? So, just Vue, create anything. So, whatever you would like to do.

Jason: I don't do I have the

LuckyNoS7evin: Do you have Vue?

Jason: I don't. But I can npx Vue, is it just create?

LuckyNoS7evin: Create, space, and then the name of the folder or the app.

Jason: Let's call it Twitch bot, or Twitch overlay.

LuckyNoS7evin: Yeah.

Jason: Not found Vue. Do I need it to be Vue CLI?

LuckyNoS7evin: Yeah, try that. Oh, there you go. And then a couple of other installs after this are dc

Jason: And command, all right. I need to npx, Vue/cli we're gonna get there.

LuckyNoS7evin: You know, it's one of those things. We coded.

Jason: I primarily work in React. So, all of my tooling is built around that.

LuckyNoS7evin: I'm sorry.

Jason: It's all right. I've done a couple Vue streams. It's been really fun. So, I'm always excited to try new things out. You hackers you dirty hackers. Yep. That's about the level we're working at.

LuckyNoS7evin: Yep. Good evening, everyone. Or afternoon. Or whatever time it is for you.

Jason: Yeah, it's good to see you. I think I need adult supervision here. I have adult supervision. Should I keep the default?

LuckyNoS7evin: Me! Me!

Jason: You're my adult supervision. You're all I got.

LuckyNoS7evin: Yeah. That ain't working either. Right. Okay. So, have we got that. Just go, yeah, defaults. That'll do for now.

Jason: Okay. There's a time out on the command so they don't run every 10 seconds.

LuckyNoS7evin: Thank god for time out.

Jason: I have one that I keep meaning to migrate the bot running now is one called Stream Blitz. It's a fun thing. But I have an old one that I call Blitz Jack and the. robot. It's been on the frits. But it has my favorite thing, the corgi stampede. I don't know if it's going to work. It was muted last time. I don't know why.

LuckyNoS7evin: Use npm, that's going to be interesting.

Jason: It should be. And if I need to, I can delete the yarn.lock and switch to npm. Thank you, Brian. Thank you for stopping by!

LuckyNoS7evin: Npm might be good on this one.

Jason: I'm going to delete the yarn.lock. And do the npm install.

LuckyNoS7evin: That looks good. Right. So, what we want to do is we want to install switch chat client.

Jason: Okay. Yes, pandemic those, boops, Brian. We have only covered the screen in boops once. Thank you, for stopping by.

LuckyNoS7evin: I've worked on a couple of my own overlays in the past. I've got a split flap board. Do you know the old train station, Flatboards?

Jason: That was your project?

LuckyNoS7evin: Yes.

Jason: That was such a cool project! I didn't realize you worked on that.

LuckyNoS7evin: Let me get the URL.

Jason: Twitch.stream.client?

LuckyNoS7evin: Chat client.

Jason: Okay.

LuckyNoS7evin: Okay. So, what we'll do is we'll go into let's grab open up source and app.vue. Yep, that will do. And scroll down. And you have a component in here with hello world. We don't really need that. So, what we do is you do import. Replace the import HelloWorld.

Jason: Okay.

LuckyNoS7evin: And we'll do import just say chat client or however you

Jason: Oh, look at the raid. Thank you for the raid C sharp frits. You hackers, you dirty hackers. I know, Bobby tables, I need to take that one down. It's too cringy. I did it to be cringy and it's like too cringy. So, what am I importing? Sorry?

LuckyNoS7evin: Chat client from Twitch chat client.

Jason: Okay.

LuckyNoS7evin: Get rid of the components section of your export default and put in a data section. If you do nope. With Vue it's a method based. So, it's data method.

Jason: Got it.

LuckyNoS7evin: Put the curlies in.

Jason: Like here?

LuckyNoS7evin: And you return an object.

Jason: Okay.

LuckyNoS7evin: put in here, chat client, nullify it for now.

Jason: Right. Because it's an object.

LuckyNoS7evin: Right.

Jason: Believe it or not. Thank you very much for the subscription, J. And don't forget, Spam those boops. Oh, some bits? What's going on over here. Thank you very much. Okay. So, I have I've got my data, we're returning a null chat client. What? All right, Fritz, thank you.

LuckyNoS7evin: We've got a hype train going.

Jason: Maybe the first hype train. We don't do a lot of bits on this stream. That's not a thing that the chat does. So, this is fun. This is exciting.

LuckyNoS7evin: Whoo! Hype train! Anyway. So, what we want to do is we want to go into the mounted method on on this. So, underneath your data section do mounted. and again, that's a method.

Jason: Sorry, I'm like Roberttables over here. I'm mounted.

LuckyNoS7evin: This one is going to possibly confuse you a little bit. Hopefully not. It's this.chatClient =, and it's chatClient.unanimous.

Jason: Okay. And unanimous is just like because we're consuming the chat and not doing authenticated chat.

LuckyNoS7evin: Correct. Sorry?

Jason: The method?

LuckyNoS7evin: It is a method. And if you pass in an object and do web socket, it's true. And it's capital S, unfortunately.

Jason: Actually, I was looking at it like, how is this gonna go? I think I feel like we should just switch everything to screaming snake case. That's the name for this style of variable name. And I cannot ever not name something that.

LuckyNoS7evin: Screaming snake case. Right. Okay. So, we've got the chat client equal to a chat client. So, that's let's connect to it. So, we do this dot chatClient.connect on the next line, possibly.

Jason: This.ChatClient.connect.

LuckyNoS7evin: And, of course, this is a promise. So, we're messing with promises now. After that, we do .then. You might want to do multi line. Because we are going to do some chained then events.

Jason: Got it.

LuckyNoS7evin: This is no parameter. And you do this.ChatClient.waitForRegistration.

Jason: Okay.

LuckyNoS7evin: There you go. You can actually get rid of the curlies on this one.

Jason: Oh, we're just going to return it.

LuckyNoS7evin: Yeah. BeforeJason: I can do that.

LuckyNoS7evin: Makes it look a little bit neater. This one is no parameter.

Jason: No parameter. The chat is going off. Thank you for the bids, y'all. I know that it is possible to do a hype train overlay, as this is my first hype train, I didn't know that I needed one.

LuckyNoS7evin: Also, we're doing chat client. If we wanted toot hype train, that's PubSub.

Jason: PubSub, okay, cool.

LuckyNoS7evin: PubSub.

Jason: Thank you for the sub, piece_a_pizza.

LuckyNoS7evin: That is webhook, actually.

Jason: Yeah, that's something to do in the future. I might do a stream where I just build that. Because I'm doing a lot of work on Stream Blitz, and I haven't been streaming it because I'm a doofus. That's a thing I could look into.

LuckyNoS7evin: Let me turn on a couple of lights.

Jason: I thought you were going like a whistle blower in a video, they are all blotted out with the voice the person who did the thing was

LuckyNoS7evin: The other funny thing was, I accidently on purpose called my LED strip "Strip." So, when I tell Alexa to turn it off, it's Alexa Strip Off.

Jason: Oh, that's she doesn't object?

LuckyNoS7evin: No, she goes

Jason: Naming things is hard. Okay. So, just making sure that we don't lose track of time here. We've got the chat client is connected. We have waited for registration and now I'm in a a new promise and I believe at this point we have a registration.

LuckyNoS7evin: We do. Do this.chatClient.join.

Jason: this.chatClient.join. That is also a method.

LuckyNoS7evin: That is a method and put in the channel we want to join.

Jason: As a string or method?

LuckyNoS7evin: Yep. A string. We can grab one of the super popular naming streams. But I have faith in the chat. I'm loving the chat today. Y'all are wonderful. Okay. So, we've joined the chat.

LuckyNoS7evin: We have got one more then.

Jason: One more then.

LuckyNoS7evin: One more. And on this one, we can have a full on method on this one. Again, parameters, you definitely need curlies.

Jason: Okay.

LuckyNoS7evin: So, what we do is we do this.ChatClient.on, message. Sorry, it's onPrivMessage.

Jason: Like this.

LuckyNoS7evin: No, it's Msg and it's lower case. It's Privmsg and it's lower.

Jason: Okay.

LuckyNoS7evin: Open up that. On this one, we've got a few parameters. We've got channel, user, message, and msg. Now, now the difference between message and msg is why is one a full message and the other is the string.

Jason: The full on IRC, all the data.

LuckyNoS7evin: All the tags that's the the msg is the actual tags and everything else.

Jason: For anyone who is not familiar with this, Twitch chat is built on IRC. Which is like the old one of the original like chat protocols, right? It sends a ton of metadata, the timestamps and generated stuff. There's labels and flags and roles and all sorts of things that come along with a particular user's message. Which allows us to do really cool things. Like if you look, for example, at the chat on the overlay, the bottom right of the screen, right here, the colors that come in are actually tied to your role. So, like subscribers are shown in pink. And if I chat, then I will show up as as yellow. Because I am the broadcaster.

And so, there's, you know, it's like, that's kind of a fun a fun thing that you can do with just that information. Did my chat just die like as I was

LuckyNoS7evin: Yep.

Jason: What? How? How are you like this? Come on. That is really unfortunate that it

LuckyNoS7evin: Who broke it? It was definitely the choo choo.

Jason: I'm so hurt by my chat just giving out on me. Let's refresh that and we'll just

LuckyNoS7evin: Right.

Jason: Just a little refresh. Just gonna refresh that page. Done. Okay. Let's try it again. Hello? Yeah. I think I think maybe the system message got me in trouble. But we'll figure that out. But yeah. Anyways. We're back. It's all functioning now.

LuckyNoS7evin: So let's go for a simple thing here. And let's just add every time you get a message, let's just add it to an array. So, let's go back up to the data section above and add in messages array or something similar.

Jason: Messages. This dot messages?

LuckyNoS7evin: Yes, this dot messages dot push, let's push msg so we have the data. So, up a little bit. And we are still in app here. This is fine. Keep going up, you have the HTML template up here with the HelloWorld. And get rid of keep app but get rid of the other two.

Jason: Okay.

LuckyNoS7evin: And then we'll do a for each in this.

Jason: Wait, how you do this?

LuckyNoS7evin: It's if you

Jason: ULV4? Is that right? Or no.

LuckyNoS7evin: Yes, I can't remember if you dot UL, and then on the li you do the for.

Jason: Li v for.

LuckyNoS7evin: Yep. And do msg in messages.

Jason: Like that?

LuckyNoS7evin: Yep. Close off that one and do the N tags for this.

Jason: It's like, just to check it, we could probably just string is this going to work?

LuckyNoS7evin: Just do message. And double curlies for that.

Jason: Got it. We'll do double curlies and do the message

LuckyNoS7evin: Don't stringify, put the message straight up.

Jason: It will do that for you?

LuckyNoS7evin: Pretty much.

Jason: Cool.

LuckyNoS7evin: If you do the space and the colon key equals. And put in the key, msg.id.

Jason: Okay. Give it a shot.

LuckyNoS7evin: Not quite. It's msg.tags.

Jason: Tags. Okay.

LuckyNoS7evin: Dot.

Jason: There's more.

LuckyNoS7evin: But wait! There's more. Get, and open it up and do id in there. So, yeah.

Jason: Okay.

LuckyNoS7evin: And that should why is that complaining?

Jason: Is it complaining? Unexpected closing tag div. Because I did oh, I didn't close my ul. There we go. That should do it. Right? What do you

LuckyNoS7evin: What are you complaining about? If it's complaining about key, move the key up one.

Jason: Required key. Okay. So, the key needs to go up here. Now it seems happy.

LuckyNoS7evin: Nice and easy

  **Jason:**  We have pleased the linter.

LuckyNoS7evin: Load. Let's do npm run serve.

Jason: Okay. Twitch. Oh, I'm missing a dependency.

LuckyNoS7evin: Are you? [gasp!] I can't remember installing that. Damn it. Whoo! Let me just check oh, I have installed it. Sorry.

Jason: No worries.

LuckyNoS7evin: This whole library is by a guy called D Fisher. I think it's David. And imported on what?

Jason: It doesn't like the module JS. Do I need to switch to a different version of Node?

LuckyNoS7evin: What node are you on?

Jason: That's the great question. What am I on? 12. Should I be on 14?

LuckyNoS7evin: No, 12 should be fine. Let me look at my imports on this. That seems a bit off. Let’s look at my package JSON. That should that should be happy. 412 let me see if my Twitch client... okay.

Jason: Let's see. And then I'm using the Vue all the Vue CLI stuff I'm using is 4.4.

LuckyNoS7evin: Yeah, doesn't seem wrong... yes. It's Danny, Daniel Fisher. That's the one.

Jason: Hey, what's up, Joe? Good to see ya.

LuckyNoS7evin: Going to have to write a C# one using Twitch Lib. Twitch Lib is the C# one. Which is currently under rewrite for the moment. I need to finish that. I need to get back on to that.

Jason: Is the import here is it like a named import? Or do I need to import from

LuckyNoS7evin: No, this is pretty much my exact code for my one of my overlays. so, I'm a bit confused by this. Because I

Jason: I wonder...

LuckyNoS7evin: What was the actual error that it was complaining about?

Jason: It says... I can't import maybe there's a oh, there's a whole bunch of them. It's like a cascading failure here. Go to the top. Fail to compile. Can't import named export from non ECMAScript module. So, it's not pulling in the .mjs stuff. I think I either need experimental modules or I think I need... well, it should so, the question about not having it installed. All the Vue CLI stuff is running here. And so, that that is what's called here. So, that shouldn't be the problem. What I'm wondering, though, is the .mjs stuff in 12 let me try 14.

LuckyNoS7evin: I've just spun it up. I have 12.14.

Jason: Naw, it still doesn't like it.

LuckyNoS7evin: May maybe stop the are we still running the service?

Jason: Well, I just started it again using Node 14.

LuckyNoS7evin: Do a fresh install. So, just do an npm i. Just to see if we've got everything and see if it complains. Because it might complain.

Jason: See if anything is out of date. ESLint. But that isn't what's failing. So, that doesn't matter.

LuckyNoS7evin: Try running it up again and see what we get. You run it as a JSX.

Jason: Well, I ran it as I installed with NPX. I mean, I can install globally. Let's just go ahead and do it. Vue/cli.

LuckyNoS7evin: I wouldn't have thought that was the issue.

Jason: I would be super surprised if that was the issue.

LuckyNoS7evin: To be honest, I would be surprised. I was going to say, is that your Slack?

Jason: That was my Slack that I thought I had closed and definitely hadn't. All right. Let's try this one more time.

LuckyNoS7evin: Because I use full on I use Vue a lot of my time. Well, I've got the cli for

Jason: It just doesn't like these

LuckyNoS7evin: NJS. I've never actually seen that.

Jason: To the Googles we go!

LuckyNoS7evin: Yeah.

Jason: Let's see. This one is closed. Create React app doesn't support mjs. Hm.

LuckyNoS7evin: Okay. That's interesting.

Jason: How are people fixing this? Somebody is fixing this. By using named exports. That doesn't seem right. Do you have any extra config in your

LuckyNoS7evin: No. I'll tell you what we could do... right. Okay. Something to do is to knock down the Twitch client jian the Twitch chat client if I could speak. The Twitch chat client and the Twitch library down to 3.7. And also include an extra library just to check on something else.

Jason: Yeah, let's do it. I'm going to import at 3.7, you said?

LuckyNoS7evin: For let's have a look. Chat client is 3.7.3.

Jason: Okay. Twitch is?

LuckyNoS7evin: Twitch is 3.7.1.

Jason: What was the other one?

LuckyNoS7evin: IRC v3.

Jason: 3?

LuckyNoS7evin: IRC v3 is the package.

Jason: Like that?

LuckyNoS7evin: Yes, and that is 0.18.5.

Jason: Give that a shot. Yeah, Chris, I was originally running node 12. I switched over to node 14. But it's something about .mjs not working. My suspicion is it's the Babel or Webpack config using common JS to attempt to get named exports that are coming in as defaults. I think something is goofy. Oh, wait. Did I just do this? I did just do this.

LuckyNoS7evin: I think you just did that. Did you do it in the other terminal window?

Jason: Who knows. I'm just pushing buttons over here. Let's take a look. Here is IRC, Twitch 3.7.1, Twitch client, 3.3.3.

LuckyNoS7evin: Yes, let's run server, see what we get.

Jason: That works. I think something happened in 4 that is making it incompatible with whatever the default Vue setup is. So, there's probably just some some little some little Babel config that needs to be it looked like there was a named export configuration.

LuckyNoS7evin: So, that was me. So that's the message. Okay. So, it's not quite the full message. So, we need to actually figure out what was going on on that one.

Jason: It's not the full message?

LuckyNoS7evin: No. It's not rendering as I thought it would do.

Jason: I think it looks like the 2 string, right?

LuckyNoS7evin: It does, actually, yeah.

Jason: This is public chat. This looks like it's pulling in

LuckyNoS7evin: It is. If you have a look in chat now.

Jason: Yeah. I misunderstood, I thought the private message was going to be like whispers. But that's my model.

LuckyNoS7evin: I think that's an IRCism.

Jason: Got it.

LuckyNoS7evin: Prove message is based on room. And we're in your room.

Jason: I got it. Okay. So, then, if we want to take this what am I doing over here? Okay. If I want to take this, close this down a little bit. We know that's running. So, I'm gonna close

LuckyNoS7evin: Yes.

Jason: These and

LuckyNoS7evin: Scroll up and render a few more things.

Jason: Do that.

LuckyNoS7evin: Let's go to the chat documentation and I'll show you what we have in there.

Jason: The Twitch chat client?

LuckyNoS7evin: Yep. On the I'm gonna drop this in Zoom.

Jason: Okay.

LuckyNoS7evin: So, that's the URL we want. But this is for everyone else. So, I think that.

Jason: Actually, you know what? If you don't mind dropping that in just the public chat since it's just a documentation link. That will be because I would be between two computers. I would have to manually type that.

LuckyNoS7evin: Oh, okay. So, I'll drop that in. and, we should be able to grab that documentation.

Jason: I realized I forgot to do a shoutout today. I got excited about the Twitch bots. The show today is being live captioned. You can go to lwj.com/live. And still looks like I can't figure out how the Twitch embed works. But look at the live captions from White Coat Captioning. Provided by Netlify, Fauna, Sanity, and Auth0 who have sponsored to make it for accessible to everyone. And thank you, chat, for making this show popular enough to be worth sponsoring. I appreciate that.

LuckyNoS7evin: That's very nice.

Jason: It is wonderful. We have Amanda listening in and writing it down as we all go. Which is like, what an awesome thing to have. And what an awesome awesome service that they provide at White Coat Captioning. Okay. So, now, I have the docs up for the Twitch chat client. I'm gonna look at the chat client and look for on priv message. Which

LuckyNoS7evin: So, you've got a lot of options in there as you saw. Those things like on raid, on basically, any event that can come through IRC. Danny's captured and is very, very nice little system. And as you can see there, there's the raw message with that is received if you click on that Twitch priv message. The object

Jason: Oh, here.

LuckyNoS7evin: Yes, sorry. And you have the different parameters come through.

Jason: Got it.

LuckyNoS7evin: The important one is probably the tags. If you have a look at those. We'll get those in a second. Because that's where things are stored. Including who it came from. What color to use as well.

Jason: Okay.

LuckyNoS7evin: And code with Sean, I have been MVP since January. I was lucky enough not to need to renew this year. So, with my sorry, this is Microsoft MVP.

Jason: Oh, I broke it.

LuckyNoS7evin: Have you broken it?

Jason: Well, I just started pushing buttons. So, who knows?

LuckyNoS7evin: I would do I wouldn't put underscore, just put tags. And see what it does. I don't know if it's clear that is cleared the array?

Jason: Here we go. So, that came up empty.

LuckyNoS7evin: So, oooo... interesting.

Jason: So, tags comes out empty. What does this do? Nope. Still nothing.

LuckyNoS7evin: So, if you do if you copy the message tags met ID that we had above and put that in... that will that should come through with something. I hope it comes through with something. Because otherwise we're indexing on something we're not meant to.

Jason: Okay. There's the IDs.

LuckyNoS7evin: You want a list of what comes through in tags. Which is rather interesting because it doesn't. By the way, tags is a map object. So, I don't know how you

Jason: Yeah. So, we can

LuckyNoS7evin: Is it

Jason: Entries?

LuckyNoS7evin: Entries?

Jason: And we can stringify that. Oh, nothing. And it's array from there grow. But actually, I think let's do entries because that will give us tags. So, badge info is empty, badges, premium/1. This is ugly, sorry. We get a client nonce, we get a color, display name, emotes, flags, id, mod, room id. Subscriber, tmi sent, turbo, user id, user type. Those are all things that we need. And then I can go in here and do something like, let's say, I can get the message, tags, get.

LuckyNoS7evin: Display name.

Jason: Display name. And that will be what the person like who said it.

LuckyNoS7evin: What you do is with the color, you set it to the color unless they don't have one. Because, yes, they might not have one. It's I believe it used to be the turbo days where you had to set your color. But some people still don't set it.

Jason: Okay. So, let's do message.tags.get color.

LuckyNoS7evin: You don't need the double curlies on that.

Jason: Really? You can just drop it?

LuckyNoS7evin: Yeah. What you wanted to do is put a color style instead. We are going bind the style.

Jason: Like this?

LuckyNoS7evin: Put a colon at the start of style, yes. That is basically bind, style, and then you put the whole if you put the style into an object and make it a JavaScript style inside the quotations. Sorry.

Jason: Ah ha!

LuckyNoS7evin: There you go. It goes down the JavaScript objects styling. So, if you do

Jason: There it is.

LuckyNoS7evin: Yes.

Jason: Everybody chat. Yeah, there's colors coming through.

LuckyNoS7evin: Radius for example. Border. Border? Is it border? Wow. I can't even spell border.

Jason: Like border radius...

LuckyNoS7evin: If you did something like that.

Jason: Okay.

LuckyNoS7evin: Without you don't need the I don't think you do. You might not

Jason: If it's JavaScript style, you might need to make it a string. We're doing the object style notation for...

LuckyNoS7evin: Good point, yeah.

Jason: Thank you for the sub, Cassidy. How did your stream go? Cassidy before we started was on with the whole React Core team doing a Q&A.

LuckyNoS7evin: CodeShow, welcome, hello.

Jason: This is getting closer. It's looking like a thing. Maybe make this a little bit narrower because we don't really need all that real estate. Oh, no!

LuckyNoS7evin: What have we done?

Jason: Cassidy had her camera just quit. She got the same camera I have, a Sony what is it? AS or A5100, I think. And it just like overheats for her. Doesn't overheat for for I've never had it overheat for me. And I think our settings are the same. So, I don't understand what's happening. Very confusing problems.

LuckyNoS7evin: I think that's the next thing for me. Because I'm my audio is getting better. But my camera's I'm still on the C920. It just it's just no.

Jason: You know, this is definitely a little bit meta. But I have noticed that the lighting, honestly, makes a bigger difference than the camera. Because I had the DSLR with no lighting. And it was fine. But I still had that kind of webcam look. And then I invested in lighting, and I actually think a lower quality webcam with the lighting setup I have now would look better than the DSLR did with no lighting.

LuckyNoS7evin: That's fair. I could see that being true.

Jason: But anyways. So, yeah. Like look at this thing go. We have a I mean, we've got a couple issues. The biggest one being that

LuckyNoS7evin: Oh.

Jason: This is a pre, so things aren't wrapping.

LuckyNoS7evin: And we've got a style on the list element. So, it's what is it? List style none? To have no bullet points? Yeah. I think I think it's like does that go on there?

Jason: Yeah. So, it would go here. And set a margin and padding of zero and that should clean it up.

LuckyNoS7evin: Yeah.

Jason: It looks like it gave up on me. Did it lock up? Oh, no! It's frozen!

LuckyNoS7evin: Oh, wow.

Jason: Oh, god, Chrome. All of Chrome just exploded for me. Wow. That was wild. Okay. We're back, everybody. Okay. That's better.

LuckyNoS7evin: SurlyDev, I do. But the only problem is the sun shining in from behind me. Which will change next week when I get my new desk. I'm turning the whole office around.

Jason: Aw.

LuckyNoS7evin: I'll be looking at the window rather than the other way round.

Jason: At this point, whenever I go it stream, I have heavy curtains that I pull over the windows like a, you know, like a hermit. Keep that sunshine out. I can't have glare. Okay.

LuckyNoS7evin: So, yeah. This is the sort of start of things going. We've got things going, basically.

Jason: Yes.

LuckyNoS7evin: There's your chat. There's everything else. If you go back to the documentation for this library, all the different events coming out of it. The subscriptions, bits, I think.

Jason: Yes. Let's get up to chat client.

LuckyNoS7evin: Yep.

Jason: And so, we get emote only. We get

LuckyNoS7evin: On posted, on raid. Ritual is in there. Which are interesting. GIFs, sub.

Jason: Hold on. What's a ritual?

LuckyNoS7evin: I can't remember exactly. But I think that's when you get the oh, you're new in chat. Say hi! And you get the option to just click a message and it says hi for you.

Jason: Oh, okay.

LuckyNoS7evin: That's a ritual. That's part of the ritual stuff in a channel.

Jason: Interesting. Yeah, you're right. With a okay. Yeah. Hm. Currently the only known ritual is new chatter.

LuckyNoS7evin: Well, there you go, then.

Jason: And that's so funny because that's worded like D & D. The only known ritual is new chatter. Many may yet to be yet to be discovered.

LuckyNoS7evin: Yes. It's so, yeah. And there's things like the pay it forward. So, have you ever received the gift sub? And then it says, you now create a gift sub for somebody else because you just received one for this channel?

Jason: Yeah.

LuckyNoS7evin: That's the pay it forward event. So, if somebody's paid one forward.

Jason: Cool. On community pay forward, standard pay forward. That's fun. I didn't know that was a thing.

LuckyNoS7evin: So, it's not it's not just picking up this library. But these are all the events that you can actually go for. And this is where we will start talking about the start of the show about interactivity. And this is just the chat. This hasn't got things like trains in it which is webhooks. This hasn't got the PubSub stuff in which are custom redemptions.

Jason: Yeah, and the custom redemptions, if I pull I think I can do this. I'm gonna pull the actual Twitch chat window over. So, Twitch chat has this thing you can do where you you can click on these channel points. I've never used my own channel points. But then you can do something like modify and emote. Let's take the corgi. Horizontal flip, backwards corgi, thinking corgi. Yeah, I like that one. All right. So, now we've got a thinking corgi.

Oh. Well, it only works if you

LuckyNoS7evin: Put a space in it, yeah. You know?

Jason: There we go. But so, those those are the that's what you're talking about when we talk about the

LuckyNoS7evin: Redemption system.

Jason: Yeah.

LuckyNoS7evin: Now, I believe only custom ones come through PubSub.

Jason: Okay.

LuckyNoS7evin: Which is interesting. I think when you receive a highlighted message, the tags on that actually change. Are we displaying tags at the moment?

Jason: We are I took a I took the dump out, but I can put it back in.

LuckyNoS7evin: Yeah, put the dump back in. Because I'm just gonna put a highlighted message up. Because I think there's more tags that come through.

Jason: What did I do? I did array.from, message tags.entries. There we go.

LuckyNoS7evin: So, when that comes through, I think that's highlighted.

Jason: Highlighted message.

LuckyNoS7evin: There you go.

Jason: Wait, highlighted id, highlighted message. And the other ones get a message id?

LuckyNoS7evin: They do. And I think they are just standard unless they don't?

Jason: What is it, do they not get one at all?

LuckyNoS7evin: No.

Jason: This one is highlighted, so, and we could check something like

LuckyNoS7evin: If tag contains. Something like that.

Jason: Yeah, background: Message.tag.get, message

LuckyNoS7evin: Yeah, message id.

Jason: Message id equals highlighted message. For now, we'll just do something like hot pink.

LuckyNoS7evin: Yeah, that'll do.

Jason: Otherwise, we'll make it transparent. And that should autoformat. And it did.

LuckyNoS7evin: And

Jason: And I broke it. Ha, ha! What did I break, though?

LuckyNoS7evin: Yeah. What did you break? That doesn't look right. No, it looks right, but...

Jason: Not re property get of undefined. Because I did the wrong property is why. So, now

LuckyNoS7evin: You should probably get rid of the dump out.

Jason: Yeah, I'm going to comment this out this time instead of...

LuckyNoS7evin: There you go.

Jason: Okay. But I need to add that to the I need to add that to the li. I'll take it off of the name and we'll add it up here instead.

LuckyNoS7evin: You forgot the quotations to open it.

Jason: ah. That's right, that's right. I'm very used to writing React.

LuckyNoS7evin: It's all right. I'm sort of I wouldn't no, you haven't. It's just refreshed. I was like no.

Jason: There we go.

LuckyNoS7evin: Yeah. Wow. Is that SurlyDev? It's you. You're pink as well so you can't really see it.

Jason: Well, that's my fault.

LuckyNoS7evin: So, yeah

Jason: Logic to be written here. To check if it's highlighted actually, that's not a bad idea. Let's do this. We'll take the color. So, we can use this, and we'll say the color is message tags if it is, we'll make it white. And if it's not, we'll make it

LuckyNoS7evin: Tags yeah. There you go.

Jason: And now what should happen is if we highlight, we should get a that. And then if I highlight... yeah. So, I don't think this is accessible. But the logic is in place, right? Like we would need to make sure that the contrast is proper and all those things. Which is that is the whole a whole other issue because when people can choose their own colors, the accessibility is going to be a nightmare. You probably want something like that.

LuckyNoS7evin: The whole point of what we're doing now, and not what we're sort of telling you. We're sort of teaching and going down this route is, this is all possible. And it's all about increasing that interaction. So, today we were just doing bringing up this quick example of doing chat on screen. It's exactly what you've coded down below. Previously. But let's just change it and sort of show people how you can do that. And just discuss how we can actually increase that sort of interactivity.

Jason: Yeah.

LuckyNoS7evin: What you can do, because this is an overlay, you can put this as a browser source straight into OBS and display it on screen.

Jason: And you know what? Why don't we just go ahead and do that. This will actually be kind of fun. Let's initialize this repo. And then we'll call it we're on the main branch. And we're gonna get create learnwithjason. We'll call this stream chat client overlay. And then lets Git. Add everything make sure we didn't include a bunch of extra stuff. We didn't. All right. So, now we are going get commit, work in progress. Chat overlay. Git push. And then, we'll just stand it up on Netlify real quick and hope it just does what we want, which I hope it will. Create and configure a new site. We'll put it on mine.

We'll call this Twitch overlay. Twitch overlay.

LuckyNoS7evin: If you want to be fancy later on, add it as a query string, which channel you connect to.

Jason: Oh, that is a good idea. All right. So, we're gonna get into we want to run the build. So, we'll npm run build. And we're going to build to this is it build to

LuckyNoS7evin: No, it builds to dist.

Jason: Okay. All right. So, that has run and then here in a couple of seconds we'll have this site built. And while we're doing that, I don't know I don't think I can show

so, I'm not able to show my my Twitch setup because I've never actually done that before. But what I can do is add a new browser source which I'm doing over on the left hand side. And I'm going to make the source will be HTTPS, Switch overlay lwj.netlify.app. And we'll just put that right in the middle. So, let's done!

All right. And so, now I have I have put our chat right in the middle of the screen. And if we

LuckyNoS7evin: We may have built. There it is! In a very colorful, non colorful way.

Jason: Is it working? Can you see it?

LuckyNoS7evin: I can. The text is the same

Jason: Yeah. It's in a weird spot. Let's move it over here where we can see it. And I'll open a light screen.

LuckyNoS7evin: Please! Put something blind it.

Jason: Here, put something behind it.

LuckyNoS7evin: There you go.

Jason: This is actually oh, no! Don't move! Stop! Never mind.

LuckyNoS7evin: Live, on Twitch.

Jason: Okay. Here we go. So, we've built an actual Twitch overlay and it's functioning. Which is super cool. Like I there are a million things that we would want to change to this. We would want to add support for emotes. We would want to add support for, mine, for example, doesn't support the slash me commands.

LuckyNoS7evin: Yep.

Jason: It doesn't show I've filtered bots intentionally otherwise the blitz bot gets a bit out of hand. But there are a bunch of things that we would want to fix on this. But I think the principle here is cool. Because if you look at it, we spent the first, I think, 25 minutes just kind of talking about the platform. We weren't really writing code at all. So, in the last hour, we have been able to build a fully functioning overlay, get it deployed and get it up on the stream so that it's actually working.

LuckyNoS7evin: Yes.

Jason: I'm going it air quote working. It is doing what we want it to do. The rest is on us to clean it up.

LuckyNoS7evin: It's on us to do the CSS. Do whatever we want with it. This is very much MVP. It does what it was meant to do. And it did it very quickly. And we could fail fast and move on to the next steps. But this is what I have been doing for 3 years. And it's it's crazy to think that a lot of a lot of streamers, especially outside the Dev sphere, and outside the major streamers that have their own coding people. So, like, I know I know the developer that works for CohhCarnage and Sacriel and others. But people don't know that we exist. They go, oh. Custom chat bot, all right. Then.

Who do I go to? I'll just use the Stream Labs one.

Jason: I know for me the initial onramp into building custom chat bots, it felt scary. Because if you get introduced to a few things that are maybe not familiar as a Dev. I come from the frontend world. Oh, yeah, it's based on IRC. I've never worked with IRC. That's going to be hard. And then you get into the web socket stuff and there's all this real time stuff happening. Hm. There's a lot going on there. But what is nice is that libraries like this one exist.

Instafluff has built ComfyJS. Another nice abstraction over how to get different events from your Twitch streams. tmi.js is very low level, but it's very powerful. There are a bunch of really cool abstractions. And that's just the JavaScript stuff. There are libraries all over the place for all for multiple, probably not all, but multiple platforms where you can build you mentioned a C# one earlier, I think?

LuckyNoS7evin: Twitch clip, what they're using as well.

Jason: Nice.

LuckyNoS7evin: The C# is like what people are used to. When I jumped in, is there a Twitch library? Yes, it's here. Twitch Lib. And that was 3 years ago. I'm one of the major contributors now. And we are rewriting it, because Dotnet Core has moved along so much in 4 years and we haven't. Yeah. There are libraries out there to get you started very, very quickly now. And getting started very quickly, as you can see, we've done it in under an hour.

Jason: Yeah.

LuckyNoS7evin: And it works.

Jason: And this is a really fun thing. Like, for example, the commands in here. Like if I run a command, like this one, it makes noise. It triggers a video, it does some text overlay. All of that is being done using these libraries. And so, you know, like I I run, and I think that Twitch just kind of knows it doesn't even care. Like if you do bang command, it just sees that as text, right? And you interpret, anything that starts with an exclamation point is a command. I should see if I have a command named that thing. It's really free form and one.

LuckyNoS7evin: And then you can go to the next step which is extensions as well. So, this is just us talking about overlays that we put on our broadcast that everyone could interact with chat.

Jason: I'm going to disable this so I can show something on screen while we're doing it. Do you have a good example of like a Twitch extension that you would want to show?

LuckyNoS7evin: Bring up my channel for a second. Bring up LuckyNoS7evin.

Jason: Okay. I can focus. Twitch...

LuckyNoS7evin: And if we go into the about section. Because I'm currently not streaming. And scroll down. Keep going. There's there's that one which is called we play. Which is actually a Twitch plays extension.

Jason: Okay.

LuckyNoS7evin: So, this has an application that you run locally. Give it the right key binds. Those key binds are actually for Slay the Spire. And Twitch can play the Slay the Spire.

Jason: Interesting.

LuckyNoS7evin: And I can just run the game. And there's also a different user interface on this one where it's on the stream as well rather than just the panel. For my testing and Twitch's testing purposes, I use the panel. And then scroll down a bit further.

Jason: Okay.

LuckyNoS7evin: You've got top clip on the left hand side. Which literally shows your best top clip of the day, week or month. Who cleaned up all the information about it? And then viewer information on the right hand side is who the latest follower is. Thank you OTLmattx for following. And if you share your information and you are a follower, it will tell you how long you have been following me.

Jason: Cool!

LuckyNoS7evin: And it's broken because I I accidently broke it. But the subscribe it even tells you subscriber access as well. So, your latest subscriber and if you are a subscriber, it tells you who that late how long you have been subscribed to X person.

Jason: and that's and this is really interesting because this opens up so, I had ecomath, Derek was on the show. And we worked on Twitch extension stuff. And we ended up getting stuck and couldn't figure out how to do it. But we've had ideas for like, we could pull in the upcoming streams and display that as a panel. So, you know, I've got a schedule. Where is it? Over here. And

LuckyNoS7evin: Yes.

Jason: And these are available as endpoints. So, we've got an API to be able to pull from. And being able to show that here would be great. This has me really excited. Because the idea that we can create an interface here. Like, I so, for example, I have the the commands, right? So, we can do, like, you know, one of these and it plays

I think I need adult supervision here.

LuckyNoS7evin: And you could

Jason: I could build a sound board.

LuckyNoS7evin: Yeah.

Jason: I want it. I want it real bad. And I just realized, I could build one of these that could show the live captioning. I just built an extra website for it because I didn't have a way I wanted it get it in to closed captioning to Twitch but I was going to have to write C# for this and I don't know C#. This is more than I can manage. Build a separate website.

LuckyNoS7evin: That's not it either. You've seen talk to me Guzman's captioner, right?

Jason: I haven't. But that's like AI, right? It does like NLP. Natural language processing is the acronym?

LuckyNoS7evin: It uses the Google API in Chrome. So, yes, it does. But... his also does translations.

Jason: That's cool. That's very cool.

LuckyNoS7evin: So, as a viewer, you can select what it translates into it. It's an interesting concept. And, yeah, I know that you've got this, the White Coat Captioning. And that's fantastic. So, you could run what comes out of there, again, through a translator and have somebody else translate it on the other side. And it would be very interesting to sort of see that. But, yeah, it's possible and it's doable as an overlay so it could be on the stream as well, so they don't have to scroll down.

Jason: Yeah, yeah. And I mean, to answer your question, rusty bicycle, the reason that I don't put the captioning on screen is because we have limited real estate, I didn't want to just show like one line of captioning at a time. And what I really want is for people to be able to choose whether or not they want to see it. And so, the thinking was, if I could get it into the closed captioning channel, that would be that's ideal. But I looked around and the only solution that I saw for feeding the closed captioning that I'm getting from White Coat into Twitch on the fly was to write C#. Which is not an area that I really know how to I'm kind of stuck, right?

But it it gives us, you know, I think that there is there's a lot of opportunity here. I think the extensions allow us to go a little bit further, to play with some new ideas. It seems like something that we could go a long ways with, right?

LuckyNoS7evin: Yes.

Jason: I think there's a lot of fun and a lot of possibility in what can be done with Twitch. And that's why I'm so excited about it as a platform. Why I think it's so you know, it's got so much potential as a broadcaster, a community platform. Because you can be interactive request it.

LuckyNoS7evin: And, of course, again, people have built libraries for it. So, there are I believe, I don't know if he's finished it or not there was definitely a a view Twitch helper VueX library. VueX is like Redux, estate management for Vue. So, he's done this guy has done a Vue Twitch helper VueX library.

Jason: Nice.

LuckyNoS7evin: You just go, I want Twitch extension VueX, and you've got the full state management for the full Twitch helper, JavaScript helper that you can run an extension from.

Jason: That's cool.

LuckyNoS7evin: And I think he's started, not finished, the React version.

Jason: I did build that. I have been working on cleaning it up. But I have a thing called Stream Blitz that is in various stages of disrepair. That is what's running the sound effects and everything today. If I could find the repo. But, yeah. So, this is the code for that. But what it includes is there's actually a a library in here for where is it?

LuckyNoS7evin: Where have you put it? Where have you put it?

Jason: Have I not shipped this? That would be just like me to not have the hooks ready.

LuckyNoS7evin: It's in a Dev branch somewhere.

Jason: It's definitely in a Dev branch somewhere. Where did I do this? I don't know. I have it somewhere. But, actually, I'll just pull up... just pull up the code locally. Because I know that works. Oh, my god. I have the wrong thing open. Ah. What is my life?

LuckyNoS7evin: Oh, one of those days. One of those days.

Jason: Really is. We'll pull this one across. So, what I have been working on with it is a use message so a use chat, use command which are both like abstractions over use message which just pulls up the whole thing. And this is set up through GraphQL subscription. This pulls in a steady stream of the messages and feeds them into an array like we have been doing. And command, this is a the more specialized. Because what I set up for it all the of the everything on my stream is actually a serverless function. So, I have my serverless function set up where each effect is a serverless function. So, like this one here, if you run this command, it will send this message to chat. It will play this audio file and it will run this animated GIF.

So, like, if we run this, what's happening is Stream Blitz gets that command and then completely fails to pull this in. This one works, though. So, this is like the ahem. Same thing. This is the command, this is the audio that plays, this is the image that plays and it's up for 3 seconds. So, it's kind of like this general thing around.

But, yeah. So, that is that is that's that's anyways. All of that is to say, there are there are lots of abstractions built around this stuff. You can build your own if you want. If you're into that sort of pain. Or you can you can use any of the number of libraries that already exist for it sounds like the UX has got one. You can you can dig into my stuff if you want the React stuff. The TMI ComfyJS, Twitch chat client. There are so many things you can do with this. I would definitely encourage people to check that out.

LuckyNoS7evin: And aside from that, it is for an overlay, it is literally piecemeal JavaScript.

Jason: Yep.

LuckyNoS7evin: And CSS. I have seen unity based ones.

Jason: That would be wild.

LuckyNoS7evin: Though back about 3 years ago there was a few streamers. One was a guy called Games Plus James.

Jason: Okay.

LuckyNoS7evin: He does Udemy courses and YouTube videos for actual game development. And sort of little thing. And he made this one called I think it was stream robots or stream something? And it was literally a boxing ring.

Jason: Whoa.

LuckyNoS7evin: The old style. It was all done in Unity and it had the blue background.

Jason: That's amazing.

LuckyNoS7evin: Of it was just Chrome keyed out. Done.

Jason: I could talk about this all day. But unfortunately, we are out of time. So, where should people go if they want to learn more from you or follow up on this?

LuckyNoS7evin: So, my Twitch channel is LuckyNoS7evin. My Twitter is over there or over there, which is the S7evin. Just come and drop by. We do three streams a week, Sunday, Wednesday and Thursday. I'm probably not gonna stream tonight because I'm on a week off, actually.

Jason: Oh! I'm sorry!

LuckyNoS7evin: No, we booked this in a month and a half ago. And I decided to take a week off and I completely forgot.

Jason: Thank you for coming in on your week off, then. That being said, chat, shoutout. And thank you again to Sanity, Fauna, Auth0 and Netlify for making live captioning possible. Thank you, White Coat Captioning, for doing the live captioning. Chat, stay tuned, we're going to raid. Thank you so much for coming on.

LuckyNoS7evin: Thank you, it was fun.

Jason: Thanks, see you next time.