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.
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.