How to integrate video processing solutions?

06 May 2024
8 Minutes to read

Print
Share
Dark
Light

How to integrate video processing solutions?

Updated on 06 May 2024
8 Minutes to read

Print
Share
Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback

This article covers technical details to integrate video processing solutions with the Tegsoft Contact Center. Video processing solutions may be used for “video onboarding”, “video verification”, “video recording”, etc.

For better integration Tegsoft Solution provides,

tools for accessing remote video (video of the contact /customer) or local video (video of the agent)
APIs to support call control (Answer, hold, mute, hangup, etc.)
tools for creating video calls from the contact/customer side via a webpage or a mobile app

In summary, Tegsoft APIs and integration tools can be considered a full set for creating a video solution over a video contact center. This article will cover all the technical details from top to bottom.

Here are the main sections of the article,

Agent Desktop Video Integration
Initiating a video call as a client (contact/customer side)

All the topics will be explained via a sample video processing application integration.

The sample application will have the following features,

video calls initiated via a web page (similar to mobile solutions)
the parameters will be carried from the originator client app to the popup application which will process videos.
Both contact and agent videos will be duplicated as an example of processing.

Integrating video processing application into the Tegsoft Agent Desktop

During a video call, Tegsoft's “agent full desktop” interface has remote and local video components accessible via CTI applications that run in the Agent Desktop Interface via an iframe. If a video application wants to access and perform tasks over the video content both local or remote this is the point all the logic must be executed.

To add an application to a CTI interface please check the related article from the link.

In our use case, the application will be sampleVideo.html. All the parameters are dynamic. If needed both key or sequence can be changed. New static key-value pairs can be added or unnecessary parameters can be removed.

You need to add a space character as a separator and then the “clientSideCTIEventList=all” parameter at the end of the URL to activate the event-action interface. This integration parameter needs to be assigned to the agents that will process videos.

Our sample video-processing application will use events and actions to communicate with the Tegsoft Agent Desktop Interface.

Actions are the commands from our video processing application to Agent Desktop. (Video App —> Agent Desktop)

Events are feedbacks, action results, or notifications that we receive on the video application from Agent Desktop (Agent Desktop —> Video App)

For more details, you can check events & actions from the widget integration article which is very similar to the usage that is going to be described here.

There are two ways to catch call control events.

Configuring “Login”, “Call Offer” (Ringing), “Call Popup” (Connect / Answer), or “After Call” (Hangup) URLs with different parameters or different URLs
Configuring a single loading URL (Login URL) to initialize the app and catching events to handle start processing or stop processing.

In our sample application, we will catch start and stop events. If this usage is compatible with the app this is the most recommended practice to configure.

Please consider the browser limitations below for a secure integration.

The application URL needs to be accessible via HTTPS protocol and needs to be considered as secure.
The application needs to be served from the same domain as the Tegsoft Server.

Please check the sample application HTML source below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta data-fr-http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="robots" content="noindex">
        <meta name="googlebot" content="noindex">
        <meta name="googlebot-news" content="noindex" />
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />

        <script lang="javascript">
            if (window.addEventListener) {
                window.addEventListener("message", onMessage, false);
                console.log("DEBUG window.addEventListener executed");
            } else {
                window.attachEvent("onmessage", onMessage, this);
                console.log("DEBUG window.attachEvent executed");
            }

            window.onload = function() {	
                document.getElementById("queryParameters").innerHTML = window.location.search;
            }            

            let interval = undefined;

            function startCloneProcess() {
                if(interval != undefined) {
                    return;
                }

                let remoteVideoElement =  parent.document.getElementById('tegsoft-remote-video');
                let localVideoElement =  parent.document.getElementById('tegsoft-local-video');

                let remoteCanvasElement =  document.getElementById('remoteCloneVideo');
                let localCanvasElement =  document.getElementById('localCloneVideo');

                var remoteContext = remoteCanvasElement.getContext('2d');
                var localContext = localCanvasElement.getContext('2d');

                interval = setInterval(() => {
                    if(!remoteVideoElement) {
                        return;
                    }

                    if(!localVideoElement) {
                        return;
                    }

                    if(!remoteVideoElement.paused && !remoteVideoElement.ended) {
                        remoteContext.drawImage(remoteVideoElement, 0, 0, Math.floor(remoteCanvasElement.clientWidth), Math.floor(remoteCanvasElement.clientHeight));
                    }

                    if(!localVideoElement.paused && !localVideoElement.ended) {
                        localContext.drawImage(localVideoElement, 0, 0, Math.floor(localCanvasElement.clientWidth), Math.floor(localCanvasElement.clientHeight));
                    }
                }, 100);
            }

            function stopCloneProcess() {
                clearInterval(interval);
            }

            function onMessage(payload) {
                if(payload?.type!= "message") {
                    return;
                }

                if(payload?.data?.type != "event") {
                    return;
                }

                if(payload?.data?.group != "agent") {
                    return;
                }

                if(payload.data.name=="OnIncomingCallRinging") {
                    console.log("DEBUG Starting cloning ",payload);
                    // OnIncomingCallAnswered
                    startCloneProcess();
                    return;
                }

                if(payload.data.name=="OnIncomingCallHangup") {
                    console.log("DEBUG Stopping cloning ",payload);
                    stopCloneProcess();
                }
            }
        </script>
    </head>
    <body >
        <div style="display:flex;flex-direction:column;justify-content:center;align-items:center">
            <h1>THIS IS A SAMPLE VIDEO INTEGRATION TEST PAGE</h1>

            Query parameters are listed below.<br>
            For more details please check integration article <a href="https://docs.tegsoft.com/how-to-integrate-video-processing-solutions" target="_blank">https://docs.tegsoft.com/how-to-integrate-video-processing-solutions</a>
        </div>
        <div>
            <b>These are the query parameters:</b><br />
        </div>
        <div id="queryParameters" ></div>
        <h2>THIS IS remote Video</h2>
        <br />
        <canvas id="remoteCloneVideo"></canvas>
        <h2>THIS IS local Video</h2>
        <br />
        <canvas id="localCloneVideo"></canvas>
    </body>
