DEVNET-2010 Remote Expert Mobile Web/Android/iOS SDK Live Coding Tutorial and Demonstration
Download as PPTX, PDF1 like1,308 views
The document provides an overview of the Remote Expert Mobile solution, detailing its architecture, components, and features, including the ability to integrate voice and video calling into legacy SIP networks. Key functionalities include co-browsing, data channels for application events, and support for various browsers and mobile platforms. The document also highlights the Expert Assist SDK used for creating customizable interactions and offers implementation guidance through sample code.
DEVNET-2010 Remote Expert Mobile Web/Android/iOS SDK Live Coding Tutorial and Demonstration
- 1. • 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
- 2. Internet Enterprise UC Infrastructu re 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
- 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
- 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
- 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.
- 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)
- 9. Demo and Code Walk Through Code Available On Dev Net: https://communities.cisco.com/docs/DOC-58760
- 10. CSDK Phone call = 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
- 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
- 12. Expert Assist Co-Browse Only assistSDK.startSupport({ "correlationId": sipUser, "cobrowseOnly": "true", });
- 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