I Made A Twitch Channel Point That Autogenerates TikToks…

Every stream advice YouTube channel talks about how if you want to grow on Twitch you have to make Tick Tock videos but there’s one really big flaw with that logic I don’t feel like it’s too much work so instead I programmed a twitch Channel Point reward that my viewers can type a

Message into and when they redeem it it automatically starts recording a tick tock video whatever they type in gets read out by that annoying Tick Tock girl voice you know the one that sounds like you want to claw the inside of your brains out here are my thoughts on the

Future of twitch that animation that’s not just cosmetic it literally records a separate vertical video inside of OBS I even programmed it to automatically upload that video straight to my Discord server let’s talk about how I did all of that this video is sponsored by skillshare skillshare is an online learning

Community with thousands of classes ranging from topics like animation film programming look I know we’re going to be Auto generating our tick tocks today but I did for real actually start making actual real tick tocks and you’d be surprised just how different before format is that how Tick Tock Works seriously the

Attention span of people on Tick Tock is like half a second so trying to hook people in in that first second is something really difficult to do Josh O2 Sanya has a great video on scripting shooting and uploading your first Tick Tock video and he shows you how to come

Up with an idea how to keep your script as simple as possible so that you can make a tick tock video that’s really really engaging so if you’ve ever wanted to learn a new skill check out the link Down Below in the first 1000 of you will

Get a free one month trial of skillshare’s Premium membership let’s start right back at the beginning so to start we needed to find a picture of a phone to use so I went to Google images and I found this picture then I went to OBS I created a brand new scene and just

Added that image into that scene I wanted to animate the phone going up and down so it kind of looks like someone’s pulling his phone up to start recording and that’s really easy to do inside of OBS you just change the show and the high transition of that phone image then

I took my camera and shoved it behind the phone so it looks like I’m inside of the phone screen I had to make a Mac camera to cut into the same shape as the phone’s display and since I wanted the phone and the camera to be grouped

Together I just added them into their own nested scene next I wanted the phone to start really far away and then zoom in to fill the full height of the screen you can use an OBS plugin to do that called move transition you just add a move transition filter to the scene and

You tell it which sources you want to move in and out and what position to put them on the screen so if you have all of the steps for our macro so it’s just you show the phone you zoom the phone in Zoom it out and then you hide it again

But now we need a way to chain all of these actions together kind of like a big gigantic macro so we pulled out our favorite program streamer bot because not only can streamerbot make these big multi-actions for turning sources on and off and whatever an OBS but that macro

Can also automatically be triggered every time someone hits that channel Point reward so I made a new action inside of streamer bot this is what’s going to hold our big action then we created a new twitch Channel Point reward and Link that channel Point reward to that big macro I decided to

Use straight up raw code to make our macro you don’t have to use code to use streamer bot but like it was just easier for me that way anyway we just started with a really basic animation so we put in some commands to show the phone

Source Zoom that Source in Zoom it out and then hide it again and because we added our phone into its own dedicated scene we can just add that scene on top of our regular game scene this is where I ran into our first problem see I’m super detail oriented and so what I

Wanted to do is when the phone zooms into the camera I wanted everything behind the camera to go blurry kind of like it’s going out of focus and you can’t do that effect if you’re just nesting That Bass scene into your game scene so I had to get creative what I

Did instead is inside of that original bass scene I added a stream effects Source mirror underneath the camera then in my macro I programmed it so at the very start of that animation in it points that Source mirror to whatever the current scene is then it switches

Out of the current scene into the base scene and when the animation is done it switches back to the original scene I swear nobody understood what I just said just then but I promise you it works on the surface it doesn’t look any different but now we can add a blur

Filter to that Source mirror that’s sitting behind the phone then using the move transition plugin whenever the phone Zooms in we can animate that blur in then when the phone zooms out we can take that blur away and it’s just that extra bit of polish that just really it

Just really sells the effect I swear this is this is the that gets me excited dude but no Tick Tock videos complete without that annoying Tick-Tock girl voice so I wanted my viewers to be able to type in whatever message they want and whatever they write out gets

Read out as text-to-speech I did some Googling and luckily someone made a python script that literally uses the exact same Tick Tock voices so you can just type in whatever message you want into like command prompt and then it will download an MP3 file that uses the tick tock voice and it’s completely

Authentic because it comes directly from Tech talk POV when you’re watching a free YouTube video and you’re not even smashing that like button so with that all I needed to do is to write some fancy code inside of streamer bot that takes whatever you write inside twitch chat and then

