Vidyo Agent Integration Sample
- Felice Griffi
- Alessandro Rovetto
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 login.
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.