cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
1403
Views
0
Helpful
9
Replies

Web advance sdk move from one page to another

edwin.ramana
Level 4
Level 4

Is it possible for web advance sdk to move from one page to another page during video call like in the basic sdk?

Regards,

Edwin R

9 Replies 9

robdoyle
Cisco Employee
Cisco Employee

Hi Edwin,

When using the Advanced SDK you are separating the V&V from the co-browse. The V&V will be unaffected by changes in co-browse pages. However changing the page the V&V is established in will cause the call to end. Therefore you need to keep the V&V out of the co-browsing pages when using the advanced SDK.

Regards,

Rob

Hi Rob,

So, the client can't see the video of the agent during co-browse?

Is there any way to make the client to be able to see the agent during co-browse session?

Regards,

Edwin

Hi Edwin,

The client can see the video during co-browse but with the v&v separate you have to maintain the call / video in a separate window.

For instance the Video call could be displayed on one screen and the co-browse on another.

The advanced SDK should only be used when you are not satisfied with the standard LA video call experience or your call flow means you are can't use it. e.g. Co-browse is started first.

Rob

Hi Rob,

How to initialize a coBrowse only session?

Right now I'm using advanced sdk to do the video call but I want to use a coBrowse only session after the video call has been initialized. I tried using the same approach as Android SDK, but it doesn't work on web SDK

It says "Consumer has not joined"

This is the coBrowse function

$('#coBrowse').click(function (event) {

            $.post("http://<xxx>/remcode.php", function(data){

              var obj1 = $.parseJSON(data);

              var shortcode = obj1['shortCode'];

                   $.post("http://<xxx>//remapp.php", {code: shortcode}, function(result){

                   alert(shortcode);

                  var obj2 = $.parseJSON(result);

                  AssistSDK.startSupport({

                  destination: '<xxx>',

                  sessionToken: obj2['session-token'],

                  correlationId: obj2['cid']

                  });

              

                });

            }); 

        });

I already got the sessionToken and correlationId from the web service.

The error in cosole said "SESSION_IN_PROGRESS".

And one more thing, when I tried to end the call using call.end() method, the onEnded callback doesn't get called.

Regards

Edwin R

robdoyle
Cisco Employee
Cisco Employee

Hi Edwin,

I can't see what is happening in the php but you shouldn't use a destination parameter in the startSupport call for co-browse only.

Rob

Hi Rob,

I tried that as well but it still not working.

This is my full code

  <script type="text/javascript" src="https://reas:8443/gateway/scripts/adapter.js"></script>

    <script type="text/javascript" src="https://reas:8443//gateway/scripts/csdk-sdk.js"></script>

     <script type="text/javascript" src="https://reas:8443/assistserver/sdk/web/consumer/assist.js"></script>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>


    <script>

       //Get hold of the sessionID however your app needs to

    // Set up STUN server list

    var mIsVideoMuted =  false;

    var mIsAudioMuted =  false;

    var mIsOnHold = false;

    var call;


    function endCall()

    {

      call.end();

      document.getElementById('callMenu').style.display = "none";

      document.getElementById('remoteVideoElement').style.display = "none";

      document.getElementById('previewVideoElement').style.display = "none";

      location.reload();

    }

    $('#go').click(function (event) {



        var xhttp = new XMLHttpRequest();

          xhttp.onreadystatechange = function() {

          if (this.readyState == 4 && this.status == 200) {

           

            //to customize the pop-up window for the video, all you need to do is edit the css and

            // add the url of the css to the popupCssUrl parameter.

            var stunServers=[{"url": "stun:stun.l.google.com:19302"}];

          UC.onInitialised = function() {

          //Register listeners on UC

          UC.phone.onIncomingCall = function(call) {

            // perform tasks associated with incoming call

          };

          call = UC.phone.createCall('sip:8080@10.20.212.8');


          call.onInCall = function() {

            // Show video stream(s) in elements

            call.setVideoElement(document.getElementById('remoteVideoElement'));

            call.setPreviewElement(document.getElementById('previewVideoElement'));

            call.setLocalMediaEnabled(true,true);

            document.getElementById('callMenu').style.display = "block";

          };

          //Set what to do when the remote party ends the call

          call.onEnded = function() {

          

          };

          //Set up what to do if the callee is busy, inform your user etc

          call.onBusy = function() {

            alert("The callee was busy");

          };


          //Dial the call

          call.dial('enabled','enabled');


        };

        UC.onInitialisedFailed = function() {


          };

      //Start UC session using the Session ID and stun server list

        UC.start(this.responseText);

         

     

          }

          };

       

          xhttp.open("GET", "http://webservice/rem.php/?ref=assist-123", true);

          xhttp.send();  

        });


      $('#coBrowse').click(function (event) {

            $.get("http://webservice/remcode.php", function(data){

              var obj1 = $.parseJSON(data);

              var shortcode = obj1['shortCode'];

              alert(shortcode);

                  $.post("http://webservice/remapp.php", {code: shortcode}, function(result){

                  var obj2 = $.parseJSON(result);

                  AssistSDK.startSupport({

                  sessionToken: obj2['session-token'],

                  correlationId : obj2['cid'],

                  allowedIFrameOrigins : false

                });

                  alert(obj2['cid']);

                });

            });   

        });


      $('#end').click(function (event) {

            endCall();

           

        });

         $('#muteVideo').click(function (event) {

          if(mIsVideoMuted){

            call.setLocalMediaEnabled(true, !mIsAudioMuted)

            mIsVideoMuted = false;

          }else{

            call.setLocalMediaEnabled(false, !mIsAudioMuted)

            mIsVideoMuted = true;

          } 

        });

           $('#muteAudio').click(function (event) {

          if(mIsAudioMuted){

            call.setLocalMediaEnabled(!mIsVideoMuted, true)

            mIsAudioMuted= false;

          }else{

            call.setLocalMediaEnabled(!mIsVideoMuted, false)

            mIsAudioMuted = true;

          }

         });

           $('#hold').click(function (event) {

          if(mIsOnHold){

            call.hold();

            mIsOnHold = true;

          }else{

            call.resume();

            mIsOnHold = false;

          } 

        });


    </script>


