Page Comparison

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

Code Block

language	js

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

Code Block

language	js

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 availableCTLive offers a built-in Vidyo integration by extending the contact chat object adding methods and properties to control the media audio/video escalation.

Media escalation feature

CTLive offers a basic media escalation feature. A customer with an ongoing chat can request an engagement of the audio/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)

Code Block

LIVECHAT.requestVideoUpgrade(<chat_id>);

language	js

contact.requestVideoUpgrade(String <divID>, Boolean <useAudio>, Boolean <useVideo>)
// Example:
contact.requestVideoUpgrade("videoPanel", true, true);

divID: Element div/panel ID where the composited video will be rendered
useAudio: flag that indicates whether to perform a media escalation on the current chat using the audio channel
useVideo: flag that indicates whether to perform a media escalation on the current chat using the video channel

Request Event notification (available on both agent

...

/customer engagement)

Register a callback on contact object for the “requestVideoUpgrade” event.

Code Block

language	js

contact.on("requestVideoUpgrade", 
  function (event) {
    // the Agent can accept/refuse the video media escalation
  }
);

Response API (available on both agent

...

/customer engagement)

Code Block

language	js

LIVECHATSDK.LIVECHATcontact.responseVideoUpgrade(<chat_id>Boolean <true/false>, <boolean>String <divID>);

// Example: ifAgent trueaccept the Agentmedia integration generate a new tokenescalation
contact.responseVideoUpgrade(true, "videoPanel");
// andExample: createagent arejected newthe Videomedia Connector Object as shown in the following sectionescalation
contact.responseVideoUpgrade(false, "videoPanel");

Response Event notification (available on both agent/customer

...

engagement)

Code Block

language	js

contact.on("responseVideoUpgrade",
  function (event) {
   console.log("On [responseVideoUpgrade] event", event.response);
   // no Theaction CTLiveis Widgetrequired generateby athe newintegration.
Token and create a// newthe Videoaudio Connector/ Objectvideo connection will }
)

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.

Code Block

language	js

LIVECHATSDK.LIVECHAT.getVideoToken(<chat_id>, <nickname>).then(
  function(data) {
    console.log("[VIDYO] Token", data.token);be automatically engaged 
   // upon receipt of the positive response.
  }
);

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.

Participants Events Callback

A custom integration can bind a callback to receive notification about the participants members of the video engagement session.

Code Block

language	js

// Generate new Token
LIVECHATSDK.LIVECHAT.getVideoToken(AD_VIDEO_Obj.chat_id, "AGENT").thencontact.bindVideoParticipantEvent(
  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 () {
              (event, eventName, participant) {
    console.log("[VIDYO] CONNECTED");
              vidyoConnector.RegisterParticipantEventListener(
                {
                  onJoined: VIDYO_onJoined,
                  onLeft: VIDYO_onLeft,
                  onDynamicChanged: VIDYO_onDynamicChanged,
                  onLoudestChanged: VIDYO_onLoudestChanged
                }
              );
              console.log("[VIDYO] SELECT DEFAULT CAMERA");
              vidyoConnector.SelectDefaultCamera();
              console.log("[VIDYO] SELECT DEFAULT MICROPHONE");
              vidyoConnector.SelectDefaultMicrophone();
              console.log("[VIDYO] SELECT DEFAULT SPEAKERS");
              vidyoConnector.SelectDefaultSpeaker();
            },
            onFailure: function (reason) {
              console.log("[VIDYO] CONNECT ERROR CTLIVE AGENT SDK] PARTICIPANT Event [" + reasoneventName + "]");
 
          },
            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

...

Callback that is triggered when

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
event	object	jQuery standard event notification object
eventName	String	Participant event name. It can be one of the following values: onJoined: a new participant joined the video room. onLeft: a participant left the video room. onDynamicChanged: the order of participants has changed, based on their importance according to active speech detection.	onLoudestChanged	function	Callback that is triggered when The “participant” parameter will contains an ordered array of participants according to rank. onLoudestChanged: a new participant becomes the loudest, based on active speech detection.
participant	Object	The object contains the participant information.

Documentation

Vidyo Developer Center: https://developer.vidyo.io/#/documentation

...

Disconnecting Video session

Use the contact.videoDisconnecAndDestruct method to disconnect the participant from the video room.

To engage a new video session, a new media escalation must be requested.

Versions Compared

Old Version 6

New Version Current

Key

Static loading

Dynamic loading via jQuery

Media escalation feature

Request API (on customer side)

Request Event notification (available on both agent

/customer engagement)

Response API (available on both agent

/customer engagement)

Response Event notification (available on both agent/customer

engagement)

Connect to a Video Room or create a new one

Start a Video Session

Participants Events Callback

Participants events

Documentation

Disconnecting Video session