OGraf graphics for live production

Open Live puts HTML graphics on air the way a browser shows a web page. You host an OGraf template, or any other HTML graphic, at an https address, register that address in Open Live, and the cloud pipeline renders it and keys it over the programme. The operator takes it in and out from a browser, a keyboard shortcut or a Stream Deck.

What is OGraf?

OGraf is an open specification from the EBU for broadcast graphics built with HTML: lower thirds, logos, tickers and full-frame graphics that are web pages rather than files for one vendor's graphics engine. Because an OGraf template is HTML, any system that can render a web page can show it. To build one without writing the code by hand, the open-source OGraf Template Editor lets you design the graphic, define its data fields and export the template. It also runs as a service on Open Source Cloud.

How does Open Live put an OGraf graphic on air?

A graphic in Open Live is a name and a URL. When a production goes live, the pipeline starts a Chromium browser for each graphic that is assigned to a downstream keyer, renders the page, scales it to the programme resolution and feeds it into the keyer on the Strom vision mixer. The keyer lays the graphic over the programme output.

The rendering happens in the cloud pipeline, not in the operator's browser, so what goes out on the programme does not depend on anyone's laptop. Since the renderer is a full browser, a graphic can be an animated HTML template or a plain image.

How do I add a graphic to a production?

• Host the template. Put the rendered HTML of your OGraf template on a web server so it is reachable at an https address.
• Register it. In Studio, open Setup, then the Graphics panel, and add a graphic with a name such as "Lower third" and the template's URL. Studio checks the URL before it saves.
• Assign it to a keyer. In the production's settings, choose the graphic for DSK 1 or DSK 2. Do this before the production goes live, because the keyers are wired when the pipeline starts.

Everything Studio does here is also in the Open Live REST API, so a script or another system can create graphics and assign them. The graphics guide in the Open Live repository has the API calls and a worked lower third example.

Which addresses can a graphic use?

• HTML graphics need an http or https address, and an https one is the safe choice for a template. HTML pasted in as a data: address is refused.
• Images can use a web address, or a small PNG, JPEG, GIF or WebP image pasted in as a data: address.
• Private and local network addresses are refused, so a graphic cannot be used to reach machines inside the network the pipeline runs on.

How does the operator take a graphic on and off air?

On the Controller page in Studio, the DSK panel has one button for each keyer that has a graphic. Clicking it keys the graphic in or out of the live programme, and the button lights while the graphic is on air. Every Studio connected to the production sees the same state, including one that joins in the middle of the show. The K key toggles DSK 1 by default, and the shortcut can be remapped.

The same actions are available as macro steps, so one button can take a lower third in alongside a cut. Operators who prefer hardware buttons get DSK and graphic actions on a Stream Deck or any other surface through the Open Live module for Bitfocus Companion. The vision mixer overview covers the rest of the controls.

How do I change the text in a graphic during the show?

Open Live shows and hides a graphic layer. It does not push names, scores or other data into a template on the keyer, so live updates are the template's own job: the page can fetch its data or keep its own connection to a data source.

A web page can also be a source on a mixer input, for example a full-frame graphic or a scoreboard. For those HTML sources, the controller WebSocket API can send new URL parameters to the running page, which reloads with them. Studio and the Companion module have no button for this yet, so it is for scripts and integrations that use the API.

What does Open Live not do with OGraf yet?

Open Live renders the URL you give it. Today it does not:

• accept an exported OGraf template bundle as an upload;
• host the template for you;
• implement the OGraf renderer or controller interface, so an external graphics controller cannot drive a template through Open Live.

A template that needs live data handles it itself, as described above.

Are Open Live graphics free and open source?

Yes. The Open Live backend and Studio are published on GitHub under the MIT licence, and so are the OGraf specification and the OGraf Template Editor. Self-hosted, you run the backend and its CouchDB database, Studio and Strom yourself; the self-hosting guide covers what that involves. On Open Source Cloud you sign in, pick a monthly plan that includes production hours on shared Strom, and start producing. If you are new to Open Live, your first live show walks through a production from an empty account to on air.