nodecg / nodecg

Create broadcast graphics using Node.js and a browser

NodeCG

NodeCG is a broadcast graphics framework and application. It enables you to write complex, dynamic broadcast graphics using the web platform. NodeCG has no graphics or drawing primitives of its own. Instead, NodeCG provides a structure for your code and an API to facilitate moving data between the dashboard, the server, and your graphics. It makes few assumptions about how to best code a graphic, and gives you freedom to use whatever libraries, frameworks, tools, and methodologies you want. As such, NodeCG graphics can be rendered in any environment that can render HTML, including:

• OBS Studio
• vMix
• XSplit
• CasparCG (v2.2.0+)

Don't see your preferred streaming software on this list? NodeCG graphics require a modern browser engine. If your streaming software's implementation of browser source uses a recent-ish browser engine, chances are that NodeCG graphics will work in it. You can check what version your streaming software uses for its browser sources by opening whatversion.net/chrome as a browser source.

Have questions about NodeCG, or just want to say 'hi'? Join our Discord server!

Documentation & API Reference

Full docs and API reference are available at https://nodecg.dev

Goals

The NodeCG project exists to accomplish the following goals:

• Make broadcast graphics (also known as "character generation" or "CG") more accessible.
• Remain as close to the web platform as possible.
• Support broadcasts of any size and ambition.

Let's unpack what these statements mean:

> Make broadcast graphics (also known as "character generation" or "CG") more accessible

Historically, broadcast graphics have been expensive. They either required expensive hardware, expensive software, or both. NodeCG was originally created to provide real-time broadcast graphics for Tip of the Hats, which is an all-volunteer charity fundraiser that had a budget of $0 for its first several years.

Now, it is possible to create an ambitious broadcast using entirely free software and consumer hardware. The NodeCG project embraces this democratization of broadcast technology.

> Remain as close to the web platform as possible

NodeCG graphics are just webpages. There is absolutely nothing special or unique about them. This is their greatest strength.

By building on the web platform, and not building too many abstractions on top of it, people developing broadcast graphics with NodeCG have access to the raw potential of the web. New APIs and capabilities are continually being added to the web platform, and NodeCG developers should have access to the entirety of what the web can offer.

> Support broadcasts of any size and ambition

NodeCG's roots are in small broadcasts with no budget. More recently, NodeCG has begun seeing use in increasingly elaborate productions. We believe that one set of tools can and should be able to scale up from the smallest show all the way to the biggest fathomable show. Whether you're using OBS for everything, or a hardware switcher with a traditional key/fill workflow, NodeCG can be a part of any broadcast graphics system.

Maintainers

• Matt "Bluee" McNamara
• Keiichiro "Hoishin" Amemiya

Designers

• Chris Hanel

Acknowledgements

• Atmo, original dashboard concept and code, the inspiration for toth-overlay
• Alex "Lange" Van Camp, designer & developer of toth-overlay, the base on which NodeCG was built

nodecg's Issues

improve masonry on dashboard

Sometimes it seems like masonry isn't supplying enough columns.

Provide clean way of adding drop-downs

Chosen is a jQuery plugin that makes drop-downs not be awful. However, it has problems:

• Does not play nicely with Bootstrap styling
• Does not easily allow for an "Other" option wherein the user enters their own choice

I think that "Other" functionality is important for production where you can never predict what will happen and what data you might need to show.

Allow for nested packages

Example: "toth" package with "toth-lowerthird", "toth-scoreboard", and "toth-alert" sub-packages.

Logging

NodeCG should have logging to see who is signing in (when enabled), from what IP address, and what actions they perform on the dashboard.

Add option to sendMessage to other bundles

Right now, this requires accessing the raw socket.

Gaze 6.4 dont works on Windows/ubuntu

when trying to do "npm install" it give a error with gaze

Temporary solution: npm install [email protected] -D
then do npm install

More info gulpjs/gulp#416

Bad panel Javascript can break panels injected after it

The work-in-progress OBS Remote panel uses the nodecg.obs API, which isn't in master yet. Using this on master causes the browser to stop executing any Javascript after that panel, breaking any panels injected after it.

Bundles removed from the DB aren't fully removed

It seems that it takes two cycles of the parser to fully remove a bundle from the DB after its been deleted from disk. It might also be taking two cycles to fully add it to the DB?

I think what's happening is that some libs are reading the value of the bundles lib before its finished doing its thing.

add API method to fetch a synced var's value once, without subscribing to it

In some of my bundles, I only want to capture the value of a syncedVariable once at page load, and after that I don't care about it. A function to do this without adding the network overhead of a permanent socket would be neat.

