GitHub Open Source Friday, 21 Jul 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: OBS + Next.js Powered Stream Scenes - Open Source Friday

Description

Kurt is a DevRel for Apollo GraphQL and streams anywhere from 3-5 times a week. This may not seem like a lot, but when you take into account all the work that needs to happen outside of the actual stream, you can quickly see how it might start to eat up all of your time.

Join @bdougie and @theworstdev in learning how to leverage Apollo and Next.js to power stream scenes in OBS.

0:00 - Start
6:55 - how do you set up your stream?
17:44 - kkemple/apollo-graphql-stream-scenes
30:40 - Team-TAU/tau for the Twitch API
43:00 - Live demo

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Yeah, absolutely so, what's up everybody uh kurt, I'm currently a manager at apollo, graphql, a dev rail manager, so um still developer, advocate at heart, and I focus a lot of my time around helping our team help the graphql community. That's that's what we do um and as far as the streaming stuff goes and how I got into that, um I've always been a fan of uh teaching.

A

I've always loved, doing like workshops and and stuff like that, and one thing that I've always found difficult, especially coming as someone from a non-traditional background, is that a lot of content that you find for educational purposes is polished and and cleaned up, which is in one fashion, good, because it's a direct delivery of the information um but where it affected me is that I would often run into issues that would be presented in a video as something um you know, trivial or non-starter, or a simple step to even get started into the real thing, and when I would run into errors, um I would imposter syndrome would set in, like you know, if, if it's so easy like, why isn't my npm install working or this?

A

You know? Why am I getting this error and I'd be unable to figure it out, and so uh I really like streaming, because when I started watching coding streamers, one thing I noticed is that it's not that happy path. It's it's not this polished thing, they're, they're, developing it in front of you live and you get to see their mistakes as well as their successes. So to me, it humanized education.

A

It's a way to show people that not everything, even people who are experts in the area. I make mistakes all the time on apollo streams when I'm building things with the the software for the company that I work for right, and so you know it.

A

That is a natural part of development, and I love how live streaming um enables me to share. You know, still quality content with the community, but do it in a way that is not just a happy path and I think there is room for all those types of content. um You know. Polished, video and courses and stuff are great as well. We have a whole learning platform, uh so you know we're definitely there, but I like other avenues as well. People learn differently and we want to present as many different ways as we can.

A

So that's like the biggest piece and then the other part is community. I love getting uh on stream and hanging out with folks and talking graphql or building things and folks in the chat jumping in and mob programming with me, and you know it's a lot of fun.

B

Yeah yeah and that's the one thing that drew me towards as well, because I had a problem, uh many problems, but the problem.

A

I had was I.

B

Wanted to be consistent on on contributing to open source projects and building my own projects and the way I could stay consistent, but also have some sort of like um like accountability. I guess per se, is by scheduling myself on my calendar.

B

This is where I'm gonna live on twitch, and that began the thing I did for all of last year and even this year halfway through this year- and um I I've enjoyed it because not only can I learn something new uh like when I watch other folk streams, which your streams were some of the earlier streams. I learned how to do all these sort of like live, changing and editing and understanding how how browser sources work, because it's going.

A

B

Point it's something that you you feel dumb for, not knowing, because eventually, when you figure out it's like, oh, I guess I could have got here eventually, um but not knowing that like right now, I have embedded my laptop looking at clarkio, so shout out to clarkio who's live right now uh everybody should definitely jump on his stream and see him uh do some really cool stuff. After this, um what I'm getting at is like. I now have it this embedded. I've got a browser source which is now my my overlay.

B

I've got a little svg right here with our names down here and now. I've got our zoom call all embedded and it took me a while to figure out how that all worked, because sometimes I'll miss you know the beginning of a stream or miss a video or a blog post. Or is this not discoverable?

B

But once you start like sitting around hanging on chat, you learn so many more things you learn like I didn't know like the zsh or the z shell like you, could configure it this way or I could use fishel or like those like nuanced things that you just don't get because youtube videos or egghead videos are really concise and to the point, uh sometimes you want to have like the same way. You have your co-workers. When you sit in the office, you want to sit next to somebody and be like hey. What did you just?

B

What command did you just do? Could you just do that one more time and you can do that on the winch.

A

Yeah and it's it's the it's like it's like pair programming right in a lot of ways. um It opens up the door for a conversation around what is happening in real time and it's like contextual and you can't get that with. You know, um uh pre-created content and while that stuff is also awesome, like we've, said before yeah, it's just one of the things that drew me to this. You know I I answer so many questions like I feel like half the streams really just end up being like just like talking to folks and yeah.

B

A

Questions from chat- and you know it's really rewarding one um for me- to help developers uh on on such a personal level, one-to-one level and then on the flip side. It must be nice to have a place to go where you know that you can ask questions and people will do their best to like help you out and answer it, and you can just show up and hang out with them.

B

