Adding a chyron to your video: Look like the news!

A chyron is the text that appears at the bottom of the TV on news channels telling viewers the topic being discussed. You might want to add a chyron to your live stream or to your video on demand (VOD). In this post, we'll walk through the steps to add a chyron to your video.

Chyron a video

The application (which will soon be published at chyron.a.video) extends https://record.a.video. You can read about how we built record.a.video in a series of blog posts. This application allows you to share your camera and your desktop, and creates a live stream or VOD recording of what you have shared.

We'll extend this by adding an icon to the left of the chyron (in the same approach as watermark.a.video. We'll then add a stripe over the video that the text will appear on.

The code

The HTML adds 2 fields to the form: one for the logo url, and the 2nd for the text to be placed in the chyron. Along with some CSS, we style the form:

    <div class="settingHeadings">
                Chyron<br/>
            </div>
            <div id="watermark">
                <label for="watermark-url">image for chyron</label> 
                <input type="text" id="watermark-url" value="http://localhost:3037/API.PNG"><br/>
                <label for="chyron-text">text for chyron</label> 
                <input type="text" id="chyron-text" value="Your text here.">
            </div>

Starting the playback

When the stream is started, we add a few features to the canvas:

//chyron
        canvas.drawImage(watermarkImg, watermark_x, watermark_y);
        canvas.fillStyle='#fa4b2a'; 
        canvas.fillRect(chyron_x,chyron_y, chyron_length, chyron_height);
        canvas.fillStyle='#ffffff'; 
        canvas.font = "60px Arial";
        ctx.fillText(document.getElementById("chyron-text").value, chyronText_x, chyronText_y);

First we draw the icon (with variable name watermark) with the x,y positions hardcoded inthe JS. We assume the size of the icon is 100x100.

Next we add a rectangle with fill color #fa4b2a (orange) that appears across the bottom of the screen.

Then we change the fill color to white (#ffffff), and add the text from the form field.

These canvas events are all within a loop that fires every 20ms, or about 50 frames per second. Since our video is capturing at a lower framerate than that, it will appear to update instantaneously.

See it in action

In the video above, as the text on the browser window changes, so does the text in the chyron. With 2 displays, you can now produce a live stream or VOD video with a chyron bar at the bottom of the screen.

Try it yourself

The code for chyron a video is on Github. It's super easy to launch locally with NodeJS, and by changing the variables for the canvas colour and fill, you can easily adjust the font and look of the chyron to fit your requirements.

In this post, we've gone through the steps taken to convert record.a.video into a video with a chyron. You may have even learned what a chyron is :).

Let us know what you think, and how you've changed the app to customize your chyron in you VOD or livestream in our developer community