Vidyo Agent Integration Sample

CTLive has a built-in agent integration page with video support. The page is available at the following address:

http://<CTLIVE_SERVER_ADDRESS>:3001/domain/agentTest.html

CTLIVE_SERVER_ADDRESS marker is the hostname/IP address of the application server where CTLive is installed.

Once loaded the Agent Integration Sample looks as follow:

High area of the page is reserved for logging pourpose. The lightblue panel will display all the activities and notifications relating to CTLive Agent SDK library.

A lower panel element is reserved for video streaming.

This CTLiveAgent SDK integration sample is not intended for standalone use.
It is necessary to have a valid authentication JWT Token in order to log in as an Agent and allow you to manage an audio/video escalation on the chat channel using Vidyo technology.

How to use

First of all the Agent must log in to CTLive to get a valid JWT session token.
The token must be entered in the corresponding input box on the sample application page.

Press the LOGIN button to login into CTLive engine as a new Agent. The log panel will display the authentication result.

To login in order to support Video capabilities, it’s needed to add an additional flag to Login request enableVideo = true. Check API documentation https://enghouseglobal.atlassian.net/wiki/spaces/CTLIVE/pages/68387466.

Join a Chat

The sample can join an ongoing chat between Agent and Customer by using the ChatID and pressing the JOIN CHAT button.

Once joined a chat, the sample integration will automatically accept any audio / video engagement requests using the following API:

contact.on("requestVideoUpgrade", function (event) {
  LOG("[CTLIVE AGENT SDK] On [requestVideoUpgrade] event");
  LOG("[CTLIVE AGENT SDK] Accept Audio/Video media upgrade");
  contact.responseVideoUpgrade(true, "videoPanel", true, true);
});

The video stream will be rendered in the DOM Element whose ID is “videoPanel”.

Participant and audio/video Devices notifications will be automatically bind with custom callbacks:

// Bind Video Callback
contact.bindVideoParticipantEvent(function(event, eventName) {
  LOG("[CTLIVE AGENT SDK] PARTICIPANT Event [" + eventName + "]");
});
contact.bindVideoMicrophoneEvent(function(event, eventName, microphoneObj, state) {
  console.log("[CTLIVE AGENT SDK] MICROPHONE Event [" + eventName + "]" + String.fromCharCode(10) + JSON.stringify(microphoneObj, null, 2) );
});

All the notifications will be logged in the high area panel:

Feel free to modify the code as you wish, for example to manage the system's audio and video devices, or change the viewing area of the video stream.