Embed Spark calling SDK in Your App - Olivier PROFFIT - Cisco Live Berlin 2017

© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
Embed Spark SDK in Your App
Olivier Proffit, Product Manager
Jonathan Field, Business Development Manager
BRKCOL-2022

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.
Agenda

Why a SDK for Video?
Benefits and Use Cases

Source Wikipedia
“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)”
BRKCOL-2022 4

© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 5BRKCOL-2022
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.
Teams unify
workstreams
in a click
Native
Integrations
Power-users
create their own apps
in minutes
App Integration
Services
Developers accelerate
the value of Spark in
their environments
Platform
APIs / SDKs

Cisco Spark Supports Beautiful Video Today
BRKCOL-2022 6

But What If Your Cisco Spark Users Spend Most of
Their Day in Some Other Business App?
BRKCOL-2022 7
Coud
Inc.
Date:
Name:
Weight:
Meeting (Doctor)
Full status (Doctor)
Assistant
Billing
Reports
Appointments
2 month checkup
1 month checkup
Respiration problem
10 days checkup
Medical History
Patient Information
Notes

SDK Simplifies the User Experience
Business App + Video App Business App with Video SDK
embedded

SDK Benefits for the Developer
Frictionless
• Embed video in your app requires only few minutes
• Includes powerful libraries (Fast Lane, audio AC/GC, STUN, multi-
streaming, …)
• 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
BRKCOL-2022 9
-

SDK for Spark Subscribers
alice@acme.com jane@acme.com
Cloud / PaaS
Microservices Media Infrastructure
APIs
BRKCOL-2022 10
alice@acme.com
Cloud
Inc.

SDK for Non-subscriber calling Subscriber
Cloud / PaaS
APIs
Anonymous Tom@company.com
BRKCOL-2022 11

alic557 SonitaInParis
Cloud / PaaS
APIs
SDK for Non-subscribers
BRKCOL-2022 12
SparkBnB SparkBnB

Healthcare
Virtual care use cases
Main HospitalHome
Patient’s FamilyMain Hospital
Branch Hospital
Branch Hospital
Spark Platform
Patient
locations
Remote
locations

Healthcare

LMS - Learning Management System

Manufacturing
Oil & Gas Field servicesDesign
• Bring the expertise on site
• Keep people secured
• Integrate with smart
glasses, ruggedized
tablets, drones
• Travel expenses -20%
• Ticket turnaround times -
40%
• Time to fix compared to
an on site travel - 90%
• Faster time to market
• Design and production
together
• Integrated with 3D design
and global supply chain

Banking Remote Consultation
Demo

Retail
BRKCOL-2022 19
Demo

Q & A

What Is in the Spark SDK?

Spark SDK for iOS
… is a set of tools
Quick Start Guide
https://developer.ciscospark.com/iosquickstart.html
Sample App
https://github.com/ciscospark/spark-ios-sdk-example
Open source code
https://github.com/ciscospark/spark-ios-sdk
API reference
https://ciscospark.github.io/spark-ios-sdk/
And more to come …
BRKCOL-2022 22

Spark SDK for JavaScript
Resources
Quick Start Guide
https://ciscospark.github.io/spark-js-
sdk/example/getting-started/
Sample App
https://ciscospark.github.io/spark-js-sdk/app/
Open source code
https://github.com/ciscospark/spark-js-sdk
API reference
https://ciscospark.github.io/spark-js-sdk/api/
BRKCOL-2022 23

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

Open source SDK
• Easy to start and stop
• Rapid prototype before procurement
• Secured – 3rd 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
BRKCOL-2022 25

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
BRKCOL-2022 26

Spark SDK - Features
Calling
• Calling
• Call Events
Specs
iOS SDK - swift
• iOS 9 and 10
JS SDK - WebRTC
• Chrome - current
• Firefox - current
CODECS
• H264
• Opus
Call &
Media Controls
• Call Control
• Audio Control
• Video Control
Other
Functions
• Persistent
registration
• Feedback

Cisco Spark SDK – Calling Capabilities
• Spark SDKs
• Spark clients
• Spark phones
• Spark rooms
• SIP URI – Cisco or any 3rd party
• PSTN number through Spark hybrid services with CUCM or HCS
• PSTN number through Spark Call (US only)
• PSTN number through Tropo (SIP call)
Spark SDK can dial

