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.
Another panel 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β.
Also the 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.