Controlling Watchout via Websockets

Websockets has been supported in several major browsers since as early as 2010.

It enables 2 way communication with a remote host. This persistent connection between the client and the server allows both parties to start sending data at any time.

For the recent Delphi Investor Update Conference in London we built a HTML interface to control a video sequence running on the Watchout media server.

This interface was designed to include the following functions:

• play
• pause
• stop
• jump to chapter

In Watchout these commands translate to:

• run
• halt
• kill
• gotoControlCue

List of Watchout Commands
A list of commands can be found on page 161 of the user guide.

In our use case we were controlling an auxiliary timeline called “HSD”.

In our html markup we have two navigation elements. One for the playback controller and one for the chapter markers (control cues).

<h3>HSV</h3>
<ul>
 <li onclick="run('HSD')">Run</li>
 <li onclick="halt('HSD')">Halt</li>
 <li onclick="toggle('HSD')">Start/Stop</li>
 <li onclick="kill('HSD')">Kill</li>
</ul>

<ul>
 <li onclick="gotoControlCue('HSD', 'HSD_CH1')">HSD_CH1</li>
 <li onclick="gotoControlCue('HSD', 'HSD_CH2')">HSD_CH2</li>
 <li onclick="gotoControlCue('HSD', 'HSD_CH3')">HSD_CH3</li>
 <li onclick="gotoControlCue('HSD', 'HSD_CH4')">HSD_CH4</li>
 <li onclick="gotoControlCue('HSD', 'HSD_Audio_Up')">HSD_Audio_Up</li>
 <li onclick="gotoControlCue('HSD', 'HSD_Audio_Down')">HSD_Audio_Down</li>
</ul>

These items have onclick statements to functions that we will write later however it’s worth noting the parameters in the cue. ‘HSD’ is the name of the auxillary timeline and ‘HSD_CH1’ is the name of the control cue or chapter marker.

To begin we need to establish a connection with the server. Watchout listens for external commands via the port 3040. Commands can be sent over either TCP or UDP. In order to accept commands on either of those ports, you must enable those options in the Preferences dialog box Control tab in Watchout. Our local IP in this example was 10.172.15.244 so we connect to this.

ws://10.172.15.244:3040

We connect via “ws:” the URL schema for WebSocket connections. There is also “wss:” for secure WebSocket connections. We’ve also included “states” for our timelines as certain Watchout commands need the value of “false” to be sent in the same string.

var host = "ws://10.172.15.244:3040";
var socket = new WebSocket(host);
var states = { HSD: false };

The once the connection has been setup we can write to the console to document the state of the connection.

socket.onopen = function () {
 console.log('Socket Status: ' + socket.readyState + ' (open)');
}

socket.onmessage = function (msg) {
 console.log('Received: ' + msg.data);
}

socket.onclose = function () {
 console.log('Socket Status: ' + socket.readyState + ' (Closed)');
}

Once the connection has been established we now want to setup a series of functions to send messages and communicate with the server. We are setting up the following functions send (to actually send the message), toggle (to toggle the playback for the pause button), kill (for the stop button), halt (for the pause button) and gotoControlCue (for navigating to the chapter markers).

function send(message){

 try{
 var response = socket.send(message);
 console.log("Sent : "+message);

 } catch(exception){
 console.log(exception);
 }
}

function toggle(timeline) {

 if(states[timeline] == true) {
 halt(timeline);
 } else {
 run(timeline);
 }
}

function kill(timeline) {
 send('kill \"'+timeline+'\"\n');
 states[timeline] = false;
}

function run(timeline) {
 send('run \"'+timeline+'\"\n');
 states[timeline] = true;
}

function halt(timeline) {
 send('halt \"'+timeline+'\"\n');
 states[timeline] = false;
}

function gotoControlCue(timeline, command) {
 send('gotoControlCue \"'+command+'\" false '+timeline+'\n');
}

Watchout has a few strict formatting parameters that need to be followed to ensure the message is sent correctly. For example all commands need a carriage return or line break. In the case of javascript this is written as “\n” and is added to the end of our statements to be included in the message.

So with all this setup we open our controller in the browser and we can then check the console logs to check the connection was successful and open.

We’ve also written console logs for when a message is successfully sent and details of the string passed to Watchout.

In our example we were also controlling the production machine and not the display machine. In the event that you wish to control the display machine directly the message will need to be preceeded by an authenticate message.