Yeah yeah indeed, so I want to talk about what I brought you home to talk about, which is how you set up your your stream. How do you sort of have your overlays your your chat, because you, you have a couple blog posts which you know I should might as well bring this up too as well, because uh I actually go back. I should tell you this. I go back and refer to some of your earlier blog posts on this site, nice about streaming.

A

B

Up your announce, like your automated announcements and tweets and stuff like that, yeah, like all the extraneous things um it it's great content and uh and also shout out to jason too as well same same deal same yeah. I I go and watch his streams. He did. uh He does a couple streams every now and then I'm not sure if it's like a canceled, guest or whatnot, because he normally has guests, but he did a stream where he actually went through and talked to her about all his setup. um Oh that's.

A

Awesome, which was like so.

B

Insightful um because I was able to like finally figure out: oh that's how he did that one thing um yeah, because he has some.

A

B

Cool stuff on his stream.

A

Going off yeah and.

B

It's funny um uh michael jolly who's, the bald bearded builder. He um he mentioned to me that uh when I asked him, I just asked him a lot of questions and earlier in my streaming career, and he mentioned about hit the chat, bots and chat. Bots are kind of like with jedi's.

B

It's like your lightsaber, so like when you first live stream. The first thing you'd build, should be your chat shop, whether you go fork and clone someone else's, and you build on pop. On top of that or you start from scratch, like chat, bots, be become the thing that every streamer ends up doing that um everything, it's so handy, so handy yeah, so shout out to living a van who's who's uh mentioning the kitchen tour, which is gonna, be a bit of this.

B

uh I wanna be able to understand the worst dev and in the setup so like. Where would you start and explaining how your your streaming setup goes?.

A

Yeah, I think what I'll do real quick. We can go um we'll go into the repository, but I think it's best to just kind of talk about the architecture and.

B

A

And and how that enables a lot of the setup, so uh brian mentioned uh um using something called browser sources, so a lot of folks that stream, we do this through one of two apps, either obs or streamlabs obs, which is obs with some nicer features, added on to it that a company called streamlabs has um you know, um because obs is open source. Actually, here we are open source friday, it's open source, so they have uh made their own version, which has some added plugins and other features on top of it right.

A

So one of the sources that you can embed to decide what will be streamed or recorded is called a browser source, and what this gives you is a frameless windowless browser that you can load up any url into its webkit-based browser and once you load up a url at that point, you're able to well do pretty much anything that you can do within a web page.

A

This opens up a lot of opportunity to really extend what you can do a lot of the other input sources when it comes to like visual things and interactions, honestly aren't the greatest in obs. You know it's like a really really bad version of like photoshop or figma right like like.

B

Well, it reminds me of um if um yeah, if I used to get back in there, I don't get still around, but like now, I work in a company.

A

B

Give me a photoshop license, so I.

A

But I feel like.

B

Was a tool that was a open source version of photoshop and if you didn't have the you could get a free license um and whatever ways you would do it back in the day.

A

Then you would.

B

Use and it did most of what you needed, but you had to like figure out all the other cool features that photoshop gave you for free or sorry. That was not for free. It was for 500 bucks, um but what I'm getting at is uh was that the equivalent to like what obs is to? I don't.

A

Know I don't know.

B

What the professional I've heard the names, but I don't think of them.

A

Yeah they don't they don't really come to mind. There's there's a couple of them, but really what obs is is a broadcasting software yeah um so like a paid version, what you might be looking for actually would be like tv broadcasting, software or a lot of churches will use like broadcasting, software and stuff so yeah, that's really what it is. It's a free, open source version of broadcasting software that comes with a large ecosystem of uh community-built plug-ins again here we are talking about like open source and community.

B

A

So we use this browser source to um especially for developers shortcut our way into building a lot of the things that would otherwise be extremely difficult in obs and um uh um otherwise, uh probably too time consuming in a lot of ways to be worth it yeah. uh So.

B

They want to mention real, quick in my baybot repo. I do have a screenshot of what the where you would add, a browser source um perfect. This actually walks through doing the forking and cloning process. So if you didn't want to build your own, uh that's what that is, uh but I did want to just point out that that's what we're talking about.

A

Yeah, so now that we've covered that right, we have these browser sources, and so what that means is we can do really two things one is we can create um web pages or browser sources that style our layout right. So, just like you were talking about having the svgs for the bottom thirds for our names and the layout and all of that stuff we can bring that in. We can build that with whatever you know front end thing: we want whether that's regular, html and and css. We do it.

A

um You know uh that way or we're using react like in this case, I'm using um currently rec, but we're moving to next. I'm migrating all this to next js and and we're using apollo we're using graphql, because the second thing that you can do is create interactions and engagements, and you know when we talk about like chat bots and how twitch works it's real time. So I wanted to use infrastructure that supported real-time data transfer, pretty straightforward and easily. So I picked graphql surprise surprise.

A

The apollo developer advocate picked graphql to build their project, but with subscriptions it does actually give me a very quick and easy way to set up real-time data. So what I have working now is a backing server graphql server that is listening to some twitch web hooks and also using a tool called tmi.js to receive incoming events, uh both from like twitch.