</html>

Agent Desktop Idle Stage

If the login URL is configured, a successful agent login will load the app. Agents will be accessing the app like in the screenshot below.

Initiating A Video Call

Video calls can be initiated via a mobile application or a web page. For a better user experience after loading the iframe window events need to be monitored and hiding showing interface process needs to be handled.

Here is an example link and a client video call configuration,

https://TEGSOFT_SERVER_URL/Tobe/forms/TegsoftVue/?fileName=forms/TegsoftTelecom/webchat/ccchatVideoCall
&locale=en
&DID=9542
&traceevents=true&traceactions=true&tracebackend=true
&start=true
&CONTID=CONT987
&FIRSTNAME=John
&LASTNAME=Doe
&ctiData={ctiVariableNames: [integrationKey, integrationKey2, CONTID],variables: {integrationKey: 'sampleKey', CONTID: 'CONT987'}}
&PHONE=02123212088

Parameter Name	Description	Example Data
locale	Customer locale parameter for UI layout. ISO language codes are valid.	en tr de
DID	Multiple scenarios can be executed (Direct call for agents, Data collection via IVR, etc.) This number can be configured via Tegsoft incoming call management.	9876 5101122 942
traceevents, traceactions, tracebackend	Those parameters are used to activate tracing and debugging. It is strongly recommended to remove those parameters for production environments.	&traceevents=true&traceactions=true&tracebackend=true
start	This parameter needs to be true to start a video call	start=true
CONTID, FIRSTNAME, LASTNAME, PHONE, EMAIL	These are CRM fields to have better customer communication management. It is strongly recommended to use the same values matching with the company CRM data. Otherwise, customer identification will not take place.	&CONTID=CONT987 &FIRSTNAME=John &LASTNAME=Doe &PHONE=02123212088
ctiData	This parameter is used for passing integration parameters from the client to the server app. ctiVariableNames is an array of keys to pass from client to server. variables will store the key/value pairs.	ctiData={ctiVariableNames: [integrationKey, integrationKey2, CONTID],variables: {integrationKey: 'sampleKey', CONTID: 'CONT987'}}

The URL can be used in an iframe of an app or a webpage.
Here is an example of a clientside screenshot.

Receiving A Video Call

When an agent receives video calls a video sign is displayed on the top left corner of the incoming call dialog. Even during the ringing stage integration parameters and all the events are fired. OnIncomingCallRinging can be handled to prepare video processing.

When the call is answered video streaming starts. OnIncomingCallAnswered event will be received and remote and local video components can be accessed from parent via Javascript.


                let remoteVideoElement =  parent.document.getElementById('tegsoft-remote-video');
                let localVideoElement =  parent.document.getElementById('tegsoft-local-video');

In this example, both remote and local video content is copied to have a sample processing.

Was this article helpful?

What's Next

PMS Integration

Table of contents

Integrating video processing application into the Tegsoft Agent Desktop
Initiating A Video Call
Receiving A Video Call