Транслюємо у Facebook красиво: титри і їх кастомизатор

Ми робимо бродкастер для live трансляцій в Facebook і одна з задач з якою довелося зіткнутися це текстові оверлеї або титри (Lower Third). Наш JustBroadcaster ми витримуємо в концепції все повинно бути «дуже просто для звичайного користувача» і звичайно завдання з титрами довелося вирішувати з урахуванням цього, уникаючи перетворення в панель управління космічним кораблем.

приклад титрів
Етап 1. Використання титрів
Було кілька версій інтерфейсу, але зупинилися на тій що на картинці. Можна заздалегідь вбити три титру щоб у момент трансляції просто перемикати їх.

image
Етап 2. Створення своїх титрів: кастомизатор на JS
У постачання йдуть кілька тем для титрів, але користувачі дуже хотіли можливість швидко створювати свої теми. По правді кажучи хардкор-шлях мене й самого вже став втомлювати (скріншот де я редагую тему «ручками»).

image

Довелося терміново робити drag&drop кастомизатор. Спочатку звичайно ми думали зробити це частина нашого desktop-додатки, але потім вирішили зробити це просто як web-додаток на нашому сайті. Відповідно на цій web-сторінці користувач може завантажити свою графіку та з позиціонувати мишкою де буде текст (ну і колір, шрифт тощо).

Ось коротке відео як це працює:


Технічні моменти

ZIP без бек-ендом

Структурно кожна тема це папка з двома файлами: графіка ( background.png) і опис як відображати текст (settings.json). І наше web-додаток генерує обидва файлу. При цьому хотілося щоб користувач отримував два файли одним zip-архівом. Замаячила перспектива метушні з бекендом який буде готувати архів. Борючись з лінню починати бекенд частина, я виявив js-либу (JSZipe), яка дозволяє генерувати zip-архів у браузері. Радості не було меж.

//вона нормально працює в Chrome, Firefox, а ось в Safari немає. В IE не перевіряв (наш софт тільки для macOS)

Нюанси з екранами високої щільності

Звичайно все побудовано на базі canvas, і ми використовуємо «Konva JavaScript Framework» для роботи з ним. На виході додаток генерує background.png розміру 1280x200. Але один користувач надіслав результат роботи в якому файл мав розмір 2560x400 і це було несподівано. Виявилося, що якщо не вказано pixelRatio то canvas генерує картинку з урахуванням щільності екрану, і на деяких Mac він бере коефіцієнт 2 (проблема буває і на інших «щільних» девайсах, включаючи Android).

Проблема зважилася явним зазначенням pixelRatio рівним одиниці:

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

Результат і вихідний код
Код доступний на GitHub тут під ліцензією ЕПТЮНЗ (якщо зрозумієте, то юзайте на здоров'я).

Робоча версія розміщена на нашому сайті тут.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.