Installation - nicnacnic/restreamer-dashboard GitHub Wiki

Contents

Prerequisites

The installation guide assumes you're installing on a Windows machine. Linux installation is similar, but is not documented in this guide.

Administrator privileges will be needed to install. Some of these programs use the command line, you should be comfortable using Command Prompt or similar.

Installing Node-Red

First, you want to install the Node-Red package. If you've installed NodeCG in the past, the process is very similar.

Open Command Prompt as administrator, and type the following command.

npm install -g --unsafe-perm node-red

Hit Enter, this should start installing Node-Red on your computer. Give it a couple minutes to finish installing all the files. When done, start node-red by typing node-red in the console, you should now have a .node-red folder in your user folder, located at C:\Users\<username>. In the console you can press Ctrl + C then Y to quit the program.

You can customize the location of the .node-red folder if you'd like, but that is outside the scope of this document. For more information visit https://nodered.org/docs/.

Configuring Node-Red

This dashboard uses some additional packages that can be added on to Node-Red. The easiest way to install them is to do it through the command line. With Command Prompt open, navigate to your .node-red folder. To do this, type cd c:\users\<username>\.node-red, then press enter.

Now, you want to install the three required packages. Type the following commands and press enter, this should install all three packages.

npm i node-red-dashboard
npm install node-red-contrib-simple-gate
npm install crypto-js

Make sure they all install successfully. For the last package, there is additional configuration needed in the Node-Red configuration file. In your .node-red folder, open settings.js with a text editor.

