11-26-2017 08:00 PM
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
11-29-2017 04:10 AM
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
11-29-2017 06:46 AM
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
12-01-2017 07:23 AM
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
12-11-2017 12:23 AM
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
12-11-2017 11:47 PM
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
12-11-2017 11:58 PM
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
12-12-2017 12:30 AM
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
12-12-2017 01:19 AM
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
12-22-2017 05:14 AM
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>
Discover and save your favorite ideas. Come back to expert answers, step-by-step guides, recent topics, and more.
New here? Get started with these tips. How to use Community New member guide