Adding the CatVision.io Display

CatVision.io provides the remote access via app.catvision.io. Additionally, it offers the option to integrate the component CatVision.io Display into third-party applications. Operators can then use remote access directly from existing tools such as Salesforce (CRM) or ZenDesk (Customer support).

CatVision.io Display is an HTML5 component that requires JavaScript and WebSockets.

How it works

Prior jumping to code, here is a brief intro into how CatVision.io Display works.

Add CatVision.io SDK dependency via Android Studio

Prerequisites

Security note: We recommend to generate a dedicated API Key for each CatVision.io Display and not to share it. If one API Key get compromised, only one integration will be affected.

1. Obtain the authorization token

The CatVision.io Display is authorized for remote access by a time limited AUTHORIZATION_TOKEN. This authorization token has to be obtained by Operator Application Server (this is your application backend code) using Secret API key (SECRET_API_KEY) from a app.catvision.io API via a REST call. The authorization token is an opaque string. The authorization token is valid for XX minutes and the application has to obtain a new token after a timeout.

The relevant app.catvision.io API endpoint is available at https://app.catvision.io/api/authorization-token.
You need to send a POST request to this API endpoint with the SECRET_API_KEY variable. See an template of JSON body of the request:

{
    "secret_api_key": [SECRET_API_KEY]
}

The app.catvision.io API endpoint responds with a following response in JSON format (the authorization_token is of course different for each call):

{
    "ok": 1,
    "authorization_token": "88e52eebd7c992b3e95597596996e693_1502538423.52.61d94fb4b845b8b25181fd1b375513905c61f5a80e706481eb052fc6",
}

Here are examples of how to fetch the authorization token using some of the popular languages.

PHP

<?php
$url = 'https://app.catvision.io/api/authorization-token';
$payload = array("secret_api_key" => '[SECRET_API_KEY]');
$options = array(
    'http' => array(
        'method'  => 'POST',
        'header' => "Content-Type: application/json\r\n",
        'content' => json_encode($payload)
    )
);
$context = stream_context_create($options);
$r = file_get_contents($url, false, $context);
$res = json_decode($r);
$authorization_token = $res->{'authorization_token'};

Python

This example uses requests module.

import requests, json
url = "https://app.catvision.io/api/authorization-token"
payload = { "secret_api_key": [SECRET_API_KEY] }
headers = {'Content-Type': 'application/json'}
r = requests.post(url, headers = headers, data = json.dumps(payload))
res = json.loads(r.text)
authorization_token = res['authorization_token']

curl

$ curl \
--data '{"secret_api_key": "[SECRET_API_KEY]"}' \
	-H "Content-Type: application/json" \
	https://app.catvision.io/api/authorization-token

2. Include CatVision.io Display

Load the CatVision.io Display component:

<head>
    ...
    <script type="text/javascript" src="https://app.catvision.io/get/cvio.min.js"></script>
    ...
</head>

Put this initialization code immediately after the <body> tag. This code must be generated by your application backend code with an AUTHORIZATION_TOKEN obtained in a first step.

<body>
	<script type="text/javascript">
		CVIO.init({authorizationToken: '[AUTHORIZATION_TOKEN]'});
	</script>
...

3. Display a remote screen

Now, assuming an existing <canvas id='cviocanvas'> in a DOM of your HTML page, this is how you instantiate a CatVision.io Display and connect it to a remote client application identified by [CLIENT_TAG]. The client tag is a unique identification of a remote app provided by CatVision.io, you can obtain it via a CatVision.io SDK call. The client tag has always 16 characters plus two for brackets. Here is an example of client tag: [GMYDQMRQGIYGCMBS]

<canvas id='cviocanvas'>
...
<script type="text/javascript">
	var cvioDisplay = new CVIODisplay({
		target: document.getElementById('cviocanvas'),
		clientTag: '[CLIENT_TAG]',
	});
	cvioDisplay.connect();
</script>

A client tag is shown also at app.catvision.io:

CatVision.io Client Tag in a web app

Note: If you are looking for your own identification of the remote screen app, visit a Custom ID chapter to learn more.