At the top of the file, paste the following text before module.exports = {.

var fs=require('fs');

Next, find functionGlobalContext: { in the file. In that section, copy and paste the following code.

fs:require('fs'),
cryptojs:require('crypto-js')

Make sure to save the file, and your Node-Red should be all set up!

Configuring The Dashboard

Download the latest release, and open the files with an archiver such as 7-Zip. You want to extract the contents of the Dashboard folder in the release to your Node-Red folder, located at C:\Users\<username>\.node-red.

The dashboard is now installed, but some further configuration is required to get everything to look good. Once again, open up Command Prompt and type the following command to start Node-Red.

node-red

Now, you should be able to navigate to http://localhost:1880 to access the editor. Go to the menu in the top-right, click on Import, then on Library, and load RestreamDashFlow.json file. After a couple seconds, a bunch of nodes should appear, signaling that everything is working correctly. If nothing appears but the import was successful, switch to a different flow using the tabs at the top of the UI.

Due to a limitation with Node-Red, you're going to have to set the websocket URL manually to get everything to work. To do this, find the Websocket Setup box in the top-left of the flow. Triple click on the Websocket Out node to open it's properties, and in that properties window, click the pen icon. In the URL field, enter your websocket URL, usually localhost if you're running locally or a public IP address if connecting to another computer. If running OBS on another computer, make sure port 4444 is open in your router to allow the connection!

Running OBS-Websocket locally:

ws://localhost:4444

Running OBS-Websocket on another computer:

ws://<public_ip>:4444
Make sure to forward port 4444 in your router settings!

Once your done with that, you can just click Update then Done in the top-right to save your changes. Repeat the same steps to change the URL in the Websocket In node, it should be the same as the first one. Finally, you need to enable the custom dashboard theme. To do this, click on the down arrow in the top-right, then click on Dashboard. Next, go to the Theme tab, and in the Style dropdown, select Custom. Then, select the book on the right, click on Open Library, then load the NodeCG-Theme-txt file.

And there we go, the dashboard is properly configured! If you have Use Authentication disabled in OBS-Websocket, you should be able to click on Deploy on the top-right, and navigate to http://localhost:1880/ui to see the dashboard! You might be able to click on a few things and see changes in OBS, but there are going to be things that aren't working. We'll set those up next!

Before you proceed, it is highly recommended that you save your changes to avoid reconfiguring the dashboard in the future. To do this, go back to the editor, open the menu in the top-right, click on Export, click on Library, click on RestreamDashFlow.json to overwrite the previous save, and then click on Export to Library. To load the flow in the future, just import it like the steps above.

Editing The Config File

The dashboard includes a config file to avoid the need to enter the editor to change things. This config is located in C:\Users\<username>\.node-red\RestreamDash. There are a bunch of things that you can change regarding settings, scenes, and sources, but we're going to focus on the most important settings here. A full explanation of each setting can be found on the Configuration page.

In the config folder, open RestreamerDashConfig.json with a text editor. Note that this is a JSON file, so the syntax must be correct to load the file into the dashboard. You can use a web app such as JSONLint to check that the file is valid. There are a couple settings that interest us here.

Note that you cannot change the browser/RTMP feed source names. They must be P1 Browser, P2 Browser, etc...

  • UseRTMP: This dictates whether the dashboard uses Twitch or RTMP for the runner stream input. Default: false
  • RTMPServerURL: This is the RTMP server URL, if using RTMP. Leave blank if you're not using RTMP. Default: rtmp://rtmp.test.com/live
  • WebsocketPassword: This is the password that is used to authenticate with OBS-Websocket. You must have the plugin properly configured for it to work correctly. If you don't use authentication (which is not recommended), leave this blank. Default: password
  • AdvancedPassword: This is the password that protects the buttons in the advanced tab of the dashboard. Do not leave this blank, otherwise none of the buttons will work. Default: password
  • NodeCGDashboardIP: This is the link to your NodeCG dashboard. This must be a full URL, if running on your local computer the URL is usually http://localhoast:9090. Leave this blank if you don't have NodeCG, you won't be able to use the NodeCG integrations. Default: http://localhost:9090
  • MonitoringTwitchChannel: This is the Twitch channel that is used in the Monitoring tab. You must have a SSL certificate for your dashboard to get the player to work, see the Security page for more information. Default: nicnacnic
  • DashboardURLParent: This is the URL of your dashboard for the Twitch player. If using HTTPS, put your domain/subdomain/public IP here. You'll need to omit the https:// and /ui in your URL. Default: twitch.tv
  • AutoRecord: Records whenever the scene is not in intermission. Useful when uploading runs to YouTube, no more plopping a 12 hour recording into Premiere Pro! More information can be found on the Using The Dashboard page. Default: true
  • Transition: This is your transition name in OBS. When the Transition button is pressed in the Scenes page, this is the transition that will be used. Default: Stinger
{
        "UseRTMP":false,
	"RTMPServerURL":"rtmp://rtmp.test.com/live",

	"WebsocketPassword":"password",
	"AdvancedPassword":"password",
	"NodeCGDashboardIP":"http://localhost:9090",
	"MonitoringTwitchChannel":"nicnacnic",
        "AutoRecord":true,
	"Transition":"Stinger",
	"Cut":"Cut",
        ...

Below all this is the scene configuration. This is where you can configure the scenes that are switched to each time the corresponding button is pressed. The defaults are fine if using the included scene collection, but if your scenes have different names in OBS and you don't want to change them, this is where you would do it. Note that the button labels on the dashboard will not change.

	"Scenes" :{
		"Intermission":"Intermission",
		"IntroVid":"Intro Video",
		"OutroVid":"Outro Video",
		"Countdown":"Countdown",
                ...

The last couple scenes, named Custom 1, Custom 2, etc... are near the bottom of the document. Here, the button labels on the dashboard can be changed by changing the CustomXName value. There are only 5 of these and you cannot add more.

		"Custom1Name":"Custom 1",
		"Custom1":"Custom 1",
		
		"Custom2Name":"Custom 2",
		"Custom2":"Custom 2",
                ...

And finally, the very bottom of the document contains the audio sources. Same thing applies here, if you're using the included scene collection, there is no need to change this, but if your sources have different names in OBS and you don't want to change them, this is where you would do it. Note that the button labels on the dashboard will not change. You can also specify three custom audio sources like the scenes above.

	"Audio" :{
		"P1Audio":"P1 Browser",
		"P2Audio":"P2 Browser",
		"P3Audio":"P3 Browser",
		"P4Audio":"P4 Browser",
		"Discord":"Discord",
		"Music":"Music",
                ...

And that's it! Make sure to save the file to save your changes. To test everything out, go back to the Node-Red editor, click on the down arrow next to Deploy, and then click Restart Flows to load the config. You should now be able to go to the dashboard at http://localhost:1880/ui and start using it! Please note that if the JSON is invalid, the config won't load, so you'll need to fix it. Again you can use JSONLint to verify that the config file is valid.

More Configurations

Need to make your dashboard more secure? Visit the Security page to learn how to protect your dashboard with a password, set a custom URL, or enable HTTPS to allow the Twitch player to work!

⚠️ **GitHub.com Fallback** ⚠️