A

If somebody follows or subscribes or or chats um a message, and then I'm using subscriptions to pipe that into some of those browser sources depending on on what it is that you want to do and when it comes to building your layouts, you really have a lot of options. Some people will build like the full layout and they'll, have chat included in that, and all that and then like spaces for video and stuff, like that, I've taken a more um broken out or component like piecemeal, based approach.

A

Where chat is its one own source, I we, you can generate memes, we'll take a look at that you can have like memes pop up on the stream, um and that is its own source. The layouts are their own source um and you know you have some concerns to think about when, when deciding um how many browser sources you want to use like your your computer, how much you know actual memory and cpu? Do you have available to you and then how much interactive and real time like?

A

Are you going to do animations and stuff, because yeah.

B

A

Javascript does not like to do animations while it's doing other things. So if we have one layout, that's like our positioning and maybe it has like an animated cool thing around it, and the chat is coming in animated you're going to notice lagging like you would on. um You know a web page. That was exactly that was trying to do too much at one time. So you know those are the concerns that you want to think about. It takes some. You know, finessing, to figure out.

A

What's going to work best for you, my personal opinion is start with one browser source and add more as you need them like if you're realizing some problems, uh don't break it up for no reason follow this along a lot of the lines for me for writing. Code.

B

Yeah yeah and someone dropped in the the obs uh kind of like ecamm. um Also streamlabs is also, I guess. The the one thing to point out is like obs is kind of the underlying software for a lot of these other projects. These paid products, um so you can learn obs and a lot of that stuff will transfer over. uh If you end up wanting to use a paid product, and then I think the inverse also is.

A

B

Well, so, if you end up going like an ecm or a stream labs or even twitch studio, um you'll get the the gist of it. If you don't want to sort of plug and play and wizzy wig everything on your your browser or your your stream.

A

Yeah yeah, I used uh stream labs at first, and so I think, that's good if it's real, quick I'd like to spend one second talking about that, because I think it can help a lot of folks is that streamlabs obs is actually free. You can still open and use that. But then what you can also do is sign up for a streamlabs account which they have a free account as well, and it will give you a lot of things like a pre-built chat bot.

A

um They even have like stream, overlays and free templates that you can use, which are surprise, browser sources um that you can add into stream labs or even obs like. I know, a lot of people who have a streamlabs account, but still use obs, not streamlabs obs, because it's going to provide you with a lot of the same urls and browser sources that that you would use. So it is cool that you can do both. But the neat thing about starting with streamlabs is that you don't have to build all the stuff yourself.

A

You can see like how they use browser sources and get something up and going, and then you know you can start to replace those one at a time right like oh, I move my layout to my own hosted website. Now I update that browser source. I want to do my own chat or bot. I can. I can migrate gradually, so don't feel like you have to take on learning, obs and and all of that yeah, the the obs ui is meh.

A

It is it's not the best ui, and because of that you know um you, you could use something like this. uh It's about like finding the simplest solution. That's going to fit.

B

A

Needs we do a lot of really complex and complicated interactions and we plan to expand that to more and then also when it comes to sharing browser sources. Make it very easy for us to share layouts across different computers and stuff. So.

B

Yeah yeah and uh there's a question from living in a van about the. Is it possible to have worker threads to handle animations and browser sources in conjunction.

A

There is an entire documentation section on what you can do with the webkit stuff inside of obs. I don't remember seeing anything about web workers, but I also I'm not going to say. No, I would say, do do a little bit more research. Oh they do have which something is fun that I discovered and in their entire own event api. So you can respond to obs events within your browser sources. If you are writing custom.

B

Javascript yeah interesting, that's really neat, I mean yeah, I mean there's, there's so much you can do because I've messed with um obs web hooks, which is a plug-in, so I can send web hooks to my stream deck to collapse. A video and stuff like that.

B

I don't do it for the github stream, but I do it for my personal stream that I've since turned off, because it is intensive, um which is something I do want to point out- is like if you could spin up a web server to power your obs and these web hooks and api consumptions that trigger to your obs.

B

It sky's the limit. Basically, so I know for a fact it's a limit. uh Who was it? I? I think it was um one of the guys used to be on the go, the the go time podcast um eric st martin martin. He has a bot built-in go that uses go routines so which is a concurrency and having separate writing and stuff like that. So, like all is possible if you can write code- and I think that's that's.

B

What we're getting at as well with this conversation is the fact that you can leverage you can go and fork and star and clone all of kurt stuff um or you can build your own stuff or you can attach your own stuff to your curt stuff and have plug-ins for kurd stuff. If you want to go that far um and do that yeah, I don't know if you have a plug-in architecture, but I'm just throwing that out there.

B

If someone wants to uh impress the uh the apollo dev rail manager, that's one way to do it. Yeah yeah.

A

