2017 Cisco and/or its affiliates. All rights reserved. Cisco Public

Size: px

Start display at page:

Mabel Bridges
6 years ago
Views:

Embed Spark SDK in Your App Olivier Proffit, Product Manager Jonathan Field, Business

Agenda 1. Why a SDK for video? Benefits Use cases Demo on specific verticals 2. What is in the Spark SDK? Capabilities Roadmap WebRTC state-of-the-art 3.

6 Agenda 1. Why a SDK for video? Benefits Use cases Demo on specific verticals 2. What is in the Spark SDK? Capabilities Roadmap WebRTC state-of-the-art 3. What is the Spark widget? 4. Consume the Spark Platform Scalability Ordering 5. Demo - Embed video in a sec Cisco and/or its affiliates. All rights reserved. Cisco Public

8 Software Development Kit (SDK or devkit ) a set of tools that allows the creation of applications to enrich or simple implementation of application programming interfaces (APIs) Source Wikipedia 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 8

Cisco Spark Platform for Developers Make it easy for users to integrate

unify workstreams in a click Power-users create their own apps in minutes

9 Cisco Spark Platform for Developers Make it easy for users to integrate Cisco Spark with the apps they love and give developers tools to transform collaboration experiences. Native Integrations App Integration Services Platform APIs / SDKs Teams unify workstreams in a click Power-users create their own apps in minutes Developers accelerate the value of Spark in their environments 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 9

Cisco Spark Supports Beautiful Video Today 2017 Cisco

11 But What If Your Cisco Spark Users Spend Most of Their Day in Some Other Business App? Patient Information Date: Name: Coud Inc. Weight: Appointments Meeting (Doctor) Full status (Doctor) Assistant Billing Reports Medical History 2 month checkup 1 month checkup Respiration problem 10 days checkup Notes 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 11

13 SDK Benefits for the Developer Frictionless Embed video in your app requires only few minutes Includes powerful libraries (Fast Lane, audio AC/GC, STUN, multistreaming, ) Render inside your mobile app No need for plugin for browser - Efficiency Embedding collaboration increases the likelihood that the user will stay in your app 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 13

SDK for Non-subscribers SparkBnB SparkBnB

Infrastructure Cloud / PaaS 2017 Cisco and/or

17 Healthcare Virtual care use cases Patient locations Home Branch Hospital Main Hospital Spark Platform Remote locations Branch Hospital Main Hospital Patient s Family 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 17

LMS - Learning Management System 2017 Cisco and/or

20 Manufacturing Oil & Gas Bring the expertise on site Keep people secured Integrate with smart glasses, ruggedized tablets, drones Design Faster time to market Design and production together Integrated with 3D design and global supply chain Field services Travel expenses -20% Ticket turnaround times - 40% Time to fix compared to an on site travel - 90% 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 21

Banking Remote Consultation Demo 2017 Cisco and/or

Embed the Spark SDK How to start 1. Register you app on developer.ciscospark.com/apps.html 2.

28 Open source SDK Easy to start and stop Rapid prototype before procurement Secured 3 rd party can check Any can contribute under MIT license Royalty free Cisco pays for open H264 We open source the SDK AND the sample app 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 29

29 Spark SDK Specifications ios SDK Swift 3.0 and Xcode 8 ios 9 and ios 10 iphone & ipad JS SDK Javascript / WebRTC Firefox - current release Chrome - current release 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 30

30 Spark SDK - Features Calling Call & Media Controls Other Functions Specs Calling Call Events Call Control Audio Control Video Control Persistent registration Feedback ios SDK - swift ios 9 and 10 JS SDK - WebRTC Chrome - current Firefox - current CODECS H264 Opus 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 31

31 Cisco Spark SDK Calling Capabilities Spark SDK can dial Spark SDKs Spark clients Spark phones Spark rooms SIP URI Cisco or any 3 rd party PSTN number through Spark hybrid services with CUCM or HCS PSTN number through Spark Call (US only) PSTN number through Tropo (SIP call) 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 32

32 Cisco Spark SDK Calling Capabilities Spark Hybrid services Your App & Spark SDK Pocket Cisco Spark Service Message Meeting Call Call Service Connect Directory Service Cisco Collaboration Cloud Internet Cisco Hybrid Boardroom Cisco Collaboration Edge Architecture Unified Communications Customer Care Conferencing Cisco On-Premises and Partner-Hosted HCS PSTN End to End Security 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 33

33 Cisco Spark SDK Calling Capabilities High level architectures examples Consumer to Consumer Enterprise collaboration with Hybrid your App + Spark SDK CISCO CLOUD your App & Spark SDK your App + Spark SDK CISCO CLOUD Customer engagement your App + Spark SDK Business agents CISCO CLOUD SPARK CALL - US OR TROPO PSTN Spark SDK SIP PSTN Internal participants OPTIONAL EXISTING ON PREMISE CUCM PSTN SIP External participants Customers 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 34

