It is currently 27 Apr 2017, 11:59



How to use websocket in client?

Videos, graphics, Flash templates – how to create and play them using CasparCG

Moderators: Macey, Jonas Hummelstrand, didikunz

How to use websocket in client?

Postby knoepsche » 09 Jun 2016, 16:00

In the standard client you can enable the osc input for a websocket-connection.
I tried to connect it from a website like this:

Code: Select all
var ws = new WebSocket("ws://localhost:4250/");
ws.onopen = function(){ws.send('/control/osc/play')};


My playlist items uid is set to 'osc' with checkbox 'Allow Remote Trigger'.
How is the syntax for sending osc over websockets? The socket-connection gets open, but the send-command does not work.
knoepsche
 
Posts: 23
Joined: 06 Feb 2012, 16:42

Re: How to use websocket in client?

Postby Jesper Stærkær » 09 Jun 2016, 20:11

/control/play
Jesper Stærkær
Independent Consultant at SuperFly.tv
User avatar
Jesper Stærkær
 
Posts: 841
Joined: 13 Apr 2010, 18:06
Location: Trondheim, Norway

Re: How to use websocket in client?

Postby knoepsche » 10 Jun 2016, 14:03

I changed the osc-command to

Code: Select all
ws.send('/control/play')


I also activated the clients submenu: Rundown->Allow Remote Triggering
Still the command did not work.
knoepsche
 
Posts: 23
Joined: 06 Feb 2012, 16:42

Re: How to use websocket in client?

Postby Michel » 10 Jun 2016, 14:43