We don't, I don't have like an official plug-in architecture set up, but it's actually. I would imagine it's straightforward to go through and and see where you can add things like chat, commands and stuff like that and how it's architected and actually we'll go through that in a second. If that's cool with you yeah.

B

A

We won't dive too deep into it, but yeah you can absolutely right like forks fork. This start it. um This has been inspiration for some other projects, so like md next, I don't know how many folks might be familiar with that project, but it's about using mdx in a bunch of different places. They have a stream overlays like boilerplate, like starter kit, um that can help you. I don't know what md next is under.

A

I I noticed demetrius.

B

Clark who's running the project, but I don't think they have their own org. Yet I don't think it's him yeah. I think he has an org um and I know what you're talking about exactly. Oh, it is him. Okay, well,.

A

B

Is under him, yeah, okay, uh yeah, I'm not sure where his stream stuff is, which I should have. I know.

A

B

Been a while, um since he's uh streamed, yeah yeah, but.

A

We're having a whole.

B

A

Yeah yeah he's great, but this stuff is still it's used by a lot of people. A lot of other people have adopted this pattern and are are using it um and they're streaming. So you know it's definitely. um You know when we talk about open source like yeah. Please go use this and extend it and and share with me the things that you do because, like I have ideas like, I want to respond to channel points and set up like.

B

A

Commands and stuff for folks uh to be able to either change my lights or maybe make me sing a silly song or something who knows but like just really fun interactions, we're just scratching the surface, but speaking of scratching the surface, if you want, we could take a look at like what's under the hood, yeah and dive there.

A

So I guess let's, let's actually do a demo of like how this works and then we'll we'll actually go and look at the flow of that. If that's cool so in here. So actually I can type the command because I have it open as well. So let me just go type: a command real, quick.

A

All right there we go so if I send that over boom okay, so it's popping up a little bit out of there, but you can see I'm on github right, so I type this meme command um and anytime. Someone types that meme command into the apollo chat. It's it's what's going to happen is that that that chat command gets sent to a graphql server, it's going to parse that command and see if it's something that it understands.

A

If it does, it's going to take that information and boil it down uh into like the the form to be returned to the client and then the client is going to pick it up. It's a react, app and respond to that subscription and we'll go through it. So, let's go through the path of like what happens now in in the code like when this chat message sends.

B

A

We want to jump back to github, we go to the server directory and in here it's pretty shallow. We should see um chat.js. So let's open this up, because the logic is going to live here. So here you can see. I have kind of a command map of the different things that you can do and the top one is that meme that generates meme yeah.

B

A

If we scroll down a little bit further, you might even be able to search for generate meme, but it should be one of the first first.

B

Yeah the line 15.

A

Hit it again, the second one, sorry, I guess it would be the next one where we actually do the implementation. Okay, perfect. So when we generate the meme, we are taking the text from the message we're splitting it apart, we're using cloudinary to that's where we store the the templates and we uh we scroll down a bit more. We build and keep going we're gonna see somewhere. Here we go pub, sub dot, publish, display, meme right, and so this pops up. This is the graphql part of it.

A

The subscription this is going to get sent down to the client. So if we go into the client folder now we have a component that is set up to handle this. So back one more folder there we go, and so these are two separate projects. The client gets deployed to netlify and the server gets deployed to render dot um uh io, actually maybe render.com yeah.

B

A

And uh yes, yep yep, so they it hosts. So it's a great always running graphql service. So if we go under source and uh components and we should see um oh open up c- oh that's interesting, can you go back to source.

A

Where is our okay go claw source, um one more directory up? I'm sorry, I guess we'll look in the router. So if we go to app.js, I just can't remember where I I um put the means so memes path, memes overlay,.

B

A

Thank you. Thank you.

B

Yeah, it's uh I'm looking at the the commit it was eight months ago. So fair enough.

A

Yeah yeah, exactly here we go and so what's happening here is we're using a hook that is connected to that subscription um and that's going to uh get the the the meme and then like play the sound so that that's how all of that is, is essentially going to work.

B

Nice and then you're, um you said you're hosting all your images on cloudenary, so you're, using some sort of key value, lookup or something or you're, generating the urls. So.

A

Yep we're generating the url, so that was happening back in that chat um thing. It was just all codified out, but okay um right below where we pulled out the information from the message we're generating that url and then that happens right before we do that publish um command to send the url to the client. So the client really just gets the url. So actually, um if you want to go into the client hooks yeah.

B

Yeah and I'm just pointing I'm.

A

Looking at your.

B

Using framer so you're able to leverage modern web development tools to be able to do that cool examination.

A

B

A

Any react library that exists. That's available to you all of these uh tools. You know open source projects that that um you want to use it become available to you in your stream scenes, and this.

B

A

Powerful and then we talk about like we can also lay them out right like so. This is here um the thing that we're um dancing around there, that other page with the the purple background.

B

And the stream.

A