Incoming Call Notification JS SDK uses WebSocket Supported by all

browser window Push notifications differ and are supported by few

membership webhook Webhook registered to developer s server which

34 Incoming Call Notification JS SDK uses WebSocket Supported by all browsers Notifications sent to website opened in a running browser window Push notifications differ and are supported by few browsers ios SDK uses APNS Incoming calls trigger a Spark membership webhook Webhook registered to developer s server which calls APNS 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 35

35 Roadmap DATES & FEATURES SUBJECT TO CHANGE WITHOUT NOTICE ios and WebRTC SDK Beta Audio / Video 2-party Limited screen sharing (receive on ios) ios and WebRTC SDK General availability for Spark subscribers Audio / Video 2-party Limited screen sharing (receive on ios) ios and WebRTC SDK Multiparty Advanced screen sharing Android SDK Beta CY17 Q1 CY17 Q2 CY17 Later 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 36

36 Spark SDK positioning Jabber SDK Vs Jabber Guest Perpetual & REM Go-To-Market pay upfront Jabber Guest SDK Perpetual pay upfront Remote Expert Mobile SDK Perpetual pay upfront Spark SDK Subscription Mobile OS No mobile ios, Android ios, Android ios, Android CY17 WebRTC No WebRTC No WebRTC Firefox, Chrome IE*, Safari* Firefox, Chrome Cloud Offer OnPrem & HCS OnPrem OnPrem Cloud & Hybrid B2C Call Scenarios No Inbound only Yes Yes Secure Messaging Yes No CafeX add-on Presence (Workflow) Yes No CafeX add-on H1 CY17 Messaging widget CY17 Presence API Content Sharing No 1 way Co-browse CY17 Multiparty CUCM CUCM Non-Cisco or CUCM CY17 Cloud * With plugin 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 37

37 WebRTC: from Browser Plugins to Thin Client Communications Extract from CLiveUS Keith Griffin Ph.D, Principal Engineer Office of CTO Collaboration Technology Group 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public

The End of the plugins Different Browsers, Different Plugins NPAPI Netscape Plugin API A cross platform browser plugin architecture in: Chrome Firefox Safari ActiveX A browser plugin architecture

38 The End of the plugins Different Browsers, Different Plugins NPAPI Netscape Plugin API A cross platform browser plugin architecture in: Chrome Firefox Safari ActiveX A browser plugin architecture created by Microsoft based on its COM (Common Object Model) and OLE (Object Linking and Embedding) technologies Internet Explorer Browser plugin technologies stem from developments in the mid-nineties Today s browsers are speedier, safer, and more capable than their ancestors. Meanwhile, NPAPI s 90s-era architecture has become a leading cause of hangs, crashes, security incidents, and code complexity. Because of this, Chrome will be phasing out NPAPI support over the coming year Cisco and/or its affiliates. All rights reserved. Cisco Public 39

Jitter Buffer Image Enhancements Transport Encryption / Security Packetization Multiplexing Connectivity ICE,

39 Native browser Architecture with Collaboration Apps WebRTC JavaScript API WebRTC WebRTC Native API (C++) Session Management (SDP) Voice Engine Voice Codecs Noise Reduction Echo Cancellation Video Engine Video Codec Jitter Buffer Image Enhancements Transport Encryption / Security Packetization Multiplexing Connectivity ICE, STUN, TURN Adapted from WebRTC architecture diagram 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 40

40 WebRTC: Browser Readiness for Collaboration IE/Win (10+ only) Win 10 / Edge Safari/Mac (7+ only) FireFox (WebRTC) Chrome (WebRTC) Chromebook (WebRTC) VoIP No WebRTC Plugin Only WebRTC ORTC No WebRTC Plugin Only Opus - G711 WebRTC Opus - G711 WebRTC Opus - G711 WebRTC Video No WebRTC Plugin Only WebRTC ORTC No WebRTC Plugin Only H.264** / VP8 VP8 / H.264** H.264** / VP8 Share No WebRTC Plugin Only TBD No WebRTC Plugin Only WebRTC (TBD*) WebRTC (TBD*) WebRTC (TBD*) Telephony Callback Callback Callback Callback Callback Callback * WebRTC Share standard extension definition underway ** OpenH.264 currently in Firefox Considers interoperability 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 41

43 Browser Market Share Usage share of PC browsers for December 2016 Source Chrome Internet Explorer Firefox Safari Edge Other NetMarket Share 56.43% 20.84% 12.22% 3.47% 5.33% 1.70% W3Counter 56.6% 7.7% 11.1% 14.5% 2% 8.1% StatCounter 62.66% 9.86% 14.95% 5.1% 3.37% 4.06% Cisco and/or its affiliates. All rights reserved. Cisco Public 44

