We are broadcasting on Facebook beautifully: captions and their customizer

We do Broadcaster for live broadcasts on Facebook and one of the tasks that had to deal with is text overlays or captions (Lower Third). Our concept JustBroadcaster we must stand in the concept of everything “very simple for the average user” and of course, the task with captions had to be solved with this in mind, avoiding becoming a spacecraft control panel.

Stage 1. Use of titles

There were several versions of the interface, but stopped at the one in the picture. You can drive three titles in advance so that at the moment of translation you can simply switch them.

Stage 2. Creating your own titles: customizer on JS

There are several topics for captions in the delivery, but users really wanted the ability to quickly create their own topics. In truth, the hardcore way has already become boring to me (screenshot where I edit the theme with “pens”).


')
I had to urgently do a drag & drop customizer. Initially, of course, we thought to do this as part of our desktop application, but then we decided to do it simply as a web application on our website. Accordingly, on this web page, the user can upload his graphics and position with the mouse where the text will be (well, color, font, etc.).

Here is a short video of how this works:

Technical points

Backend ZIP

Structurally, each theme is a folder with two files: graphics (background.png) and a description of how to display text (settings.json). And our web application generates both files. In this case, I wanted the user to receive two files in one zip archive. The prospect of messing around with the backend that will prepare the archive has been lost. While struggling with laziness to start the backend part, I discovered js- lib ( JSZipe ) which allows generating a zip-archive in the browser. Joy knew no bounds.

// it works fine in Chrome, Firefox, but not in Safari. In IE did not check (our software only for macOS)

High-density nuances

Of course, everything is built on the basis of the canvas, and we use the “Konva JavaScript Framework” to work with it. At the exit, the application generates background.png of size 1280x200. But one user sent the result of the work in which the file had a size of 2560x400 and it was unexpected. It turned out that if pixelRatio is not explicitly specified, then canvas generates a picture taking into account the density of the screen, and on some Macs it takes a factor of 2 (the problem happens on other “dense” devices, including Android).

The problem was solved by explicitly indicating pixelRatio equal to one:

var imageData = stage.toDataURL({pixelRatio:1}); 

Result and source code

The code is available on GitHub here under the license EPTYUNZ (if you understand, then use on health).

The working version is posted on our website here .