HTML template play() not working but stop() is

General
, ,
1

Hello!

I’m trying to build a super simple HTML template. For some reason when I add the CG, nothing shows up but when I stop, it plays my stop video. Everything works just fine when I use play() and stop() manually in a chrome window to test it. Any ideas?

I’m using JSON.stringify to add the data to this command:

cg 1 add 20 "watercooler/lowerthird/index" {"id":1,"show":"watercooler","cgType":"lowerthird","line1":"test","line2":"test","visible":true} 1

And if I run the update function directly on the template like this:

update({"id":1,"show":"watercooler","cgType":"lowerthird","line1":"test","line2":"test","visible":true});

It plays back just fine. I tried it with quotes around the JSON string as well.

Here’s my JS code for the template:

function update(templatedata){
	var cgInfo = templatedata;
	console.log(cgInfo);
	$('.line1').text(cgInfo.line1);
	$('.line2').text(cgInfo.line2);
};

function play (){
	setTimeout(function(){
		$('.background-container').append('<video class="cg-start" width="100%" height="100%" src="vid/start.webm" type="video/webm" autoplay>');
		$('.line1').delay(1600).animate({"opacity": 1}, 250);
		$('.line2').delay(1800).animate({"opacity": 1}, 250);
	}, 50);
};

function stop (){
	$('.background-container').append('<video class="cg-stop" width="100%" height="100%" src="vid/stop.webm" type="video/webm" autoplay>');
	$('.cg-start').delay(10).remove('.cg-start');
	$('.line1').delay(100).animate({"opacity": 0}, 250);
	$('.line2').delay(100).animate({"opacity": 0}, 250);
};

And the template hosted with the functions working.

Thanks!

2

for building the command you have to change the double quotes after JSON .stringify with an replace command:

JSON.stringify(…).replace(/"/g, ‘\"’);

3

The correct syntax for template autoplay is:

CG 1-20 ADD 0 "watercooler/lowerthird/index" 1 "{ESCAPED-JSON}"

1-20 is channel-layer as usual. The 0 is useless for HTML templates but it’s there still for backwards compatibility. The 1 after the template is the autoplay parameter. The JSON has to be escaped as @knoepsche noted.

4

Alright, thanks! I rewrote that JS so it looks like this now:

var prepJSON = JSON.stringify(cgList[selectedCG]).replace(/"/g, '\"');
console.log('escaped JSON: ' + prepJSON);
var casparcmd = 'CG 1-20 ADD 0 "' + cgList[selectedCG].show + '/' + cgList[selectedCG].cgType + '/index" 1 "' + prepJSON + '"\r\n';
console.log('Command: ' + casparcmd);

But the replace seems not to be working. The console log when I run it looks like this:

escaped JSON: {"id":0,"show":"watercooler","cgType":"lowerthird","line1":"test","line2":"test","visible":true}
Command: CG 1-20 ADD 0 "watercooler/lowerthird/index" 1 "{"id":0,"show":"watercooler","cgType":"lowerthird","line1":"test","line2":"test","visible":true}"

With no escaped characters. Hmm.

The Caspar server logs look like this:

[2020-07-09 20:44:37.125] [info]    Received message from 127.0.0.1: CG 1-20 ADD 0 "watercooler/lowerthird/index" 1 "{"id":0,"show":"watercooler","cgType":"lowerthird","line1":"test","line2":"test","visible":true}"\r\n
[2020-07-09 20:44:37.126] [info]    Sent message to 127.0.0.1:202 CG OK\r\n
[2020-07-09 20:44:37.134] [info]    html[file://C:\Users\cmdch\Documents\TV_CASPAR_CGS/watercooler/lowerthird/index.html] Destroyed.
[2020-07-09 20:44:37.298] [info]    html[file://C:\Users\cmdch\Documents\TV_CASPAR_CGS/watercooler/lowerthird/index.html] 1920 1080 59.940060 Log: {

So it’s definitely not getting an escaped JSON in the command.

5

Now it’s the other way around. Caspar should receive the backslash string and quote within the quoted data you should replace as:

var prepJSON = JSON.stringify(cgList[selectedCG]).replace(/"/g, '\\"');

It unescapes the string before it passes it through the update function.

1 Like
6

Ah, of course. Got it to send to the server!
Had to add var cgInfo = JSON.parse(templatedata);to my code

function update(templatedata){
  var cgInfo = JSON.parse(templatedata);
  console.log(cgInfo);
  $('.line1').text(cgInfo.line1);
  $('.line2').text(cgInfo.line2);
};

on the template side to get the data if anyone here from the future is having the same problem.

Thanks for all the help!