Live Graphics Solutions: NodeCG
What is NodeCG?
NodeCG, in simple terms, is an open source framework that acts as a glue between different pieces of technology such as web browsers, playout software, and web servers to create professional, data driven, and dynamic broadcast graphics for very little money and processing power.
This framework was spawned from the esports streaming world out of necessity and without normal broadcast graphic conventions in mind. This makes it fundamentally different than most graphics software on the market such as Xpression or NewBlue Titler Live, but its open source nature is quickly taking the low budget streaming and esports world by storm.
This is not a tutorial, but more of an overview of what NodeCG is, how it works, and what it can do. Many broadcasters have been surprised when I’ve shown them the conept of HTML broadcast graphics solutions such as NodeCG and how powerful it can be when utilized properly.
If you are looking for broadcast graphics software that is easy, then NodeCG is not for you. Unless you are a web developer or are willing to hire one, it may be best to look elsewhere.
The Technology
NodeCG is a program and framework written in a JavaScript flavor known as NodeJS.
NodeJS is a runtime that allows you to use JavaScript to create applications.
NodeCG doesn’t have a designer or even a rendering engine. Both of these things are actually a strength of this system instead of a hindrance. NodeCG, instead of developing its own technologies, leverages tech already built.
You are using a powerful, free, and low processing cost graphics engine right now as you read this. It’s called a web browser. Google, Mozilla, and other companies have spent lots of time and lots of money to create technologies, such as HTML5, which have become very efficient in rendering graphics, photos, videos, and animations with very little processing power. NodeCG is a way to utilize this software in a streaming or broadcast setting.
Video game streamers have been using the concept of browser based graphics for a long time, ever since the concept was introduced in OBS with the “browser source”. The browser source allows one to have a Chrome-based browser as a layer on your stream. The software automatically renders the normally white background of the web page as transparent. This was used by many services for simple, but dynamic graphics such as “alerts”, but has been used more and more as a way to bring more complex graphics packages into programs like OBS. Now even more advanced broadcast programs like VMix have browser sources.
NodeCG was made with the Browser Source in mind, but you can bring NodeCG into more traditional broadcast situations using programs such as CasparCG that can render HTML to hardware that can output a key and fill signal to your broadcast switcher.
NodeCG was built as a way to not have to reinvent the wheel when building new custom packages acting as a way to easily create a user interface for operators to manage graphics (animations, data, etc) along with ways to share data between the dashboard page, browser, and web server to efficiently send websocket data without having to build that system from scratch.
Example of a NodeCG Dashboard from the Smash for NodeCG package
It Can Do Whatever a Webpage Can Do
A NodeCG graphic can use any library that you can use in Javascript, allowing you to do things such as API calls, web scraping, logic, etc. If you can code it in javascript and display it with HTML, then you can use it in NodeCG. There are many frameworks that help with animations, handle video content, render charts, format text, manage time, integrate with other applications OBS using websockets, get data from APIs, databases, and more.
If you using a tournament management software, have your own stats database, or use other services that have APIs, you can easily tap into them with Javascript, which hopefully reduces errors on the operator or producer’s part and allows you to fire data to your stream whenever its relevant.
Need Help With Graphics? Contact Us!
About Ozdyck Productions LLC
Ozdyck Productions LLC. is a live production company based out of Valparaiso, Indiana (about an hour from Chicago) owned by Logan Ozdyck. They specialize in producing live productions and building custom software/hardware solutions to push the limits of what can be done with budget conscious equipment. With a background in IT, programming, and marketing - Logan Ozdyck wanted to start a company that could produce shows along with helping other production companies by creating budget conscious solutions and educational content to expand the world of streaming/broadcast to more businesses, clients, and leagues.
