© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080

• Solution Overview

• Remote Expert Mobile Components

• Overview of SDKs

• Supported Browsers and Platforms

• Code walkthrough and SDK deep dive

Remote Expert Mobile Developer’s Overview

1

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 2

Internet

Enterprise UC

Infrastructure

Remote Expert Mobile

Media

Convert WebRTC to Enterprise Communications

Signaling

Features and Functionality• Enables web and mobile apps to make

voice and video calls into legacy SIP networks, ie. Cisco Unified Communications or Cisco Contact Center.

Extended Featureset• Co-browsing within an REM enabled web

page or app.• Addition of data channel to pass context

and drive appication events

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 3

Remote Expert Mobile High Level Architecture• The REAS is the core-signaling

component that communicates securely to web browsers and mobile apps (via https and WSS)

• Hosts client SDKs• Handles session provisioning and

management

• Handles RTP media streams

• CSDK handles media negotiation so you don’t have to

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 4

Remote Expert Application Server (REAS)

• Server Side Services• Web Gateway – converts webRTC to SIP• Finesse Gadgets – Enables Expert Assist Agent SDK within

Finesse• Expert Assist Web Console -Enables co-browse and video

outside of Contact Center Environment

• CSDK• CSDK Phone – Overlays webRTC framework to simplify

development of voice and video applications• Application Event Distribution (AED) – Creates data

channel allowing text and application events to be sent over the web socket, providing opportunities for a more customizable, feature rich experience.

• Expert Assist• Consumer – Enables client to co-browse webpage or mobile

application, view forms pushed to page, and co-fill forms.• Agent – Allows agent to view webpage or application, push

forms and co-fill forms.

Application Server

AED

Finesse Gadget

Web Console

Web Gateway

Phone

Expert Assist

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 5

Supported Browsers

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 6

Supported Mobile Platforms

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 7

Expert Assist

• Expert Comprehensive• Expert Assist can by used

for a stand alone co-browse session or in comprehensive mode with voice/video and co-browse kicked off at once.

• Comprehensive mode uses the Expert Assist SDK, AED, and CSDK Phone features to create an all-in-one interaction with minimal code to implement.

• Disadvantage is what you gain in simplicity you lose in customization.

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 8

Expert Assist Comprehensive

Import Script:<script src=“../assistserver/sdk/web/consumer/assist.js"></script>

Start Support:AssistSDK.startSupport({ "destination": destination });

Exclude Elements if Desired:<div id="sensitive-details" class="assist-no-show">content</div>

Property Default Value Description

destination   Username of agent or agent group if that agent or agent group is local to the web gateway; otherwise full SIP URI of agent or queue

videoMode "full" Sets whether and from which parties video should be shown. Allowed values are "full", "agentOnly", and "none".

correlationId   ID of the co-browsing session

url   Base URL of the Remote Expert Mobile Applications Server (REAS), including only scheme, hostname, and port number.

sdkPath   URL of the base directory of the consumer SDK, if not deducible from src attribute of HTML script tag which loads the "assist.js" file.

popupCssUrl   Set URL of CSS stylesheet containing styles for the Expert Assist popup window in the web page

sessionToken   Web gateway session token (if required)

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080

Demo and Code Walk ThroughCode Available On Dev Net: https://communities.cisco.com/docs/DOC-58760

9

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 10

CSDK Phonecall = UC.phone.createCall(numberToDial);

call.onRemoteMediaStream = function (remoteMediaStream) { var remoteVideo = document.getElementById(‘remoteVideoElement'); $(remoteVideo).attr('src', window.URL.createObjectURL(remoteMediaStream));};

call.onLocalMediaStream = function (localMediaStream) { var localVideo = document.getElementById(‘localVideoElement'); $(localVideo).attr('src', window.URL.createObjectURL(localMediaStream));};

call.onEnded = function () {//end functions

};

call.onCallFailed = function () { alert("Call Failed"); };

call.onDialFailed = function () { alert("Dial Failed"); };

call.dial();

Full JSDOC located on the REAS server here: /opt/cisco/<version>/CSDK/Core_SDK/JavaScript_SDK/jsdoc

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 11

AED aedTopic = uc.aed.createTopic(topicId);

//overwrite topic methods aedTopic.onConnectSuccess = function () { alert(“Connected!”);};

aedTopic.onMessageReceived = function (message) { alert("Message!");};

aedTopic.connect();

Full JSDOC located on the REAS server here: /opt/cisco/<version>/CSDK/Core_SDK/JavaScript_SDK/jsdoc

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 12

Expert Assist Co-Browse Only

assistSDK.startSupport({

"correlationId": sipUser,

"cobrowseOnly": "true",

});

© 2015 Cisco and/or its affiliates. All rights reserved. Cisco PublicBRKCCT-2080 13

Remote Expert Application Server (REAS)

• Not Covered• IM & presence – Extends IM and presence capability

from a CUPS server to mobile and web. Requires CUPS.

• Palettes – Uses various adaptors to exchange context with external systems such as UCCE/UCCX.

Application Server

AED

Finesse Gadget

Web Console

Web Gateway

IM&P Proxy

Phone

Expert Assist

Palettes