OBS Scene Transitions - NodeCG

OBS Scene Transitions - NodeCG

I've been looking to really up the production quality of my stream in general as of late, and one of the things that has really caught my attention has been the use of the CLRbrowser and HTML5 functions.

NodeCG is probably the best option for better animations and visuals on your stream, however not many people know about it and the ones that do are pretty much charging a fortune for it.


(Node.JS) https://nodejs.org/en/

(Git) https://git-scm.com/

(NodeCG) http://nodecg.com/

(ObsRemote) http://www.obsremote.com/


Now if you haven't already read the instructions over at NodeCG for installation we will go over that real quick.

Open up the Node.JS command prompt and install the Command Line

$ npm install nodecg-cli -g

Once you've done that make a new directory
$ mkdir nodecg

Then change to that directory
$ cd nodecg

Install NodeCG
$ nodecg setup

Finally start NodeCG

$ nodecg start

If you've done everything properly, you wont have any errors and NodeCG will start allowing you to enter the dash http://localhost:9090 is where you'll find the Dashboard. It will be Blank.

Now if you've received an error about GIT not being in your path, go to your start menu and in the search box type advanced system settings, and hit enter. The folder that appears will look like this.


Click Environmental Variables, located just above Cancel and Apply.
A new tab will popup that should look like this.


Find Path under System Variables as pictured above, highlight Path and hit edit, in the new page you'll see 2 input boxes please add ;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd at the end of the variable value box. Now Git should be in your path!


Now that we have everything installed and running let's move on to getting things setup to be awesome!

https://github.com/Tam/nodecg-transition - I personally see no reason to use the command prompt installation, simply download it and unzip the file dropping it's contentes into your bundles folder.

In most cases by default NodeCG can be found here "C:\Users\User Name\nodecg"
After adding the bundle go ahead and restart NodeCG by closing the command prompt and opening a new one additionally remember to open the settings.json file w/ notepad and editing the OBS remote settings to your own.

After starting NodeCG again head to your favorite web browser and open up http://localhost:9090 in the url box. Now you'll actually see a panel w/ commands. Now you'll need to add a transition! I've uploaded a simple quick transition for everyone to get an idea of how everything works.

(Freebie Transition) http://www.filedropper.com/blinds

Click ADD Transition

Click Choose File

Upload your file and press the + button (nodecg can crash if you actually store the transitions in the video folder inside of the bundle, I suggest making a new folder elsewhere to house your transitions.)

Set your transition name and resolution

Last but not least hit the PLAY button on the preview video to time the transition, and hit add transition.

Now simply add http://localhost:9090/view/nodecg-transition/ as CLRbrowser global source and add it to all of your scenes as the absolute top layer, and use the Dashboard panel to change your scenes.

I'm not 100% sure how many people are going to go through all the trouble for this, but if the popularity and development increases w/ NodeCG it will only be better for all of us.

I have a load of WEBM and HTML5 video stuff, and I'd be happy to share if are going to actually popularize these types of endeavors!

Credits to NodeCG team & Tam for the epicness

I've included some other bundles/resources I've found interesting








Some if not all may require other bundles to be installed to work w/ certain aspects of twitch api or otherwise.

First release
Last update
0.00 star(s) 0 ratings