Это наш основной софт, который нужен для того, чтобы отображать всю инфографику на стриме, он просто генерирует веб-страничку, которые мы потом встраиваем в obs.
Вот ссылка на репозиторий, в него можно сделать pr, тогда кто-то из основных разработчиков, может его посмотреть (не бросайте, если вам придут правки, потому что в этом нет ничего старшного).
Из основного: у нас есть 3 файла - settings.json, advanced.json, visualConfig.json.
В settings.json мы просто указывает откуда берем event feed (xml) и тип тестирующей системы (pcms).
В advanced.json мы можем как-то модифицировать то, что отдает нам backend, например, если вы смотрели видео для новичков, то могли заметить, что там мы модифицировали grabberIp, grabberPeerName и т.д. Со всеми параметрами можно ознакомиться здесь
Обратите внимание, что я ничего не упоминул про widget_positions.json, потому что, наконец-то мы от него избавились и все это дело лежит в visualConfig.json.
Здесь мы просто должны взять widgetPositions из папки config в репозитории и вставить в наш visualConfig
Мы поднимаем отдельный instance оверлея для всего этого обычно.
Так обратите внимание что также в главе про obs тоже есть упоминание split screen, но только с точки зрения obs.
Самое сложное это разрешение, оно такое - 1280x1024
В целом там довольно протой frontend trick, попробуйте написать сами, потому что это просто Full Screen Clock.
Для ленты есть frontend trick, который выглядить вот так:
https://overlayUrl/overlay?forceWidgets=[{%22type%22:%22TickerWidget%22,%22widgetId%22:%22ticker%22,%22location%22:{%22positionX%22:0,%22positionY%22:0,%22sizeX%22:2016,%22sizeY%22:96}},%20{%22type%22:%22TickerWidget%22,%22widgetId%22:%22ticker1%22,%22location%22:{%22positionX%22:96,%22positionY%22:96,%22sizeX%22:2016,%22sizeY%22:96}},{%22type%22:%22TickerWidget%22,%22widgetId%22:%22ticker2%22,%22location%22:{%22positionX%22:0,%22positionY%22:192,%22sizeX%22:2016,%22sizeY%22:96}},{%22type%22:%22TickerWidget%22,%22widgetId%22:%22ticker3%22,%22location%22:{%22positionX%22:96,%22positionY%22:288,%22sizeX%22:2016,%22sizeY%22:96}},{%22type%22:%22TickerWidget%22,%22widgetId%22:%22ticker4%22,%22location%22:{%22positionX%22:0,%22positionY%22:384,%22sizeX%22:2016,%22sizeY%22:96}},{%22type%22:%22TickerWidget%22,%22widgetId%22:%22ticker5%22,%22location%22:{%22positionX%22:96,%22positionY%22:480,%22sizeX%22:2016,%22sizeY%22:96}},{%22type%22:%22TickerWidget%22,%22widgetId%22:%22ticker6%22,%22location%22:{%22positionX%22:0,%22positionY%22:576,%22sizeX%22:2016,%22sizeY%22:96}},{%22type%22:%22TickerWidget%22,%22widgetId%22:%22ticker7%22,%22location%22:{%22positionX%22:96,%22positionY%22:672,%22sizeX%22:2016,%22sizeY%22:96}}]
Вот есть примерный чек-лист, который может дополняться:
advanced.jsonvisualConfig