Converts that to an MP3 file that we can just play inside of our macro now what else does every tick tock video have black text inside of a white box or white text inside of a black box with those annoying emojis I hate that

So yeah let’s add that in so we ran into a couple more problems here so the first one was I wanted my viewers to be able to write what goes inside of that caption box but they’re already writing something for the text-to-speech part so I basically just require my viewers to

Put a semicolon in their message and everything after the semicolon will go inside of the caption everything before the semicolon will go inside of the text-to-speech part initially I was just gonna add a basic text Source inside of OBS and then whatever my viewers write will just fill in that text Source the

Problem is um emojis it doesn’t support emojis very well that way also putting the Box around the text is kind of hard so I resorted to making a browser source and then I would just pass the data over from streamerbot into our browser source so we can fill the caption and then we

Can format the caption however we want and it’s going to support emojis and everything so at this point we’re pretty close to being finished we’ve got this cool animation of the phone popping up we’ve got some text-to-speech we’ve got caption and my viewers can write whatever they want to fill in both of

Those things now I want to actually record whatever appears on that phone I don’t want it to record the full screen I wanted to record just that vertical section that’s inside of the phone turns out there’s another OBS plugin called Source record and this is a really cool plugin we’ve

Covered on the channel before but what you can do is you can add a source record filter onto any Source you want in OBS and then you can just set all your recording settings here then anytime you enable that Source record filter it’s going to start recording

Until you turn the filter off this is awesome because in theory if I want to record my screen inside of our macro all we need to do to start the recording is to flick that filter on and then when we want to stop the recording we just turn

It off unfortunately like most things in programming uh it’s not that easy the source record plugin is pretty buggy I noticed sometimes I would start a recording and then the file would get corrupted and then I can’t start another recording it was which is really annoying so instead what I did was I

Added some code inside of our macro to make a duplicate of that Source record filter and then when I want to stop the recording I just delete it and for whatever reason that seems to be less buggy I don’t know I didn’t make the plug-in you figure it out so that’s the

Recording part done so let’s do a quick recap the viewer redeems a channel Point reward phone pops up does text-to-speech while showing the caption meanwhile in the background there’s a recording going on that when the phone goes away we’re left with a single video file now we

Want to take that video file and automatically upload it unfortunately uploading directly to tick tock is kind of annoying and plus I didn’t want to have all these Tick Tock videos flooding my Tick Tock account so uh my backup solution was to take the videos and upload them to my Discord server instead

The good news is streamerbot now has Discord support and so what you can do is you can make a new text Channel inside of your Discord server you can go into the settings and into Integrations and create a web hook URL and so this is what streamerbot is going to use to

Communicate with your Discord server so you just take your web hook URL you add a new action inside of streamerbot and then you paste the URL there then select the video file bam that’s it it’s as easy as that so yeah with that last step where we’re

Pretty much done so we’ve got a new channel Point reward my viewers can type a message does text-to-speech does an automatic recording and uploads that to Discord and uh yeah all that took me around six or so hours to do and uh now what I wanted to do was just add that

Little bit of extra polish at the end which took me another six or so hours I wanted to make a countdown animation to really sell the fact that it’s a tick tock recording so I pulled up hitfilm Express don’t ask me why I didn’t use After Effects I think the answer is

Pretty obvious I’m a twitch streamer not a millionaire I tried to make the animation look as close as possible to the countdown animation that Tick Tock actually uses Plus I even added the red record button that goes on whenever you’re recording the video and the last

Thing I wanted to do was add in twitch emote support for the caption I found a really cool resource that allows me to pull every single twitch emote BT TV emote fmz 7tv every emote I can take and then all I had to do was inside of the

Caption every time I see the text that matches an emote I just replace it with the image which is something that I say is easy but took the longest out of everything I had to do with this thing because I don’t know how JavaScript works and I have to figure that out but

With all that said here is the final result fault here are my thoughts on the future of twitch man twitch is gonna be just fine okay everybody who’s complaining and like I want to move to YouTube cringe L you know that’s what I think about that L plus ratio thank you

That was a good prop by the way I really like that one here are my thoughts on the future of twitch hope you guys enjoyed that video get the hell out of here uh go follow me on Twitch uh sub to me on patreon I’ve been releasing some custom-made widgets

There uh not not this one though this is my I’m keeping this one for me only but uh I have other widgets there that you might want to check out so uh thanks I’ll see you guys in the next one