Create broadcast graphics using Node.js and a browser
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 no assumptions about how to best code a graphic, and gives you complete 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:
Don't see your preferred streaming software on this list? NodeCG graphics require Chrome 49 or newer. If your streaming software's implementation of browser source uses a build of CEF that is based on at least Chrome 49, chances are that NodeCG graphics will work in it. You can check what version of Chrome your streaming software uses for its browser sources by opening whatversion.net/chrome as a browser source.
Looking for a list of NodeCG bundles and resources? Check out awesome-nodecg.
Have questions about NodeCG, or just want to say 'hi'? Join our Discord server!
Who should use NodeCG?
NodeCG is a programming framework. As such, it's most useful to developers capable of creating their own graphics using HTML, CSS, and JavaScript. NodeCG is still in beta and the ecosystem of bundles is quite small. Those expecting to download NodeCG and use off-the-shelf bundles to get a complete stream overlay without writing any code may be disappointed.
Install Node.js (version 6 or greater) & npm (version 2 or greater).
Then, run the following commands from a terminal (command prompt):
npm install -g bower
git clone https://github.com/nodecg/nodecg.git
cd nodecg
npm install --production
bower install
node index.js
To run NodeCG in production, pm2 is recommended.
NodeCG's individual graphics packages are called bundles. They can be installed either from the command-line
(via nodecg-cli), or by simply placing the folder into the ./bundles directory.
The easiest way to install bundles is via the command-line using nodecg-cli.
You will need to install nodecg-cli before you can use the nodecg
terminal commands.
(Once you have nodecg-cli installed) To install a bundle from Github, enter the owner and repository name:
nodecg install lange/lange-notify
... to install a bundle from Bitbucket, enter the owner and repository name prefixed with bitbucket:
nodecg install bitbucket:username/repo-name
... to install a bundle from any other git provider, enter the git URL:
nodecg install https://gitlab.com/username/repo-name.git
Bundles are just directories inside the ./bundles folder.
They can always be added and removed by simply moving them into or out of that folder.
Avoid installing or uninstalling bundles while NodeCG is running.
bundles folder.node index.js or nodecg start if you have nodecg-cli installed).http://localhost:9090 by default)../cfg/nodecg.json is an optional file that you can create to configure NodeCG.
See the NodeCG Configuration tutorial for more information on configuring NodeCG.
Each NodeCG graphic is called a bundle. A bundle has one or more of the following:
A bundle can have multiple graphics and dashboard panels, and an extension can be split up into multiple files.
If you wish to quickly start a new bundle from a template, try generator-nodecg.
Graphics are, as the name implies, the actual graphics intended for broadcast. They are standard HTML webpages, and there are no restrictions on their content. When serving a graphic, NodeCG injects an instance of the API into the global scope.
Dashboard panels are the interface used to control and manage a bundle. They too are standard HTML webpages. Each panel is served as an iframe on the dashboard. This is done to ensure full code and style encapsulation. Because dashboard panels are iframes, they cannot render any content outside of their bounding box. For example, it is not possible to have a tooltip in a panel that extends beyond the bounding box of the panel itself.
When serving panels, NodeCG injects an instance of the API into the global scope, as well as a few default styles.
It is strongly recommended to use Polymer elements to build panels, though it is not required. Google's official Polymer elements, specifically their Paper elements, are a great place to start. The official nodecg-dashboard-elements collection also has a selection of Polymer elements that are integrated with NodeCG's API.
Extensions are server-side code. They are standard Node.js JavaScript files. An extension must export a function that accepts a single argument. That argument will be an instance of the NodeCG API:
// bundles/my-bundle/extension.js
module.exports = nodecg => {
nodecg.listenFor('foo', () => {
console.log('bar');
});
};
NodeCG automatically attempts to load the following files as extensions:
your-bundle/extension.jsyour-bundle/extension/index.jsBundles may have one of, but not both of the above files. If your extension is simple enough to fit in one file,
use the former approach. If your extension is broken up into multiple files, you may want to use the latter structure
and keep all those files in a single extension folder. If using an extension folder, NodeCG will only load
your-bundle/extension/index.js. It is up to you to load any other files that your extension needs via require.
package.json manifestEvery bundle must have a package.json. In addition to the required fields
like name and version outlined in that link, NodeCG bundles must also have a nodecg object in their package.json
with some additional properties that tell NodeCG about the bundle and how to load it.
See the manifest tutorial for more information on creating a valid package.json for a bundle.
Please contribute! This is an open source project. If you would like to report a bug or suggest a feature, open an issue. Or, to open a Pull Request:
git checkout -b my-new-feature)git commit -am 'Add some feature')git push origin my-new-feature)Note: Make sure you run npm install in the root directory without the --production flag to ensure all devDependencies are installed.
Before creating your pull request:
npm test.Check which branch you should PR to. NodeCG is still in an unstable state, so we follow these semver guidelines:
0.current.x)0.next.0)Documentation contributions are always welcome and very appreciated!
NodeCG's documentation site, nodecg.com, is automatically generated based on NodeCG's JSDoc comments and the markdown files in the tutorials folder. The table of contents in this README is also automatically generated.
To build the docs, run the following commands (after you have cloned NodeCG and installed its dependencies via npm install):
npm run docs:build
After that, you can open docs/index.html directly in your web browser.
Once you've made your changes, follow the steps above in the Contribute section to open a pull request.
npm install --global selenium-standalone), then run the installer (selenium-standalone install)selenium-standalone startnpm testNote: Selenium requires Java.
Note that all contributions and discussions around NodeCG take place under our Code of Conduct.
MIT Liencese © 2017 Alex Van Camp, Matthew McNamara, and contributors
FAQs
Dynamic broadcast graphics rendered in a browser
The npm package nodecg receives a total of 286 weekly downloads. As such, nodecg popularity was classified as not popular.
We found that nodecg demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.