Title so all of this um is another view right like, but this one is is a little less interactive, but it is it's pulling actually the title from uh google calendar um and those upcoming streams that are ticking come from google calendar, and so I pulled this in as a browser source. I'd never have to update the title. It automatically updates for me because of that it'll tell you what streams are are coming up and I'm able to do this because uh uh you know I'm, I it's it's browser-based right, so.

B

I can make calls.

A

Out to apis, I have my backing graphql api, so I connect that to google calendar to twitch to other services, and it just opens up um a lot of doors for.

B

My personal site, real, quick stream yeah- can- I just show this uh on the apollo channel just to kind of land. This yeah olographql, perhaps there's like a recent vod. Oh there are yeah.

A

Because I just wanted to uh see all this in action just for.

B

Folks, who aren't successful.

A

B

The streaming uh you can see actually I'm just click the uh we're gonna go into ad ad territory.

A

Yeah my bad yeah yeah yeah, that's the one thing I dislike about twitch, but I think it's okay like what you gain from.

B

Yeah so like at this case in point the community, the chat interaction all that stuff and having that engagement of like what we could not do during the year, which was have meetups. um It's definitely worth you know, making sure that bezos can small.

A

Price eventually.

B

A

Yeah, just gonna click.

B

Through to when you all show up so this background, you're, basically putting your- I don't know if whatever you zoom or skype uh on the screen, adds its own source video source. You've got your your screen as a source, but the background is static. This is the background. The background.

A

Is static, yep, yeah and likely static, but the title is kind of dynamic right because I'm getting.

B

It from graphql.

A

Api but static in the sense that I don't manually, go into obs and update any of that. I open up obs. I make sure that I'm pointed at the right um scene layout for the right show and that's as simple as so right there. It says orbit. If you go back to um the example and the the netlify one, so it says orbit you can change that from orbit to like mission dash briefing up in the url and it's going to change the layout.

B

A

Yeah yeah, this is so we have.

B

Yeah, this is great: it's like modern web development with your little router, but it's so.

A

B

Just grab the background get the stream going, which anyone yeah and what's what I want to point out real quick too, as well, is like we, we talked about ecam briefly, uh stream yard is another one that folks they gravitate to as like. I don't want.

A

B

Want to figure out all the bells and whistles of getting this to work, um so I'm going to use stream yard and pay for a license there. Yes, you can build your own sort of setup. Overlays chats, like you know all that other stuff you get for streaming art. You can build yourself. If you wanted to, um you could pay a.

A

B

A

You could pay for it, and the neat thing is: is that your stream, um unlike the web, which is now very responsive, um we're back in a world with set dimensions that we we know? It's always going well, if it's always going to represent your base, canvas size in obs and in my case it's like 1920 by 1080 right so.

B

A

Working within that, so I can give instructions to people create a browser source load. This url set it at these coordinates with this width and height and you're done they. You know they can recreate my stream layouts by following you know, a quick dock in a matter of a couple minutes, as opposed to finagling, with this trying to get the same. You know fonts and and colors and and everything pixel perfect and lined up yeah.

B

And I just want to point out that uh gregor's epiphany moment that's happening right now like this is what I had like, probably nine months ago, when I finally figured out. Oh, it's just a browser source because there's a lot of there's a lot of sort of uphill battle and like churn, you have to go through to be able to just one have a consistent stream, but then two.

A

B

Have stuff that is engaging and have chat interactions and do overlays once you realize it's just a website now as a developer, which is the audience here which surprised everybody's here wondering why you're here developers.

A

B

Audience so you can build your own thing and you become the you know: the next ninja or pokemane or whatever I'm gonna hit another ad, honestly yeah so and yeah.

A

Yeah and for a long time I have been, um you know, I I feel like this is only just starting to scratch the surface and like so for my personal stream and my website, and I even have a shop that I'm like moving on to my website, I'm starting to look at like because I have the ability to build this like a backing platform that I can react to in all these different places in real time.

A

This opens up doors for things that, like um would be really difficult in any other scenario, and what I mean by that is like I can be live on stream and if somebody goes and likes one of my blog posts, I can respond to that on stream.

A

I can have something pop up like oh, you know this post just got liked or here's my top five posts right like I can add that chamai uh command into my chat bot and I can uh respond to people with with you know the posts or, if somebody or I go, live right. My website updates- because I have that information available to me, and so I'm really starting to. um I want to blur the lines between platforms and I think that's the next step for me.

B

As in platforms as like youtube,.

A

Twitch platforms, or, as in like twitch my personal website, a shopify store like it really anywhere that you are polywork, like you know, bringing information in there anything that has like an api notion right like like any of these things that are sources of data where I am active on the internet, I want a backing platform that gives me access to all of it and then also real-time access to updates, as it's happening. Okay,.

B

A

I think that unlocks just like, like you, could have on twitch somebody gets like 20 000 channel points and that automatically gives the next person on your shop a discount code for like twenty percent off there, yeah.

B

A

B