Hi,
Forgive me but, Is it possible to establish connections "socket" between a web browser and CasparCG server, by using WebSocket, or ?
You assert that:
knoepsche wrote:.... The socket-connection gets open, but the send-command does not work.
Are you sure about this? (perhaps there's no connexion at all)

As I understand it by googling a little, CasparCG (or the CasparCG client in your case) should have a WebSocket server enabled... does it have this?
I have interest to know...
Michel
 
Posts: 58
Joined: 20 Feb 2015, 22:48

Re: How to use websocket in client?

Postby knoepsche » 10 Jun 2016, 14:59

OK finally I found what I was looking for in the clients source code:

/*
* The protocol for OSC over WebSockets is a simple JSON description.
*
* {
* "path" : "/valid/path",
* "args" : [ arg1, arg2, ... ]
* }
*
* First argument must always be a number greater than zero to be executed.
*/

/*osc commands from the Global.h:*/

"/control/#UID#/stop"
"/control/#UID#/play";
"/control/#UID#/playnow"
"/control/#UID#/load"
"/control/#UID#/pause"
"/control/#UID#/next"
"/control/#UID#/update"
"/control/#UID#/invoke"
"/control/#UID#/preview"
"/control/#UID#/clear"
"/control/#UID#/clearvideolayer"
"/control/#UID#/clearchannel"
"/control/stop"
"/control/play"
"/control/playnow"
"/control/load"
"/control/pause"
"/control/next"
"/control/update"
"/control/invoke"
"/control/preview"
"/control/clear"
"/control/clearvideolayer"
"/control/clearchannel"
"/control/down"
"/control/up"
"/control/playnowifchannel"
"/control/playandautostep"
"/control/playnowandautostep"

this code in my HTML-page worked for the #UID '10':

var myJSON = '{"path" : "/control/10/play", "args" : [1]}';
ws.send(myJSON);
knoepsche
 
Posts: 23
Joined: 06 Feb 2012, 16:42

Re: How to use websocket in client?

Postby knoepsche » 10 Jun 2016, 15:06

My question was about controlling the Caspar Client over websockets!

But it should work to send osc-commands from a HTML-Template to the Caspar-Client and there convert it to amcp-commands for the Caspar-Server.
knoepsche
 
Posts: 23
Joined: 06 Feb 2012, 16:42

Re: How to use websocket in client?

Postby Michel » 10 Jun 2016, 16:23

Hi knoepsche,
This seems interesting to know ...
For curiosity I tried this:
Code: Select all
<html>
<head>
</head>
<body>
<script>
var connection = new WebSocket('ws://127.0.0.1:6250');

// When the connection is open, send some data to the server
connection.onopen = function () {
   var myJSON = '{"path" : "/control/10/play", "args" : [1]}';
   connection.send(myJSON);
};

// Log errors
connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

// Log messages from the server
connection.onmessage = function (e) {
  console.log('Server: ' + e.data);
};
</script>
</body>
</html>

The Client has the default settings (with OSC input enabled on port 6250)
But I'm not able to get a connection, the browser console says:
WebSocket connection to 'ws://127.0.0.1:6250/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
WebSocket Error [object Event]
:(
Last edited by Michel on 10 Jun 2016, 18:30, edited 1 time in total.
Michel
 
Posts: 58
Joined: 20 Feb 2015, 22:48

Re: How to use websocket in client?

Postby didikunz » 10 Jun 2016, 18:00

knoepsche wrote:My question was about controlling the Caspar Client over websockets!

But it should work to send osc-commands from a HTML-Template to the Caspar-Client and there convert it to amcp-commands for the Caspar-Server.


Try connecting straight to Caspar server and send AMCP directly. Why go to the client and back? I do that from ActionScript in Flash/Animate all the time, I am not a JavaScript guy, but that should be possible there also.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3427
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: How to use websocket in client?

Postby Jesper Stærkær » 10 Jun 2016, 18:11

@Didi you don't have TCP Sockets in browsers, just node.js and similar servers. Websockets directly to server would be ideal for HTML workflow, but currently not implemented. I raised an issue on this half year ago.

The workflow with OSC/Websockets triggering of Client is quite convenient. We use it in a multile cases.
Jesper Stærkær
Independent Consultant at SuperFly.tv
User avatar
Jesper Stærkær
 
Posts: 841
Joined: 13 Apr 2010, 18:06
Location: Trondheim, Norway

Re: How to use websocket in client?

Postby Wandry » 19 Aug 2016, 19:57

Michel wrote:Hi knoepsche,
This seems interesting to know ...
For curiosity I tried this:
Code: Select all
<html>
<head>
</head>
<body>
<script>
var connection = new WebSocket('ws://127.0.0.1:6250');

// When the connection is open, send some data to the server
connection.onopen = function () {
   var myJSON = '{"path" : "/control/10/play", "args" : [1]}';
   connection.send(myJSON);
};

// Log errors
connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

// Log messages from the server
connection.onmessage = function (e) {
  console.log('Server: ' + e.data);
};
</script>
</body>
</html>

The Client has the default settings (with OSC input enabled on port 6250)
But I'm not able to get a connection, the browser console says:
WebSocket connection to 'ws://127.0.0.1:6250/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
WebSocket Error [object Event]
:(


Hi change port to 4250.
in casparcg client websocket port defualt is 4250
Wandry
 
Posts: 2
Joined: 11 Dec 2014, 04:53

Re: How to use websocket in client?

Postby Michel » 22 Aug 2016, 18:58

ah i see... thank's Wandry for your (first post) answer. ;)
I was using an old 2.0.8 client that did not have the websocket yet.
ClientSettingsWebSocket.png
ClientSettingsWebSocket.png (31.66 KiB) Viewed 1574 times

So, with that websocket feature, it's possible to trigger a line event of the rundown of the client, with an UID by using for example:
/control/#UID#/play
* And it is also possible to trigger the currently selected event line by using for example:
/control/play *
*edit: I am not able to get this work anymore... now I doubt if it ever worked, or :(
**edit bis: it works this way. see here


this is interesting.

The thing I don't understand is the use of the args...
Code: Select all
 { "path" : "/valid/path", "args" : [ arg1, arg2, ... ] }

is there examples of using those args ? is there a list of available args to be sent ?

an idea is, Would it be possible to send an AMCP command as PLAY argument of a CustomCommand line event?

Jesper Stærkær wrote:....Websockets directly to server would be ideal for HTML workflow, but currently not implemented. I raised an issue on this half year ago....

It would be really nice to have available websocket also on the Server ...
Last edited by Michel on 31 Mar 2017, 21:11, edited 2 times in total.
Michel
 
Posts: 58
Joined: 20 Feb 2015, 22:48

Re: How to use websocket in client?

Postby stevespaw » 23 Mar 2017, 23:45

I see that the newest client on the build, 2.09, supports websockets, this would be fantastic, but I can't seem to make it work.
I assume that it is like a web API. Maybe I am wrong. I would think the command from a browser assuming a clip with a UID in the client "test" would be:

http://127.0.0.1:4250/control/test/play

Am I doing something wrong? or will this not work this way?

Thanks,
Steve
stevespaw
 
Posts: 76
Joined: 01 Aug 2013, 15:21

Re: How to use websocket in client?

Postby knoepsche » 31 Mar 2017, 08:17

I think websockets is a persistent connection that can be used to receive/send data without sequential order and without http header. Therefor some browsers support a javascript api which is used as mentioned in the posts above. First you do your handshake, get a persistent tcp socket and then send the commands over a websocket-object.

Your example would use it as if it was xhr-polling.
Difference is xhr-polling creates new request with http header and waits for answer with http header
knoepsche
 
Posts: 23
Joined: 06 Feb 2012, 16:42

Re: How to use websocket in client?

Postby Michel » 31 Mar 2017, 16:24

Hi,

For info, stevespaw wrote a new post here https://github.com/CasparCG/Client/issues/234 that has been answered by Olle Soprani ...
I hope from there we could get more references of how websocket work ;) (especially the args)

Extract from OscWebSocketListener.cpp
Code: Select all
/*
 * The protocol for OSC over WebSockets is a simple JSON description.
 *
 * {
 *      "path" : "/valid/path",
 *      "args" : [ arg1, arg2, ... ]
 * }
 *
 * For a complete list of valid OSC paths, look in Global.h. First argument
 * must always be a number greater than zero to be executed.
 */

valid OSC paths, look in Global.h
Michel
 
Posts: 58
Joined: 20 Feb 2015, 22:48

Re: How to use websocket in client?

Postby Michel » 31 Mar 2017, 21:07

One note (to respond myself to my edited post above),

By activating the clients submenu: Rundown->Allow Remote Triggering
Rundown_Allow_Remote_Triggering.png
Rundown_Allow_Remote_Triggering.png (48.56 KiB) Viewed 258 times

you can trigger the current selected line in the rundown using:
/control/play
/control/stop
etc...
directly without #UID#
and you can traverse the rundown lines using:
/control/up
/control/down
Michel
 
Posts: 58
Joined: 20 Feb 2015, 22:48


Return to Content

Who is online

Users browsing this forum: No registered users and 2 guests