delay starting http server until all bundles are fully loaded

right now it's pretty easy to open the dashboard before all bundles have loaded, especially if they have deps to install. real confusing!

Login options

Currently, NodeCG only supports Steam OpenID as a method of authentication. This should be extended to support more OpenID providers, as well as username/password combos unique to each NCG installation, with accompanying admin UI.

Create .jshintrc

NodeCG is mature enough that we should have a feel for how we want code to be styled, creating a .jshintrc shouldn't take too long.

Create standardized method of configuring bundles from the dashboard

It's 2015, people shouldn't have to log into their server and hand-write config files if they don't want to. It should still be an option, but there should be a standardized API that allows any bundle to define config parameters and then be configured from the dashboard.

In the event that the config is mandatory, the user should be prompted to configure the bundle when the dashboard is opened.

This type of run-time configuration means that we need a way of applying configuration to a bundle during runtime. Right now, configs are loaded right before a bundle is executed, and then frozen. Re-applying configs during runtime could prove to be a significant challenge.

/dashboard works, /dashboard/ leads to broken links

Show error if Socket.IO connection is lost

The dashboard (and maybe views?) should display an error when the Socket.IO connection is lost.

Create unit tests

Detect if NodeCG is already running

Trying to run a second copy of NodeCG from the same folder, with the same config, throws errors that aren't caught and can confuse the bundle loader

Add a webpage scraper

Sites such as CEVO, ESEA, and Patreon have no API. This means that to fetch data from them, we need a scraper. I believe that a scraper is enough of a general-purpose tool to warrant building one as a module of NodeCG and making it available to all packages with a neat API. The link below details the process of making a simple web scraper in Node.

http://scotch.io/tutorials/javascript/scraping-the-web-with-node-js

don't show disconnect desktop alert until third reconnect attempt

Some connections aren't super stable and are actually constantly losing and re-establishing the socket connection, causing the user to get spammed with desktop notifications. Waiting until the third consecutive failed reconnect attempt before notifying the user would help eliminate false positives.

Provide Javascript API for bundles

Packages shouldn't have to worry about including socket.io, and shouldn't have to interact with the socket directly.

Instead, an object should be injected which would allow functions similar to these:
nodecg.sendMessage(String messageName, Object data);
nodecg.listenFor(String messageName, Function handler);
nodecg.host, .port

Consider not using Bootstrap

Bootstrap is dope. However, I find myself fighting against it more and more as I am developing the dashboard and bundle panels.

Perhaps we should consider making our own CSS framework for NodeCG. Provide truly purpose-built ways of styling good interfaces for live production.

Display error on dashboard if a bundle had an error during parsing

Makes it easier for an end-user to catch an error that the sysadmin may have missed during startup. As of right now, an extension can fail but the panel/view will still load, leading to confusion.

.ncgignore functionality

Some of my bundles have NeDB *.db files in them. Every time something is written to them it triggers the bundle watcher to fully reload the entire bundle. Also, it seems to cause 10-15 second long startup times as NeDB does whatever initialization routine it has which involves touching the files multiple times.

Add tooptip to each panel to display URL for the relevant view.

Would make getting the views into OBS slightly easier. Could maybe also include a link to a brief guide on how to get each view into OBS.

Missing admin Directory In Bundle Crashes

If the admin directory that NodeCG expects to exist in a bundle does not exist, NodeCG will crash. NodeCG should probably check and not load the bundle if it is "incomplete", so to speak.

Provide access to NodeCG's logging via the API

Extensions and the browser API should be able to log messages via NodeCG, to avoid extensions needing to do their own, and browser messages being limited to the browser's console.

Set up less-middleware so we don't have to compile our LESS

https://www.npmjs.org/package/less-middleware

HTTPS support

Some MediaStream properties require HTTPS for full functionality. I imagine other APIs require it as well.

Improve Masonry responsiveness

When a panel adds things to the DOM, masonry should be re-triggered to rearrange the panels if needs be.

See: https://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener/11546242#11546242

Login attempts return the user to /login/auth/undefined

On some servers, for some users, Steam login will return a user to /login/auth/undefined rather than /login/auth/steam
Manually going to /dashboard will still allow/deny access after seeing this error page, and logs indicate that the login is successful.
Happens after cookies are cleared too.

Simplify and harden panel implementation

People writing panels should be able to just write normal HTML and CSS and not have to worry about namespace or scope, we should take care of that for them. This has the side benefit of making it more difficult for a package developer to inadvertently interfere with other panels.

Specifically, I think that the package's admin folder should only define the body of the panel. The heading should be generated by nodecg, and options such as panel width and human-readable title should be set via the package manifest.