The the lines I love very blurry- I love where you're going at with this, because I've been so. This is uh not graphql or anything like that, but this is like. um Oh, you know. Of course this is.

B

Oh, I have the latest one anyway. What I'm getting at is there's a tool that I've been using, uh which is someone that it's been in my community for a bit which is tau. So this is python based and django, but it is an api unifier. So like if you're looking for inspiration, uh I think what financing writer is working on right now uh is going to be really cool and huge, and I'm actually integrating this into my stuff. uh I'd love to see this in the graphql sense as well.

B

um So- and this is just the beauty of uh having things like uh having this open source- is like when you talk about shopify, that's that sounds like streamlabs, which streamlabs dubs does with their merch um exponent, but their merch component is not great, um so.

A

Like being able to leverage.

B

Things like shopify, which is a better experience across the board developer side as well as consumer, and it's also a well-known property that that sounds nice and like and andresa in there saying um take shape is uh another tool that also does the sort of mesh as well.

A

One graph does this for graphql already um two of cents. Yes,.

B

A

B

A

I don't know if one graph supports subscriptions, though, which is the the issue for me. So for the real times, yeah.

B

A

Yeah on select but select, endpoints or select exactly have subscriptions.

B

Not all of them.

A

Yeah yeah yeah exactly and then you know, there's still areas where, like some of the data is custom and not really in a given platform, but my own platform like the whole liking system. For my blog post, that's you know it's postgresql, it's a smaller graphql api. Actually, you could share that as well. It's an open source repository. It's my github! The repository is the worst.dev um and that's actually what's backing my personal streams and this um and uh has like a the bigger um platform where I'm starting to integrate other data sources.

A

So it's just another example of me reusing this pattern, but taking it beyond streaming into my own personal website and and beyond that, so I'm going to move all of my stream scenes into the same next project as my shop as as my website pages all with that backing platform. It's all going to be unified in here. So.

B

Yeah I mean this is great content and we already had one person who said I have to come back and watch this again, because I'm working and there's too much great content. I.

A

B

um Like this is exactly what I my dream for bwi, which I've been slowly realizing very slowly, uh which is also powered by one graph. Oh look at this. um So like all these little notification, stuff reactions are actually powered by a github repository. So that's where all my.

A

B

Come from that's as far as I've gone now like, I haven't done much much more work with this, um but I love where you're going at with it. I'm definitely gonna be um starring this and watching this for sure uh we need to. Actually I need to get all activity. I just need to know whenever you push something new, because I will.

A

Yeah watch this I mean this is my focus for the next half of the year. I'm I'm adding the shopify part um right now um on stream, we're on the apollo stream.

A

We have another one called launchpad and that's where we like build either a feature or an app from start to finish, using a different tech stack and right now we're adding my shop, which I have that exists where I'm going to embed it right, I'm using putting it behind graphql behind my graphql platform and moving it over to my actual website, and so that's step. One of this I'll have enough data sources.

A

Then, where now I'm gonna start to branch out and start working with channel points inter uh uh cross platform, kind of notifications and real-time engagements. It's it's gonna be interesting.

B

Yeah yeah, I I mean this is all the stuff that and then why I invited you on, because you know I do live streaming. I'm doing this right now live streaming and I'm just looking to level up and gain more knowledge, which is like surprise. This is why I invite open source maintainers to chat.

A

B

A

I want to hear their experiences.

B

It's not about you, know having the large projects, and you know the heavy hitters. It's about sharing knowledge and making sure that I'm.

A

B

Well, as the folks in the chat are learning as well.

A

Yeah and all of this is enabled through open source, and I am also not the originator of these ideas right, like um you know, folks, have been using browser sources um long long before me, but I didn't know about it. You know- and I had not really seen it applied to um coding streams as much and I was like well. This makes sense. Like you know, these are the tools I'm comfortable in it's going to allow me to build the things that I want to exist faster, so I went ahead with it.

A

You know, but I do it in open source. I try to build anything that I build in the open.

A

um uh You know one of the things that I've I've realized is that um you know doing anything in isolation uh opens the door for you to uh miss opportunities to learn new things, better practices than the ones you're implementing now tools, ideas that you didn't even know existed, and I experienced this the most when I worked at major league soccer, we adopted graphql very early on and there was not a lot of information, so I tried to write about it and tweet about it.

A

In the open, I started ny, uh graphql, nyc, meetup and a bunch of other stuff to get that information out in the open and get other people talking about. It honestly selfishly to make sure that what I was doing was you know the best way at the time to be able to go about like working with graphql at scale and in production.

A

um You know, and open source just enables us to to quickly collaborate, share ideas and scale things out that, like otherwise would just they're not exist, be lost, be that you know that domain knowledge that's held um closely to the chest and I just think like learning in public open source, they were fundamental um for me learning how to program, um and so I try to it's like one way of paying it back is to. You know, put everything that I do into the open, so other folks can enjoy it.

B

