This document provides an overview of how to embed messaging and video capabilities into apps using Cisco Spark APIs and SDKs. It discusses the Cisco Spark platform and how developers can build bots, use the REST API and OAuth for authentication, and leverage SDKs for browsers, iOS, and Android. It also covers how guests can access Cisco Spark capabilities without being a registered user through guest mode and JWT tokens. Code samples and demos are provided to illustrate integrating messaging, video calling, and other real-time collaboration features into third party applications and business processes.
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017
1. How to embed
Messaging andVideo
in your apps
API Evangelist @CiscoDevNet
@SteveSfartz
Stève Sfartz
DEMOS
AND CODE
INTENSE
3. /Cisco/DevNet/SteveSfartz
API Evangelist @CiscoDevNet
Cisco Spark &Tropo APIs
NodeJS mainly, a bit of #golang
France and all around Europe
hosted @PIRL – Paris Innovation
Center & Research Lab
twitter://@SteveSfartz
github://ObjectIsAdvantag
“vision without
execution is
hallucination”
-- Thomas Edison
stsfartz@cisco.com
@SteveSfartz
4. so what’s on the menu
• Tour the potential ofVideo Calls
• Messaging from code
• Calling from code
• Demos & tech details
6. ENGAGEMENT
TIME
Optimizing the Space between the Spaces
REALTIME
Occasional
Messaging
Scheduled
Meetings
Ad Hoc
Meetings
Furious
Chat
How do I escalate from chat
to a live meeting without killing our
momentum?
We’re on a roll in this meeting, if only I
had a little more time to finish my thoughts.
I need a few more
answers before I can
assign the action items
Where did that list of
important reference
articles end up?
9. Secure, scalable, continuous collaboration
Cisco Spark Platform
Apps and
Endpoints
On Premise Services Cloud Based Services
Single Experience Across Devices & Applications
Apps and
Endpoints
12. ?! Now what if your app could get
these Messages,Audio/Video
super powers ?!
13. Cisco Spark ‘Free’ plan
Web, Desktop, Mobile clients
Illimited messaging & spaces
Up to 3 participants in a Call
Developer access to Cisco Spark APIs
https://developer.ciscospark.com
14. Cisco Spark REST API
14
GET
POST
DELETE
PUT
/Rooms
/Memberships
/Messages
/Webhooks
/People
/Teams
developer.ciscospark.com/
18. Cisco Spark
Cloud Service
1. interacts in spaces
via a CiscoSpark client
Cisco Spark User
Your Bot code running
On-premise or on a PublicCoud
2. posts notifications to
registeredWebHooks
Publicly accessibleAPIs
3. posts messages
as notifications fly in
Bot Architecture: Webhooks
Register events your
bot is interested to
listened to
Messages / created
Memberships / created
As events happen in
spaces, receive
notifications
23. Step 3 – App Requests AccessToken
duittenb
With the received Auth Code, app.html does a HTTPS POST to spark
with the client ID & secret to request the AccessToken.
HTTPS POST send :
https://api.ciscospark.com/v1/access_token
grant_type = authorization_code
redirect_uri = http://myserver.com/app.html
code = auth code…
client_id = oif8we28382u398u2938u
client_secret = hf33we28382uf8we2838Zx
http://myserver.com
24. Step 4 – Spark Response
HTTP POST response
{
"access_token" :"ZDI3MGEyYzQtNmFlN0NDNhLWFlN",
"expires_in” :1209600, //seconds
"refresh_token":"MDEyMzQ1Njc4OTAxMjM0NTY3ODkw",
"refresh_token_expires_in":7776000 //seconds
}
duittenb
Spark returns the AccessToken to the Application
Some applications may store this access token in a secure way so
it can be re-used when a user logs into the Application
http://myserver.com
25. Cisco Spark for Developers
developer
bot
oauth
jwt
token REST API
SDKs
Browsers,
iOS, Android
all Spark
features
26. Spark SDKs
Calling
• Calling
• Call Events
Specs
iOS SDK - swift
• iOS 9 and 10
Browsers SDK - WebRTC
• Chrome - current
• Firefox - current
CODECS
• H264
• Opus
Call &
Media Controls
• Call Control
• AudioControl
• VideoControl
Other
Functions
• Persistent
registration
• Feedback
• Push
notifications
43. API access token from the user JWT token
POST https://api.ciscospark.com/v1/jwt/login
Authorization: <jwt-user-token>
{
"token": "eyJhbGci.eyNlX3R5cGU.I4zgVxATOH9Y"
"expiresIn": 21599
}
45. Secure, scalable, extensible Conversations
• Desktop, Mobile, Web clients
• APIs & SDKs to extend the platform
• API tokens, Oauth, JWT
• Key Management Server for end to end security
• WebRTC,Voice over IP
• SIP addresses
47. Get empowered at
Learnings labs
Fog computing
Sandboxes
ready to use
Kubernetes cluster
for DevNet members
48. Other talks at CodeMotion
today 14:10: Embedding Cisco Spark and Location
applications (ESRI) into business processes
saturday 12:30: Microservices and containers
networking: Contiv, deep dive and demo
BEFORE YOU START : run the CiscoDevNet and roomId bots
Who has already heard of Spark ?
Who has already heard of Cisco ?
Cisco is 90% market share in networking WW
and major actor in collaboration software (> 50% WW)
Today, it will be about collaboration and building the next gen app.
We have opened our secrete sauce to application developers, and continue to open it.
I have 30 minutes to show you the use cases it opens to you,
and the dirty details
Demoes flow:
- experiences
-- Desktop
-- Mobile
-- Web
-- Device
=> our goal: bring it to your app
- message
- audio & video calls
- meetings
- Widget:
-- space-grid: he just went crazy with ChatOps
-- customizable => what if I only wanted to chat
-- and what if I wanted anybody to chat with my bot, invite non Spark users to the discussion
=> gest mode
Then we have a pretty powerful platform that can do messaging, audio/video call, extensible and scalable,
Web, Desktop and Mobile, and you can start for free:
- Spark Free account
- Spark Developer Portal
- Create your 'guest' developer organisation (coming)
What's next ? what's the vision for the future
Now what is I could invite an Professional assistant to the game
- RoomFinder
- Spark assistant
=> Spark is an extensible, scalable and secure Cloud platform
to build your new gen app or business
I am a technical evangelist at DevNet – Cisco Developer Program
It means Cisco pays me to create developer resources (labs & samples), explain and teach technology at conferences and enterprise workshops, and sometimes support hackathons.
I am based in France, and report to the best manager in the world named Mandy, sitting a the back of the room,
And I love Italy, my wife’s family living in Sardegna, I spend most of my vacations in Sardaigna / en Bosa Marina, perto de Alghero.
This intensity various from occasional messaging, where I just send a few messages here and there, to something I call furious chat, where everyone is sending messages at once. In fact, if they had just spoken those messages it would have been a meeting. And in fact the next level of intensity is an ad-hoc meeting, and perhaps the most intense is a scheduled, more formal meeting. The line for real-time is around here – at furious chat – when things are happening at that very moment together.
All of the pain points are on the transitions.
First pain point – escalating from furious chat into the meeting itself. Requires all of this coordination to figure out how to do that – whose bridge to use? Are you in a video room and how do we get you in?
Second pain point – sharing information during a meeting- the chat in the meeting isn’t the same chat. You can email it after the meeting…
Third paint point- how do I know when to switch meetings when I have all of these back to back meetings?
Forth pain point- work doesn’t stop when the meeting ends, if anything that’s when it starts and tracking actions requires connecting with people
Cisco Spark addresses all of these pain points and all of these points of “work”. We want Spark to be the platform that all people use to meet, collaborate, chat and call so that all interactions can be continuous and agile.
Conversations (messages, audio, video, all of them)
At work, on the way, home office, family & friends
It’s not one app, it’s all apps
It’s not one personal device, it’s all devices
It also comes from everywhere = connected world
Spark platform
=> Bring this power to the developer via a set of APIs and SDK we’ll demo
Conversations (messages, audio, video, all of them)
At work, on the way, home office, family & friends
It’s not one app, it’s all apps
It’s not one personal device, it’s all devices
It also comes from everywhere = connected world
Spark platform
=> Bring this power to the developer via a set of APIs and SDK we’ll demo
Cisco supports third-party endpoints across a wide range of operating systems.
We offer three client applications integrated to help mobile professionals work at optimal productivity, wherever they are and whatever device they use.
Cisco Jabber is our all-in-one UC application.
Cisco WebEx is the industry-leading web conferencing application.
Cisco Spark instantly creates a place for teams to work together, where their work can live, and provides a way to stay connected to it all.
These applications are tightly integrated with each other and can be accessed across a range of devices including laptops, tablets, mobile phones, and Cisco collaboration endpoints.
This range of endpoints from room systems to software running on mobile devices is tailored to support the various ways in which people work – all the way from your pocket to the boardroom. And they all work *together* to deliver a consistent, delightful, no-compromise collaboration experience.
<presenter note>: Depending on the opportunity, you may want to drill down on one client or another and field questions, perhaps pull additional slides from other EBC “Chapters.”
It is strongly recommended that you encourage the account team to create a Spark room for the participants in this EBC as a way to follow up/stay in touch/share the slides from the day. If AM creates this now, you can circle back and do a live demo later during the session.
Create a space « CodeMotion Cisco Spark API »: hey Anna, where is this happening already ?
Calling you: answer on Phone
Calling you: answer via Desk
We’ll leverage Spark APIs to implement this use case
Spark APIs are accessible at https://developer.ciscospark.com/
This is where you get your API token and run thru the interactive documentation
developer.ciscospark.com
Create a new space: « API demo »
Post a message => people use it to do ChatOps (later)
Drop a document
Interact with a bot: CiscoDevNet
Create a Bot Account
Run an existing bot on Glitch: pick https://github.com/CiscoDevNet/botkit-template
Create an Integration redirecting to Requestbin
Getting an Access Token
If the user granted permission to your app, Spark will redirect the user's web browser to the redirect_uri you specified when entering the grant flow. The request to the Redirect URL will contain a code parameter in the query string like so:
http://your-server.com/auth?code=YjAzYzgyNDYtZxx3YS00OWZkLTg2YTgtNDc3Zjg4YzFiZDlkNxxlN2FhMjMtYzUz
Your app will then need to exchange this Authorization Code for an Access Token that can be used to invoke the APIs. To do this your app will need to perform an HTTP POST to the following URL with a standard set of OAuth parameters. This endpoint will only accept an x-www-form-urlencoded body.
https://api.ciscospark.com/v1/access_token
The required parameters are:
grant_type This should be set to "authorization_code"
client_id Issued when creating your app
client_secret Remember this guy? You kept it safe somewhere when creating your app
code The Authorization Code from the previous step
redirect_uri Must match the one used in the previous step
NOTE: in THIS occasion the redirect_uri does NOT have to be encoded and can be send ‘as is’
duittenb@cisco.com
(DJ) Q: Is this access token stored on myserver.com/app or in a user cookie? Do you have to go through this procedure every day?
How do you check if a user has a valid access token? Stored where?
Spark will then respond with JSON containing an Access Token that's good for 14 days and a Refresh Token that expires in 90 days. The Refresh Token can be used to generate a new Access Token when the current one expires:
duittenb@cisco.com
CALLING
•Dial by PersonEmail
•Dial by SIP Address
CALL EVENTS
•Call progress events (ringing, connected, rejected)
•Incoming call event
•Remote push notification (closed app) (developer responsibility)
•Local push notification (backgrounded app) (developer responsibility)
CALL CONTROL
•Accept / Reject
•Hangup
AUDIO CONTROL
Audio output select (handset / headset / speakerphone) (iOS + JS)
Mute/unmute local audio
Mute/unmute remote audio
VIDEO CONTROL
•Mute/unmute local video
•Mute/unmute remote video
•Camera select
•Keep the aspect ratio (iOS only)
•Rate call quality (iOS+JS)
Incoming call notification for iOS
Envision a mobile application for a clothing store, that lists items for sale and has an automated ordering system. Perhaps you go to a shirt and some jeans and when you go to the checkout, there was a problem processing your payment. When that happens, from right inside the app, you are prompted with an option to join a video call with a customer service rep. When that option is selected, the video call natively starts right in the same clothing store application– no need to open or install any other applications. This feature can make the user experience much more efficient and friendly, and made possible by using Spark Video SDK for iOS (Android will be coming very soon!)
Go to the SDK doc https://developer.ciscospark.com/sdk-for-browsers.html
Show the documentation: https://ciscospark.github.io/spark-js-sdk/api/
Web Dialer: https://webdialer.chhab.rocks/login with steve.sfartz@gmail.com
- spark: stsfartz@cisco.com
- sip: ppalomo-demo-dx80@cisco.room.ciscospark.com
Think of the Cisco Spark client as two separate pieces. RECENTS for all of your latest interactions, and SPACE for chat and calling capabilities.
We take those 2 pieces of the Spark client and turn them into the RECENTS widget and SPACE widget
Super Easy Integration
Responsive UI built with HTML5 and React.js
New features automatically gets pushed via public CDN
Open source libraries
WebRTC A/V Calling & Messaging
Widget demo with paola.mancini@italtel.com and space
Hackathon demo with hackvivatech-paris/widgets/widget-space-global-events.html
Space widget in hackathon-resources, put the access-token of the guest
Contact someone
JWT
HS256
Both choices refer to what algorithm the identity provider uses to sign the JWT. Signing is a cryptographic operation that generates a "signature" (part of the JWT) that the recipient of the token can validate to ensure that the token has not been tampered with.
RS256 (RSA Signature with SHA-256) is an asymmetric algorithm, and it uses a public/private key pair: the identity provider has a private (secret) key used to generate the signature, and the consumer of the JWT gets a public key to validate the signature. Since the public key, as opposed to the private key, doesn't need to be kept secured, most identity providers make it easily available for consumers to obtain and use (usually through a metadata URL).
HS256 (HMAC with SHA-256), on the other hand, is a symmetric algorithm, with only one (secret) key that is shared between the two parties. Since the same key is used both to generate the signature and to validate it, care must be taken to ensure that the key is not compromised.