Regards


Edwin R

robdoyle
Cisco Employee
Cisco Employee

Hi Edwin,


1. Do you get the same error "Consumer has not joined" ?

2. Are you using calls to both the following  in your php?:

request.open('PUT', '<reas_address>/assistserver/shortcode/create',true);

request.open('GET', '<reas_address>/assistserver/shortcode/consumer?appkey=' + shortcode, true);

3. Are you passing the shortcode to the agent to use? in a co-browse only manner?

4. where is the agent taking the V&V call?

Rob


Hi Rob,

1. Yes.

2. Yes, I already got the shortCode, sessionID, and correlationID.

3. Yes and yes.

4. Agent using Finesse on internal customer side and Consumer using web with internet access.

Regards,

Edwin R

Apologises for the long delay in responding Edwin,

Do you have a trusted cert for the REAS box? If not you will have to navigate to

https://reas:8443/assistserver/sdk/web/consumer/assist.js

And except the  insecure cert for it to work.

If it is still failing look at this code I got working (change the REAS IP address in all the files)

Rob

Session.php

==========

<?php

header('Access-Control-Allow-Origin: *');

    $json = '

        { "appkey" : %s}

    ';

    $json = sprintf($json, $appkey);

    $appkey = $_GET['appkey'];

    $url = sprintf("https://192.168.8.91:8443/assistserver/shortcode/consumer?appkey=%u", $appkey);

    // configure the curl options

        $ch = curl_init();

        curl_setopt($ch,CURLOPT_URL,$url);

        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

        // curl_setopt($ch, CURLOPT_HTTPHEADER, [        

        //     'Content-Type: application/json',

        //     'Content-Length: ' . strlen($json)

        // ]);

    // execute HTTP POST & close the connection

    $response = curl_exec($ch);

    curl_close($ch);

    // decode the JSON and pick out the session token

    // $decodedJson = json_decode($response);

    // $id = $decodedJson->{'sessionid'};

    //echo the ID we've retrieved

    echo $response;

?>

=========

shortcode.php

===========

<?php

    header('Access-Control-Allow-Origin: *');

    // configure the curl options

    $ch = curl_init("https://192.168.8.91:8443/assistserver/shortcode/create");

    curl_setopt($ch,CURLOPT_PUT, true);

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

    curl_setopt($ch, CURLOPT_HTTPHEADER, [        

        'Content-Type: application/json',

        'Content-Length: ' . strlen($json)

    ]);

    // execute HTTP POST & close the connection

    $response = curl_exec($ch);

    curl_close($ch);

    // decode the JSON and pick out the session token

    $decodedJson = json_decode($response);

    $code = $decodedJson->{'shortCode'};

    // echo the ID we've retrieved

    echo $response;

?>

===========

index.html

========

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Consumer SDK</title>

       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</head>

<body style="">

<div class="container">

    <div class="col-md-12">       

        <h2 id="short-code"></h2>

        <button id="go" class="btn">Click here</button> to start an Assist Session

        <!-- The button to end an Assist Session will only be visible while assist is active -->

        <button style="display: none;" id="end" class="btn">End support</button>

    </div>

</div>

</body>

<!-- Load the Assist JavaScript library  -->

<script src="https://192.168.8.91:8443/assistserver/sdk/web/consumer/assist.js"></script>

<!-- Load jQuery to provide easier DOM manipulation (toggling classes etc.) -->

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script>

    // cache the UI elements that we will be interacting with

    var $endButton = $('#end');

    var $codeDisplay = $('#short-code');

   

    // when the support button is clicked...

    $('#go').click(function (event) {

        event.preventDefault();

       

        // Retrieve a short code

        $.ajax('shortcode.php', {

            dataType: 'json'

        })

        .done(function (response) {

            // display the code for the consumer to read to the agent

            $codeDisplay.text(response.shortCode);

            var appkey = response.shortCode;

            // Retrieve session configuration (session token, CID etc.)

            $.get('session.php?appkey='+appkey, function (config) {

                // translate the config retrieved from the server, into

                // parameters expected by AssistSDK

                var params = {

                    cobrowseOnly: true,

                    correlationId: config.cid,

                    scaleFactor: config.scaleFactor,

                    sessionToken: config['session-token']

                };

                // start the support session

                AssistSDK.startSupport(params);

            }, 'json');           

        });

    });

    // configure Assist to automatically approve share requests

    AssistSDK.onScreenshareRequest = function () {

        return true;

    };

    // the $endSupport button will be hidden

    // $endButton.hide().css('display', 'inline');

    // when screenshare is active, toggle the visibility of the 'end' button

    AssistSDK.onInSupport = function () {

        $endButton.show();

    };

    AssistSDK.onEndSupport = function () {

        $endButton.hide();

        $codeDisplay.text('');

    };

    $endButton.click(function () {

        AssistSDK.endSupport();

    });

</script>

</html>