Yeah yeah for sure um I I'm right there with you and I I'm a big proponent to sharing information publicly, which is the my actually my experience in doing chatbots originally was like seeing jason langstor talk about his and see how cool it was like to see. People like be introduced to the chat the first time on stream and kind of just slide in by just you know, dropping in fun, fun commands to make his beard grow and stuff, and then I also coding garden another one who does lots of streaming.

B

Yeah great chat integrations great overlays, uh but where I struggled was once I started looking at their code, um it was just so complicated and I I didn't have like. I didn't: have this sort of foursome to be like? Oh, okay, I get how javascript works. I get how react works. I get all this other stuff, but I don't get how this talks to twitch and obs and browser sources all together and all the stuff.

A

B

I think we still lack a full, comprehensive guide on how to set this up from start to finish, I.

A

I agree so I've actually been um think well thinking a lot about that. I've actually been thinking about writing that guide myself. I've been holding off, though uh we talked about um uh brent, a little bit brent schooley, who works at twilio, does a lot of this stuff and I believe, he's working on something in a very similar vein, and so I was kind of holding holding off to see um if that comes to fruition, but it wouldn't hurt to have more than one anyway yeah, um but yeah.

B

Before I'm at a point more than one experience more than one angle at coming at this because, like you know, there's.

A

Like there's nuance,.

B

That you're, using um like like I know that you said you're, moving from react to next or I guess vanilla, yeah.

A

Yeah vanilla react so like currently it's a full spa like client side app. um You know which in this case it doesn't really matter that it is. I don't really need anything like statically rendered or or any of that fun jazz, but it's more just about having um all these things in the same technologies and in the same location. So because my my website is built in next right and uh I'm going to, and I don't want to maintain multiple projects for things that are really routes that it doesn't matter.

A

If you go to the worst.dev, like you know, stream layout or some other.

B

A

Url right, so it's really just about that. I prefer the development experience of next. I think statically rendering the layouts could be. I guess useful in some cases, but I think it's just more about like cohesiveness getting the project into a state. That's where everything is. Is you know together, like that singular platform um in the case of the apollo stream scenes technically, I could just leave them in react, but, like I said, I'm gonna migrate them to next.

A

For the sake of consistency, um it's how a lot of people are building apps these days, uh and so I think it just makes a better example.

B

Yeah yeah, yeah, amazing and uh yeah. I 100 agree with the decision like being able to and like it blows my mind that I never thought. Oh, I should have had a new route that says live you know friday stream or whatever they're doing um at the moment. It renders a 404, but I can easily not show the the uh the nav bar and replace this four or four with the page, because next yeah it builds this for you and I get some static rendered stuff. um Absolutely I'm just like.

B

I'm honestly, I'm just like mind blown that had not thought of that. I I actually have a whole other overlay um project. Actually it's funny because I have this and I've never I use it, but it's extremely uh basic. It's a gatsby app that renders uh just my my website name on each side of the the screen and that's it because I've never went back and like oh, I'm gonna make this better, but now I know how to make it better.

B

I need to put that into my website and as I build my website, I can also fix stuff in my overlays yep.

A

And yeah, and so part of the reason for me going to next again too, is like it simplifies things because you create a page, and that is a route for you right, so it's like instead of having to bring in reach router and set up a route for each thing that I do I create the page and, like you said, next takes care of it for you. In my opinion, it's um a little bit easier to demonstrate that to folks, because now they don't have to know that that intermediate step right, I create the page.

A

That is my overlay I put whatever I want to display here and I'm off to the races. um You know, and I think that you know it is super powerful and again, like you know, I I would have thought to put it on my own site, either until like, after a year of of experimenting and building with it, but you're right now, I'll put that on open source and people will be like. Oh look at this. This is so clever. I can do this as well. Yeah.

B

And I was just gonna say the one thing that that is: that's nice around this uh setup too, as well, because I don't know if you want to consider this, but having something.

B

That's separate from your site makes it approachable as well, because that way you don't have to no one has to dig through the cruft and sorry, I'm like I'm taking the stage because, like I'm, I'm getting your feedback real time like I've got my bot, which is my chat, interracial interaction, which is nothing but html, and I do this intentionally because I wrote a blog post for baybot, which is my readme.

B

It's also on dev2, but my actual day-to-day driver is slaybot and slaybot is like baybot, but it slays it's powered by azure, it's using actions, yeah yeah. It's.

A

Overlapping yeah overly complicated.

B

Because this is what I want to use day to day yeah. But if.

A

B

Me how this works I put on the slave bot, and I put them to get twitch, which is the other, the other half of it.

A

That's awesome, and you know this is a good idea, so I have considered creating that and that actually goes along the lines with like the guide like. If I create that guide, um I will also create a clean example that has like one overlay one route that gets the whole picture through start to finish, but is does not include anything actually specific to apollo or my own personal platform. Yeah.

B

uh Real quick, I wanted to take a step back and talk about this chat bots. uh What other um interactions do you have on the chat besides uh memes.

A

Yeah we have a couple right now, um so the honestly the mean one is my favorite.

