Cutting-Edge HTML5 Graphics for Broadcasting

HTML5-Based Graphics are Intuitive, Efficient, and Flexible

The Countdown clock BCC used for IRONMAN VR.

For many millennials out there, the thought of HTML might spark a sort of sentimental memory of the peak days of Myspace. For many, it provided an outlet to express oneself artistically in the digital medium for the first time to show off to everyone in the world via this new thing called, “the internet.”

Obviously, HTML is still a mainstay in how internet browsers fundamentally function – it works in harmony with CSS and JavaScript to render content and visual styles of every webpage you have ever visited.

BCC broadcasting in Hawai’i using cloud-based technology to allow the team back in Boulder to assist in the production.
BCC broadcasting in Hawai’i using cloud-based technology to allow the team back in Boulder to assist in the production.

So, how is this relevant to broadcasting, and how can it benefit those of us in the broadcast industry? For starters, it is fundamentally a cloud-based service. More and more, workflows in the modern age either prefer or even require remote collaboration and operation, and HTML is the perfect medium for that. 

The language provides a set of instructions to predictably render content on any client device that views it, rather than sending massive amounts of data in the form of pre-rendered files or video streams.

These instructions allow objects to be drawn in the form of scalable vector-type images and containers, which means they can be infinitely scaled to bring crystal-clear images and sharp lines to any broadcast resolution you may want to stream. 

For such a long time these coding languages have been and still are so widespread among computers and internet browsers which means they are highly optimized for efficiency and are FAST. Complex and dynamic graphics can be rendered and therefore aired anywhere in the world in what is arguably real-time, often with negligible use of valuable system resources in the production environment. With the close tie to existing coding languages, we can even integrate them to be dynamically updated and rendered by external data sources via simple API connections, just like an app on your phone.

Viz Flowics is an Industry Leader in Providing Professional Quality HTML Graphics  

There are few players in the game when it comes to leveraging HTML-based graphics engines, but far away the one that leads the pack is Viz Flowics.  

Viz Flowics first came into our sights at BCC Live after Facebook announced that its own internal HTML graphic platform, Vidpresso, would be no more. At the time, we heavily relied on Vidpresso to integrate live Facebook engagements with graphics on-air, and Flowics served to perfectly fill that hole in the market we needed.

Viz Flowics immediately came into its own as an exciting graphics engine for us because it was familiar. The graphical user interface (GUI) of the platform is a comfortable and familiar layer-based editing software like Adobe Photoshop or Illustrator, with tools that aren’t afraid to hide their true framework that is driven by HTML.

They have 24/7 support by real humans who are passionate about their product and are the ones who directly service it in the background.

Textbook example of tech support

However, let’s talk about the real invaluable feature of Flowics – their tech support. This company should be the textbook example of how businesses should operate and help their customers. They have 24/7 support from real humans who are passionate about their product and are the ones who directly service it in the background.

They are accessible straight from the platform itself and I know at any time of day or night I can get help with technical issues, or even just creatively collaborate on how best to get something done. I have even written things like, “I understand that this feature has X and Y limitations, and I have this workaround in place, but it would really help me if you could adjust how Viz Flowics functions to better work for my scenario” and I can’t even count how many times they pushed an update to address my concerns and ideas within a single day. Incredible!

Even through tremendous growth over the three years, they have remained consistent as a brand, product, and support team. Flowics rightfully was acquired by video broadcast giant, Vizrt Group, putting them in the same family as NewTek, a standard in video broadcast equipment found in studios all over the world. This quickly put HTML rendering as a native source in our TriCaster equipment, simplifying and improving our workflow.

Viz Flowics is All About Linking “Flows” to Your Graphics Package  

Viz Flowics’ original claim to fame was the best-in-class API integrations with social media platforms. It allows you to collect and produce what they call a ‘flow’ of data including comments from Facebook and YouTube, Tweets, photos from Instagram, usernames, handles, profile photos, and much more.

Additionally, Viz Flowics includes the ability to operate a ‘mechanic,’ which notably integrates with Facebook’s native interaction features such as polling and questions where the user can select an option from a multiple-choice list to vote or answer a free-form question in the comment section. Not only will this mechanic drive the engagement features on the Facebook platform itself but return the data back into the Viz Flowics system in the form of a flow with which you can drive graphics on the stream itself to show live results. 

Another huge tool that allows you to bring data and content into the system is ‘Viz Data Connectors.’ Basically, a library that is constantly growing with an ever-evolving set of features that provides infinite possibilities for live input from external sources.

BCC Partners with Flowics to Innovate New API Integrations as Custom Data Connectors 

During IRONMAN VR BCC was able to integrate bio-metric data from our athletes into the broadcast through the APIs that integrate with Viz Flowics.
During IRONMAN VR BCC was able to integrate biometric data from our athletes into the broadcast through the APIs that integrate with Viz Flowics.

With the COVID shutdown grinding our events, and therefore event broadcasts to a halt, we found ourselves leading the way with producing the IRONMAN Virtual Racing broadcasts on Facebook in 2020.

This is when our partnership with Viz Flowics really took off. We collaborated with their developers alongside ROUVY developers based in Czechia to establish a custom API endpoint that integrated with live data from ROUVY that showed, in real-time, the biometric data produced by athletes competing on the ROUVY platform all over the world. This pushed to a JSON data stream that was connected to Viz Flowics that included speed, cycling output power, pedaling cadence, distance, leaderboard, etc. This graphic integration is what made the whole concept of the show possible, and to keep racing alive. 

Fast forward to today when live racing is back in full swing. We have applied some of the same foundations with new and improved features of Viz Flowics to create a new custom API endpoint with RTRT, the world-leading endurance sport timing platform host for IRONMAN and Rock ‘n’ Roll Running Series timing data globally.

The RTRT data connector is a must for us to provide accurate, complex, and real-time results on-air of our broadcasts. Using this connection, we can drive content and graphic automation in real-time from data streams coming straight from the race timers on-site at the race. 

Part of the 2023 IRONMAN European Championships Hamburg Broadcast showing the various Viz Flowics graphical overlays utilized by BCC.
Part of the 2023 IRONMAN European Championships Hamburg Broadcast showing the various Viz Flowics graphical overlays utilized by BCC.

Simply put, the published output from Viz Flowics is just a webpage. It’s a public URL available to load for anyone on the internet that has the URL, which is uniquely created for each graphic experience you create in Viz Flowics. The graphics are created in the cloud, operated within the cloud, and output from the cloud to a public internet destination. This means no costly internet bandwidth and hardware to encode a video stream out of a studio. The same graphic content can be ingested in an infinite number of systems simultaneously with no effect on the stability of the system. 

More than just an on-air graphics tool

We even use Viz Flowics for uses other than on-air graphics. We have found enormous value in running a separate instance of Viz Flowics that is nothing more than a clock countdown that cues on-air talent for commercial breaks.

Cloud-based broadcasting is here to stay. We’re excited to be at the forefront of cloud-based graphics for high-end broadcasting and can’t wait to see how this product continues to grow and evolve and pushes BCC Live to grow and evolve alongside it!  

This is a condensed version of the original article that includes in-depth BCC Live graphics workflows. Read the full article here.

BBC HTML5 graphics news

Interested in seeing how Viz Flowics and Viz Data Connectors can support and boost your workflow?