Spark Hybrid services
Boardroom
Pocket
Cisco Hybrid
Cisco®
Collaboration
Cloud
Cisco Spark Service
Message | Meeting | Call
Unified
Communications
Customer
Care
Conferencing
Cisco Collaboration Edge Architecture Cisco
On-Premises and
Partner-Hosted
HCS
End to End Security
PSTN
Internet
• Call Service Connect
• Directory ServiceYour
App &
Spark
SDK

High level architectures examples
CISCO CLOUD
OPTIONAL EXISTING
ON PREMISE CUCM
Enterprise collaboration with Hybrid
PSTN
Customer engagement
your
App +
Spark
SDK
Consumer to Consumer
your
App &
Spark
SDK
CISCO CLOUD
CISCO CLOUD
SPARK CALL - US
OR
TROPO PSTN
PSTN
SIP
Internal participants External participants
Business agents
Customers
your
App +
Spark
SDK
your
App +
Spark
SDK
SIP
Spark
SDK
BRKCOL-2022 30

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

Roadmap
DATES & FEATURES
SUBJECT TO CHANGE
WITHOUT NOTICE
CY17 Q1 CY17 Q2 CY17 Later
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

Spark SDK positioning
• Vs Jabber Guest & REM
Jabber
SDK
Jabber Guest
SDK
Remote Expert Mobile
SDK
Spark
SDK
Go-To-Market
Perpetual
pay upfront
Perpetual
pay upfront
Perpetual
pay upfront
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 Inbound only Yes
Secure Messaging Yes No CafeX add-on
H1 CY17
Messaging widget
Presence (Workflow) Yes No CafeX add-on
CY17
Presence API
Content Sharing No 1 way Co-browse CY17
Multiparty CUCM CUCM
Non-Cisco
or CUCM
CY17
Cloud
* With plugin

WebRTC: from Browser Plugins
to Thin Client Communications
Keith Griffin Ph.D, Principal Engineer
Office of CTO – Collaboration Technology Group
Extract from CLiveUS BRKCOL-2022

• 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
35BRKCOL-2022
The End of the plugins
Different Browsers, Different Plugins
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.”
http://blog.chromium.org/2013/09/saying-
goodbye-to-our-old-friend-npapi.html

Native browser Architecture with
WebRTC JavaScript API
WebRTC Native API (C++)
Session Management (SDP)
Voice Codecs
Noise
Reduction
Echo
Cancellation
Voice Engine
Video Codec
Jitter Buffer
Image
Enhancements
Video Engine
Encryption /
Security
Multiplexing
Connectivity
ICE, STUN, TURN
Transport
Adapted from WebRTC architecture diagram
Collaboration Apps
WebRTC
Packetization

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
37BRKCOL-2022
WebRTC: Browser Readiness for Collaboration
* WebRTC Share standard extension definition underway
** OpenH.264 currently in Firefox
Considers interoperability

http://iswebrtcreadyyet.com/
BRKCOL-2022 38

Browser Market Share
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
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%

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
Industry components such as
browsers directly impact product
direction
Enablers must be fully capable before
product can adopt
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)

Spark SDK for JavaScript
WebRTC DEMO
Sample App
https://ciscospark.github.io/spark-js-sdk/app/

What Is in the Spark Widget?

Easily embed Spark
messaging, video
and calling into
your workflow
• Spark Widgets –
Leverage Spark UI/UX
• Spark SDKs –
Build your own UI

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 2017
BRKCOL-2022 45

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
BRKCOL-2022 46

Coud
Inc.
47BRKCOL-2022
Spark messaging Widget
Date:
Name:
Weight:
Meeting (Doctor)
Assistant
Billing
Reports
Appointments
2 month checkup
1 month checkup
Respiration problem
10 days checkup
Medical History
Patient Information
Notes

Spark Meet Widget
Coud
Inc.
Date:
Name:
Weight:
Meeting (Doctor)
Assistant
Billing
Reports
Appointments
2 month checkup
1 month checkup
Respiration problem
10 days checkup
Medical History
Patient Information
Notes