A

We have a couple different um uh templates that you can do so you could do um like hacker, which is the one we'll always do that when we figure something out, then we have like one of I took a picture of my cat when it was um meowing, but it looks like it's screaming, so it's like scream cat and we can actually see the commands that we have if we go into server chat and then we scroll down these are the commands here.

A

So you can kind of see we have ones that play sounds you can get the schedule, our coc link to the discord.

A

uh The meme is my favorite, um but we have all the ones you can see like the playlist and the current project, like whatever it is that we're working on and again we are only at the initial stage of this. These are the ones we have now like. What commands do I want to see in the future?

A

Oh, my gosh there's all kind of recent stuff, so I want to see uh top five which, just like gives you the top five blog posts currently on the apollo blog or something like that events would be another one that gives you our upcoming events. Instead of just a link to our google calendar, it's like a nice little message out there for you.

A

I want to start getting into more interactive um events through channel points and commands, like you know your common ones like hydrate and posture check, but then other interesting stuff, like I thought about um what does it look like to like use channel points to allow somebody to come on stream with you, and I would set all that up through browser sources. You can like take phone calls through the browser source uh if you use twilio and stuff like that, so I don't know uh like right now. The meme one is my favorite one yeah.

B

A

We're not using this like as in depth as we want to, but we don't know, um we don't know 100 what commands we'll end up with, but we can add any command that we want and I feel like they'll happen more organically. I always find that with streaming. It's the things that kind of evolve um organically, that that tend to be fun like the sounds that we have listed here like I think I can.

A

I don't know if folks will get to hear it but like if you do like uh zap right like if you have the we don't have the right overlay, open and stuff, but if you did that, like you'll hear it, we actually did a whole stream where we created an app called jam spam, uh and we connected it to that. It was basically like showing how to do like real time, audio collaboration.

A

So anyone who had it open, we could all like mix, sounds together, yeah um and so that kind of just stemmed from that, but I find with with like engagement and how I engage with the chat in the community. I don't like to try to like think of things. Sometimes I do like ideas that I think would be fun and I want to test them, but I find a lot of the stuff happens organically.

A

I don't even remember how the memes start, but we were like it'd be so funny if, like people could like meem us like like or something happens, and you could like create a meme on the fly, I think we were talking about cloudanary and how that could enable that.

B

Yeah, I think I think, there's a lot to learn uh from like your approach and also like, I think, as you as you get more and more folks, to join your streams and you see the regulars come through um like we do the same thing with moderation like you, you upgrade folks to be mods on the channel. You can upgrade folks to open up prs for ideas for um interactions which is again exactly for github that'd, be an amazing interaction because we're at github um but yeah. I I.

A

Personally, think that.

B

I'm actually gonna probably start doing streams on the github channel of us, starting to build stuff like this uh and to be able to build more.

A

Community around.

B

A

Yeah, it's a lot of fun and it just opens the doors. It creates an environment where, when that funny thing happens or that thing that you want to become a command even when you discover it, even if it's not related to something that actually happened, you were in a position to be able to go and add it and quickly create it without having to like rely on something you pay for or some other service supporting it.

A

You know, and to me that has always been the most enticing thing about programming is how it enables me to interact with technology in ways that would other either wise cost me or be limited, uh and not quite capable of doing what I want to do, there's nothing more frustrating than being able to get 95 of of the way to where you want with something. But it doesn't do that. One last thing that you were really really counting on.

B

Yeah, that is awesome, and um I think what I'm going to do for this video. We normally put these videos on youtube, after the fact, so I'll make sure to grab these links and throw them up on the the youtube description. If you happen to be watching this months later, because I think this is really really good insight uh and how you all have approached it. um Probably.

A

B

Detailed uh of that I've gotten from any streamer um to dave, actually not even just on stream personally, so it's it's been super helpful for me and I can't wait to sort of dig in on this stuff.

A

Yeah, I hope it's super useful to everyone else. It's exciting, I'm always down to talk about it. You can reach out to me on uh twitter's at the worst depth. That's probably the easiest way to get in touch with me, but I'm happy to answer questions and talk about like how we got there or if you have any um questions about you know other things we didn't cover and there's one.

B

A

Last thing that I want to mention, which is uh live streaming and understanding how to do a lot of this stuff has opened up other doors for me um so right now.

A

I just want to call attention to the fact that I'm in a hotel room, uh I had some unplanned travel that or well it was planned, but I forgot- I misplanned my calendar, uh but here I am, I'm actually using a lot of the same tools that I use to get the stream operating to have a better camera than like my default camera in there.

A

So I'm using my phone's camera and I'm running that through something called obs ninja, which is common uh way to get people and their their screens if you want into obs, uh so it's coming through actually as a browser source, I'm using webrtc to feed my my video feed from my phone into obs and present that as a camera to the stream. So you know this stuff is super powerful and I learned that by learning about how to do this from from other open source stuff. So it's pretty cool.