44 WebRTC in the Collaboration Portfolio Spark Web Client Spark Web SDK WebEx Web App via WebRTC VoIP/Opus Attendee mode initially, Host mode to follow WebEx on Chromebook Variation of WebEx Web App WebRTC attendee video support via hardware enabled H.264 Remote Expert Mobile CMS client Enablers: H264 based WebRTC support in browsers Firefox currently supports H.264 Chrome currently adding H.264 Microsoft Edge planning to support WebRTC/ORTC/H.264 (details TBD) Industry components such as browsers directly impact product direction Enablers must be fully capable before product can adopt 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 45

47 Easily embed Spark messaging, video and calling into your workflow Spark Widgets Leverage Spark UI/UX Spark SDKs Build your own UI 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 48

48 SDK and Widget SDK WIDGET UI elements No UI Spark UI and UX Platform Web + ios Web Capability Audio-Video 1:1 Messaging 1:1 Audio-video 1:1 Go-to-market Spark subscribers and non subscribers Spark subscribers General Availability Spring 2017 Spring Cisco and/or its affiliates. All rights reserved. Cisco Public 49

49 Spark widgets - Capabilities Developer Experience Easy integration Open source widget libraries Available in JavaScript Responsive UI New Spark feature/ui changes automatically gets pushed through a public CDN User Experience 1:1 messaging Inline Markdown Sharing of files and documents Download of documents Flagging messages for follow up 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 50

50 Spark messaging Widget Patient Information Date: Name: Coud Inc. Weight: Appointments Meeting (Doctor) Full status (Doctor) Assistant Billing Reports Medical History 2 month checkup 1 month checkup Respiration problem 10 days checkup Notes 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 51

51 Spark Meet Widget Patient Information Date: Name: Coud Inc. Weight: Appointments Meeting (Doctor) Full status (Doctor) Assistant Billing Reports Medical History 2 month checkup 1 month checkup Respiration problem 10 days checkup Notes 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 52

Reports Medical History 2 month checkup 1 month checkup Respiration problem 10

52 Spark Widget Spaces messaging Patient Information Date: Name: Coud Inc. Weight: Appointments Meeting (Doctor) Full status (Doctor) Assistant Billing Reports Medical History 2 month checkup 1 month checkup Respiration problem 10 days checkup Notes 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 53

53 What s Coming? In beta: 1:1 Spark Message Widget 1:1 Video Call Widget Roadmap: Spaces Message Widget Recent Messages and Calls List Widget Phone Control Widget Theme change 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 54

54 Spark Message and Meet Widget Resources Open source code Guide Demo Quick Start Sample Code And more to come <!DOCTYPE html> <html> <head> <title>message Meet Widget Demo</title> <meta charset="utf8"> <link rel="stylesheet" href=" </head> <body> <main data-access-token= YOUR ACCESS TOKEN" data-to-person- = THE OTHER PERSON ID" data-toggle="spark-message-meet"/> <script src=" </body> </html> 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 55

Cisco Spark Hybrid Media Service A little bit of Cisco cloud on customers network Available Now FULL Off-net users Cisco Cloud Hybrid Media Node On-net users Hybrid Media New Conferences go

57 Cisco Spark Hybrid Media Service A little bit of Cisco cloud on customers network Available Now FULL Off-net users Cisco Cloud Hybrid Media Node On-net users Hybrid Media New Conferences go to the Cloud when there aren t enough resources on premise On-Net users connect to the cloud when Hybrid Media Node full 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 59

58 Takeaways for Developers and IT Teams Less Friction for Developers Developer platform for IP messaging, SMS, Text-to-speech, and now audio-video Scale for IT and Users Open standards: webrtc and openh264 Global cloud infrastructure Proven media engine 3+ Billion meeting minutes per month Large capacity multiparty (later) Strongest encryption Developer Portal Interactive Docs 24/7 Dev Support SDKs that speak your language! 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 60

59 Spark SDKs and Widgets Ordering All Spark subscribers can use Spark SDKs and widgets! No add-on! Enjoy business messaging with M1 and + Single Sign-On, Exchange directory integration, Admin portal, Spaces moderation, M1 available online 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 61

Cumulus Contact center 2017 Cisco and/or its

Demo Embed the SDK in Your App 2017 Cisco and/or

64 Starting a Call The Easy Way // Who are you? let sparkmedia = SparkMediaView(apiKey: YWVR53D34", delegate: self) // Who do you want to call? Is it Voice or Video? sparkmedia.videocall(recipient: "jonfiel@cisco.com") // Where should I display the call view? self.present(sparkmedia, animated: true, completion: nil) 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 66