Install Fixed through GIT

I had tried to follow the steps using Node.js to install nodecg and get it working. I then tried it today using Git and it install and ran great. Must be a problem on Node and Npm's end not NodeCG.

TheZacharyBaldino
www.twicth.tv/thezacharybaldino

Provide NodeCG socket API to bundle extensions

Right now, when I need to send a message from a bundle's extension, I have a pretty dumb setup:

1. server.js exports its socket.io instance, so the extension can gain access to it via require(). That alone should be reason enough to make this better.
2. Every time I want to access the socket, I have to do raw socket.io calls. This leads to a very significant amount of repeated boilerplate code.

It'd be cool to be able to just nodecg.sendMessage from the backend

Allow bundles to add secure routes

Bundles can currently only add routes that aren't secured by our authentication mechanism.

Bundle folder names can cause load problems

For example, a folder name of nodecg-tweetfeature positively bamboozles the bundle loader.

Error on duplicate nodecg.listenFor statements

oh god please this is the worst bug it breaks EVERYTHING

print info message if new version is available

There are many scenarios where the user simply won't want to update as to not break their bundles, but they should at least be aware that a new version is available.

Ability to filter panels and set up pre-defined "workspaces"

Say a user has both the "extv" and "toth" sets of packages installed. Provide a method for them to filter by any string and also save the currently showing list of panels as a workspace to be again loaded later.

Serve Twitch API locally

If there is no internet connection, attempting to load the Twitch API remotely causes all kinds of problems. It is currently the only library not served locally.

Allow one package to extend another

Example: allow one package to act as a data source for multiple other packages that view it in other ways.

Add support for callbacks in nodecg.sendMessage

Socket.io callbacks are dope. Requesting data from the backend is far far easier when callbacks are utilized. Right now I'm just accessing the socket manually to do callbacks.

Consider getting YETI from bower

https://github.com/spinner-dev/yeti

Check bundles folder exists & create if it doesn't

NPM removes the bundles & db directories, despite the .empty_directory files. db is created automatically, presumably when bundles.db is created, but bundles is not.

The .empty_directory files should be removed, and NCG should create the folders on startup if they're missing.

Replace CDN resources with bower dependencies

Where possible, replace CDN links with local copies, installed by bower.
Current CDN resources are:

• Bootstrap
• Font Awesome
• html5shiv
• respond.js
• jQuery
• Steam sign in image, may be replaced?

Convert nodecg to act as a command line tool

A new user shouldn't have to grab the repository to use nodecg.

The current goal workflow is:

• npm install nodecg
• nodecg init my-overlay
• cd my-overlay
• nodecg start

The folder my-overlay should only contain a config file, and a packages folder.

Routing as part of packages?

Are there any plans to be able to include routes in packages? As of right now, it seems that in order to add routes, they simply have to be added to server.js. Ideally, it would be nice to pull in routes from a js file such ie. package/routes.js.

Here is a Stack Overflow question which includes ideas on how this can be implemented.

This may or may not be out of the scope of the project, but I have a few small potential packages that I would use this for: Now Playing Overlay and a node implementation of Show Pressed Keys which could give you ideas.

Add NodeCG version dependency to nodecg.json

A bundle should be able to inform NodeCG which versions it is compatible with, and throw an error if there is a mismatch.

extend data binding to DOM

Right now, the only way to sync a nodecg synced variable to the DOM is by manually touching it in the "setter" callback. Some kind of templating engine (handlebars?) should be implemented to simplify this.

Change how config.js works; load customconfig.js?

The current config.js file is a bit silly. If anyone makes changes to it, they will need to stash, pull, and apply the stash if they wish to retain their changes through any updates.

Not sure what the best way around this is. Maybe check to see if a customconfig.js file exists and load that after config.js has loaded?

Instant messaging in dashboard

With the advent of synced variables, it is now feasible for multiple operators to use the dashboard simultaneously. To facilitate collaborative production, the dashboard should feature a chatroom of sorts that all operators can use to communicate with one another.

My current design idea includes having the chat be shown/hidden by a button on the navbar. When shown, a small chat window would descend the navbar. If the chat box is selected/active, new messages will make no notification. If the chat box is not selected/active, it (and maybe the window) should flash. If the chat box is hidden, a counter should be shown next to the chat button on the nav bar displaying the number of unread messages, and the window should flash. Sounds should be considered as well. Notification settings should be adjustable on a per-user basis.

A transient history could also be stored in memory (not persisted to disk), much like Steam messages. Perhaps the last 25 messages, such that an accidental refresh won't wipe everything.