Vidyo.io is a platform as a service (PaaS) that enables developers to provide high-quality, real-time video communication capabilities. The service includes the VidyoClient SDK, which provides the APIs for integrating such communication capabilities into a variety of applications and workflows.
To start using Vidyo.io services load the Javascript Vidyo Library into your web application as shown below.
Static or Dynamic loading require a global callback function. When the library loads the callback will be invoked.
Static loading
<script src="https://static.vidyo.io/latest/javascript/VidyoClient/VidyoClient.js?onload=onVidyoClientLoaded"></script>
Dynamic loading via jQuery
The loadVidyo function returns a promise that notifies the correct loading of the library.
function loadVidyo() {
console.log("[CTLIVE WIDGET] Start Video Escalation...");
return new Promise(
function(resolve, reject) {
if (typeof window.VC === "undefined") {
// Vidyo Global Callback
window.onVidyoClientLoaded = function (status) {
console.log("[VIDYO] SDK EVENT");
if (typeof status !== "undefined") {
switch (status.state) {
case "READY":
console.log("[VIDYO] READY");
// The library is operating normally
// After the VidyoClient/VidyoConnector is successfully initialized,
// A global VC object will become available.
resolve();
break;
case "RETRYING":
console.log("[VIDYO] RETRYING");
break;
case "FAILED":
console.log("[VIDYO] FAILED");
break;
case "FAILEDVERSION":
console.log("[VIDYO] FAILEDVERSION");
break;
case "NOTAVAILABLE":
console.log("[VIDYO] NOTAVAILABLE");
break;
}
}
};
$.getScript("https://static.vidyo.io/latest/javascript/VidyoClient/VidyoClient.js?onload=CTLIVE_VIDYO_LOADED&webrtc=true&plugin=false",
function () {
console.log("[VIDYO] SDK Library loaded");
}
);
} else {
// Library already loaded
resolve();
}
}
);
};
After the VidyoClient/VidyoConnector is successfully initialized, global VC object will become available.
Connect to a Video Room or create a new one
In order to join a video room each participant must provide a new token. Tokens are used to authenticate each endpoint (mobile, web, or native desktop app) to the vidyo.io service and enable video chat sessions.
A token is generated by combining a user name, the application ID and an expiration time, then signing these with the developer key. The resulting string is the token.
Application ID, expiration time and developer key are stored in CTLive MongoDB configuration.
To generate a new token you can use the new API getToken available in CTLive SDK.
LIVECHATSDK.LIVECHAT.getVideoToken(<chat_id>, <nickname>).then(
function(data) {
console.log("[VIDYO] Token", data.token);
}
);
Start a Video Session
Once the token is generated you have to create a new Vidyo Connector Object and use the Connect method to join an existing video room or create a new one.
A DOM element ID must be reserved as display area where the video streaming will be render.
Each Video room is identified by using the CTLive Chat ID.
// Generate new Token
LIVECHATSDK.LIVECHAT.getVideoToken(AD_VIDEO_Obj.chat_id, "AGENT").then(
function (data) {
var TokenID = data.token;
console.log("[VIDYO] Token [" + TokenID + "]" );
// Create a Video Connector
VC.CreateVidyoConnector(
{
viewId: "divPanelVideo", // DOM element reserved to video render
viewStyle: "VIDYO_CONNECTORVIEWSTYLE_Default",
remoteParticipants: 2, // Max number of participants
logFileFilter: "info", // Log levels
logFileName: "",
userData: ""
}
).then(
function(vidyoConnector) {
// Connect to Video Room
vidyoConnector.Connect(
{
host: "prod.vidyo.io",
token: TokenID, //Generated Token
displayName: "CUSTOMER",
resourceId: "CHAT_DEFAULT_e9f75bfb-b8cc-4141-8c74-646d45636a14", // Video Conference Name, use the CTLive CHAT ID
onSuccess: function () {
console.log("[VIDYO] CONNECTED");
vidyoConnector.RegisterParticipantEventListener(
{
onJoined: VIDYO_onJoined,
onLeft: VIDYO_onLeft,
onDynamicChanged: VIDYO_onDynamicChanged,
onLoudestChanged: VIDYO_onLoudestChanged
}
);
},
onFailure: function (reason) {
console.log("[VIDYO] CONNECT ERROR [" + reason + "]");
},
onDisconnected: function (reason) {
console.log("[VIDYO] DISCONNECTED [" + reason + "]");
console.log("[VIDYO] Call Disconnect() API on Video Connector");
vidyoConnector.Disconnect().then(
function (result) {
console.log("[VIDYO] Call Disable() API on Video Connector");
vidyoConnector.Disable();
}
);
}
}
).catch( function (err) {console.err(err); }
);
}
);
}
).catch( function(err) { console.err(err); } );
Participants events
Use the RegisterParticipantEventListener API to get notified about participant events.
Name | Type | Description |
|---|---|---|
onJoined | function | Callback that is triggered when another participant joins a conference. |
onLeft | function | Callback that is triggered when an existing participant leaves a conference. |
onDynamicChanged | function | Callback that is triggered when the order of participants has changed, based on their importance according to active speech detection. |
onLoudestChanged | function | Callback that is triggered when a new participant becomes the loudest, based on active speech detection. |
Detect a Media escalation
CTLive offers a basic media escalation feature. A customer with an ongoing chat can request an engagement of the video channel by creating a video conference. The CTLive SDK library offers a notification and response API allowing you to perform a request-response-engagement flow on the video channel.
Request API (on customer side)
LIVECHAT.requestVideoUpgrade(<chat_id>);
Request Event notification (on agent side)
Register a callback on contact object for the “requestVideoUpgrade” event.
contact.on("requestVideoUpgrade",
function (event) {
// the Agent can accept/refuse the video media escalation
}
);
Response API (on agent side)
LIVECHATSDK.LIVECHAT.responseVideoUpgrade(<chat_id>, <boolean>); // if true the Agent integration generate a new token // and create a new Video Connector Object as shown in the previous section
Response Event notification (on customer side)
contact.on("responseVideoUpgrade",
function (event) {
console.log("On [responseVideoUpgrade] event", event.response);
// The CTLive Widget generate a new Token and create a new Video Connector Object
}
)
Documentation
Vidyo Developer Center: https://developer.vidyo.io/#/documentation
Vidyo API reference guide: https://developer.vidyo.io/#/reference-guide