Video SDK Local Media View @IBOutlet weak var localmediaview: MediaRenderView!

65 Video SDK Local Media weak var localmediaview: MediaRenderView! Remote Media weak var remotemediaview: MediaRenderView! Mute, Hangup and Switch Camera UI 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 67

66 Starting a Call The Almost as Easy Way /** Start a Call using the Spark Media SDK - parameter recipient: The Spark URI or SIP URI of the remote participant to be dialled - parameter mediaaccesstype: The type of Media that will be sent to the remote party (Audio or Video) */ func startsparkcall(recipient: String, mediaaccesstype: Phone.MediaAccessType) { self.showactivityindicator(initialtext: "Connecting Call") self.authenticatewithspark(apikey: self.apikey) self.registerdevicewithspark(mediaaccesstype: mediaaccesstype, successfulregistration: { self.registerforsparkcallstatenotifications() self.startsparkcallto(recipient: recipient, mediaaccesstype: mediaaccesstype) }) { (error) in SwiftMessages.show(view: CiscoSparkVideoMessagesHelper.unableToRegisterWithSparkView()) } } (success) in 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 68

67 Muting a func mutepressed(_ sender: UIButton) { self.currentcall.togglesendingaudio() } if self.currentcall.sendingaudio { self.mutebutton.setimage(uiimage(named: "mute"), for: UIControlState()) } else{ } self.mutebutton.setimage(uiimage(named: "muteactive"), for: UIControlState()) 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 69

68 JS / WebRTC Video SDK - Layout <style> </style> div#videocontainer{ position: relative; height: 360px; width: 640px; background-color: rgba(10, 75, 62, 0.05); } div#overlay { position: absolute; border: 3px; top: 0px; right: 0; z-index: 1; } div#buttons { position: absolute; z-index: 2; } 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 70

69 JS / WebRTC Video SDK Starting a Call ciscospark = ciscospark.init({credentials:{access_token: api_key"}}) $('#callbutton').click(function(){ var uritext = $('#uri').val() var call = ciscospark.phone.dial(uritext); call.on('remotemediastream:change', function() { console.log("call connected") document.queryselector('#incoming-video').src = call.remotemediastreamurl; var rvideo = document.queryselector("#incoming-video"); }); 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 71

Cisco Spark Ask questions, get answers, continue the experience Use Cisco Spark to

Spark app from itunes or Google Play 1. Go to the Cisco Live Berlin 2017 Mobile app 2.

Click the Spark button under Speakers in the session description 4.

72 Cisco Spark Ask questions, get answers, continue the experience Use Cisco Spark to communicate with the speaker and fellow participants after the session Download the Cisco Spark app from itunes or Google Play 1. Go to the Cisco Live Berlin 2017 Mobile app 2. Find this session : - Embed Spark SDK in your app 3. Click the Spark button under Speakers in the session description 4. Enter the room, room name = 5. Join the conversation The Spark Room will be open for 2 weeks after Cisco Live 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 74

Continue Your Education World of Solutions - Hall4.2 - Collaboration Partner Village: Focuscura, BullPro, VBrick, The Hub - Hall2.2 - DevNet Zone: DEVNET-2082 Paul O Dwyer - Bot - Thurs. 4.

73 Continue Your Education World of Solutions - Hall4.2 - Collaboration Partner Village: Focuscura, BullPro, VBrick, The Hub - Hall2.2 - DevNet Zone: DEVNET-2082 Paul O Dwyer - Bot - Thurs. 4.00PM Past sessions, check recordings CiscoLive.com/Online INTGEN Jonathan Rosenberg & Jason Goecke - smarter meetings BRKCOL-1014 Adam Kalsey - Spark APIs & SDK DEVNET David Staudt - SDK coding Join the session s spark room 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 75

Complete Your Online Session Evaluation Please complete your Online Session Evaluations after each session Complete 4 Session Evaluations and the Overall Conference Evaluation (available from

74 Complete Your Online Session Evaluation Please complete your Online Session Evaluations after each session Complete 4 Session Evaluations and the Overall Conference Evaluation (available from Thursday) to receive your Cisco Live T-shirt All surveys can be completed via the Cisco Live Mobile App or the Communication Stations 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 76

Embed Video in Your App It s Simple and Powerful 2017 Cisco

Register to get the beta version of the SDK: https://developer.ciscospark.

76 Your Time to Embed Video in your App is Now! Feel how Easy & Powerful Next Steps: 1. Stop at our booth 2. Register to get the beta version of the SDK: 3. Add video to your own app! 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 78

Spark SDK Video - Overview and Coding Demo

DEVNET-2026 Spark SDK Video - Overview and Coding Demo Olivier Proffit - Sr. Product Manager David Staudt DevNet Developer Evangelist Cisco Spark How Questions? Use Cisco Spark to communicate with the