API Development

Creating Interactive Video Kiosks

| Darren Mason |
interactive video kiosks

Interactive video kiosks are a cool way to synchronize your message across multiple devices to individuals. It can sound complicated, but it’s really an easy task.

One way is to use web sockets, this is what I did in our Axway Griffin Innovation Lab. We even added support for our Alexa. So how did I do it? Let’s find out.

Architecture

Elements

  • HTML
  • CSS
  • JavaScript
  • Node
  • NPM
  • Docker

Prerequisite

Working knowledge of HTML, CSS, JavaScript, Node, NPM, Docker is the desired understanding of Alexa Skills development.

The Clients

A client can be anything that can connect to the internet, display HTML and play a video. In my case, I am using Raspberry Pi computers. But any computer would work. To set up a client, you will need to create a basic HTML document. Here you see the doPlayLocal event listener that will fire when the server does its broadcast of that function name.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script href="https://[YOUR_DOMAIN]/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect("https://[YOUR_DOMAIN]");
        document.addEventListener("DOMContentLoaded", function(event) {
            socket.on("doPlayLocal", function(data) {
                //play your video
            });
        });
    </script>
</head>
<body>
<video id="myVideo">
     <source src="" type="video/mp4">
</video> 
</body>
</html>

Server

Now to create the node server

npm init [yourprojectname]
cd [yourprojectname]
npm install socket.io

The basics of the server code are to establish a real-time, bi-directional communication between web clients and servers. I’m using port 4001 to listen on.
var io = require('socket.io').listen(process.env.PORT || 4001);

Once we get connected we can start adding sockets
io.sockets.on('connection', function (socket) {}

This is an example of a typical socket listener. Once a call to doPlay is called we forward this call to all listening clients. The broadcast.emit does this. The doPlayLocal string is the name of the function a client will implement. Once the client receives this, you can use JavaScript to play your video on that client.

socket.on("doPlay", function (data) {
   socket.broadcast.emit('doPlayLocal', { id: data.id });
});

Hosting

Next, you will need a place to run your node server. I used Axway’s AMPLIFY Runtime Service (ARS) to host my node server. This way I can access my web sockets from anywhere.

In order to accomplish this, you will need an account to the Axway AMPLIFY Platform. Then you will need to create a new server.

First you will need to build your docker container (full docker file)
docker build --tag kiosk-server ./
Set up the ARS server
acs new kiosk-server --force && acs server --set Medium kiosk-server && acs config --set PORT=4001 kiosk-server
Lastly publish to ARS
acs publish kiosk-server --delete_oldest --force --image kiosk-server --app_version 0.0.1

Amazon Alexa (optional)

Admittedly, setting up Amazon Alexa is a little more complex, so I’m not going to go into great detail. But the basics are this.
– Create an Alexa skill.
– Next, Build an API that your Alexa skill can connect to. I did this using Axway’s API Builder
– Link your API to the skill under the Endpoint tab.

– In your newly created API simply call your socket. The broad strokes are as shown. As you can see it calls out to the server on your ARS to broadcast to the clients.


var io = require('socket.io-client');
var socket = io.connect("https://[YOUR_DOMAIN]");
//calls your server to broadcast to the clients.
socket.emit('doPlay', { videoId: id });

Final Thoughts

I hope this gives you an idea of how to accomplish a synchronized kiosk that can be used to communicate your message to anyone you wish. We use this in the Axway Griffin Innovation Lab quite extensively as well as aspects of it to control (start, pause, stop) our video during demos.

Learn more about entering the innovation cycle.

Click Here