HTML5 installation instructions

General
, ,
1

I just want to ask if there is an instruction or tutorial on how to make HTML 5 run on CasparCG. I already tried googling, all I see are examples of html projects. I’m trying to migrate from flash to HTML 5.

I tried downloading the loopic sample html. When I tried running it, it shows the background photo, but not the lower third text and graphics.

I receive this error when I try out the template:

[2021-09-13 09:05:15.961] [info] Sent message to 127.0.0.1:202 CG OK\r\n
[2021-09-13 09:05:19.754] [info] Received message from 127.0.0.1: CG 1-20 ADD 1 “TEST/LOWER-THIRD” 1 “”\r\n
[2021-09-13 09:05:19.755] [info] Sent message to 127.0.0.1:202 CG OK\r\n
[2021-09-13 09:05:19.760] [info] html[file://X:\casparCG Server 2.3\template/TEST/NEW COMPOSITION.html] Destroyed.
[2021-09-13 09:05:19.879] [error] html[file://X:\casparCG Server 2.3\template/TEST/LOWER-THIRD.html] 1280 720 50.000000 Log: Uncaught TypeError: Cannot read property ‘@attributes’ of undefined
[2021-09-13 09:08:48.950] [info] Received message from 127.0.0.1: CG 1-20 REMOVE 1\r\n
[2021-09-13 09:08:48.950] [info] Sent message to 127.0.0.1:202 CG OK\r\n

Thanks and best regards

2

Hi,

as I can see from the log, template data is missing and that is causing the template to partly play. So if you just add template data to the template, like in the example below, it should play just fine.

CG 1-20 ADD 1 "TEST/LOWER-THIRD" 1 "<templateData><componentData id=\"_title\"><data id=\"text\" value=\"TITLE_HERE\" /></componentData><componentData id=\"_subtitle\"><data id=\"text\" value=\"SUBTITLE_HERE\" /></componentData></templateData>"\r\n

Also, Loopic is tested with the latest CasparCG version so just make sure you are using it.

And I highly recommend you test the templates with some client applications. It is very likely that something will break if you are typing manually long XMLs in the console

3

Same result, just the background screen without the lowerthird. I downloaded the basic lowerthird demo of Loopic (I replaced the dynamic ID as f0 and f1 prior to downloading).

When I run the command, it just shows the “waiting room with monitors” background photo, but it does not show the lower third with text.

The Server version I am using is CasparCG Server 2.3.1 e767c1dda Release x64.

[2021-09-14 23:21:50.639] [info]    Received message from 192.168.0.168: CG 1-20 ADD 1 "TEST/LOWER-THIRD" 1 "<templateData><componentData id=\"f0\"><data id=\"text\" value=\"top text\"/></componentData><componentData id=\"f1\"><data id=\"text\" value=\"bottom text\"/></componentData></templateData>\r\n
[2021-09-14 23:21:50.640] [info]    Sent message to 192.168.0.168:202 CG OK\r\n
[2021-09-14 23:21:50.649] [info]    html[file://X:\casparCG Server 2.3\template/TEST/LOWER-THIRD.html] Destroyed.

That same command works for flash templates.

4

Got it to work. GFX is not showing because I caspar server was configured at 720p and the template was at 1080p. Noob mistake for me

Thanks for the assist imare.

1 Like