Coud
Inc.
49BRKCOL-2022
Spark Widget
Spaces messaging
Date:
Name:
Weight:
Meeting (Doctor)
Assistant
Billing
Reports
Appointments
2 month checkup
1 month checkup
Respiration problem
10 days checkup
Medical History
Patient Information
Notes

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
50BRKCOL-2022

Spark Message and Meet Widget
Open source code
https://github.com/ciscospark/spark-js-sdk/tree/master/packages/widget-message-meet
Guide
https://github.com/ciscospark/spark-js-sdk/blob/master/packages/widget-message-meet/README.md
Demo
https://code.s4d.io/widget-message-meet/latest/demo/index.html
http://sparkdemo.cisco.com/pharmacy/logon.html
Quick Start
Sample Code
Resources
<!DOCTYPE html>
<html>
<head>
<title>Message Meet Widget Demo</title>
<meta charset="utf8">
<link rel="stylesheet" href="https://code.s4d.io/widget-message-meet/production/main.css">
</head>
<body>
<main data-access-token=“YOUR ACCESS TOKEN" data-to-person-email=“THE OTHER PERSON EMAIL ID"
data-toggle="spark-message-meet"/>
<script src="https://code.s4d.io/widget-message-meet/production/bundle.js"></script>
</body>
</html>

Benefit from the Spark Platform

Global Backbone

Cisco Spark Hybrid Media Service
A little bit of Cisco cloud on customers’ network
Hybrid Media
FULL
Cisco Cloud
On-Net users connect to
the cloud when Hybrid
Media Node full
On-net usersOff-net users
Available
Now
New Conferences go to the Cloud when there aren’t enough resources on premise
Hybrid
Media Node

Takeaways for Developers and IT Teams
Developer platform for
• IP messaging,
• SMS,
• Text-to-speech,
• … and now audio-video
• Open standards:
webRTC and openH264
• Global cloud infrastructure
• Proven media engine
• 3+ Billion meeting minutes per month
• Large capacity multiparty (later)
• Strongest encryption
Less Friction for Developers Scale for IT and Users
Developer
Portal
Interactive
Docs
24/7 Dev
Support
SDKs that speak
your language!

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, …
56BRKCOL-2022
M1 available online

Demo – Sample App

Kitchen Sink
For developers

Cumulus
Contact center
BRKCOL-2022 59

Demo – Embed the SDK in Your App

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)

Video SDK
Remote Media View
Local Media View
Mute, Hangup and
Switch Camera UI
@IBOutlet weak var
remoteMediaView: MediaRenderView!
@IBOutlet weak var
localMediaView:
MediaRenderView!

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: {
(success) in
self.registerForSparkCallStateNotifications()
self.startSparkCallTo(recipient: recipient, mediaAccessType: mediaAccessType)
}) { (error) in
SwiftMessages.show(view: CiscoSparkVideoMessagesHelper.unableToRegisterWithSparkView())
}
}

Muting a Call
@IBAction 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())
}
}

JS / WebRTC Video SDK - Layout
<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;
}
</style>

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");
});
BRKCOL-2022 66

Wrap Up

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 : BRKCOL-2022 - Embed Spark SDK in your app
3. Click the Spark button under Speakers in the session description
4. Enter the room, room name = BRKCOL-2022
5. Join the conversation
The Spark Room will be open for 2 weeks after Cisco Live
69BRKCOL-2022

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-2003 - Jonathan Rosenberg & Jason Goecke
- smarter meetings
• BRKCOL-1014 Adam Kalsey - Spark APIs & SDK
• DEVNET-2026 - David Staudt - SDK coding
• Join the session’s spark room
70BRKCOL-2022 © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public

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

Embed Video in Your App
It’s Simple and Powerful

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:
https://developer.ciscospark.com/sdkaccess/
3. Add video to your own app!
73BRKCOL-2022 © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public

Embed Spark calling SDK in Your App - Olivier PROFFIT - Cisco Live Berlin 2017

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Embed Spark calling SDK in Your App - Olivier PROFFIT - Cisco Live Berlin 2017

Ähnlich wie Embed Spark calling SDK in Your App - Olivier PROFFIT - Cisco Live Berlin 2017 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Embed Spark calling SDK in Your App - Olivier PROFFIT - Cisco Live Berlin 2017