![Page 1: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/1.jpg)
How to embed
Messaging and Video
in your apps
API Evangelist @CiscoDevNet
@SteveSfartz
Stève Sfartz
DEMOS AND CODEINTENSE
![Page 2: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/2.jpg)
![Page 3: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/3.jpg)
/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
[email protected]@SteveSfartz
![Page 4: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/4.jpg)
so what’s on the menu
• Tour the potential of Video Calls
• Messaging from code
• Calling from code
• Demos & tech details
![Page 5: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/5.jpg)
EN
GA
GE
ME
NT
TIME
Ad HocMeetings
FuriousChat
OccasionalMessaging
REALTIME
ScheduledMeetings
Current Workstyles Use Multiple Modes
![Page 6: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/6.jpg)
EN
GA
GE
ME
NT
TIME
Optimizing the Space between the Spaces
REALTIME
OccasionalMessaging
ScheduledMeetings
Ad HocMeetings
FuriousChat
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?
![Page 7: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/7.jpg)
EN
GA
GE
ME
NT
TIME
Continuous Collaboration
REALTIME
OccasionalMessaging
Ad HocMeetings
FuriousChat
ScheduledMeetings
![Page 8: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/8.jpg)
![Page 9: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/9.jpg)
Secure, scalable, continuous collaboration
Cisco Spark Platform
Apps and Endpoints
On Premise Services Cloud Based Services
Single Experience Across Devices & Applications
Apps and Endpoints
![Page 10: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/10.jpg)
Every Pocket , Desk, Room
![Page 11: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/11.jpg)
Demo Cisco Spark Clients DX80
![Page 12: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/12.jpg)
?! Now what if your app could getthese Messages, Audio/Video
super powers ?!
![Page 13: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/13.jpg)
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
![Page 14: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/14.jpg)
Cisco Spark REST API
14
GET
POST
DELETE
PUT
/Rooms
/Memberships
/Messages
/Webhooks
/People
/Teams
developer.ciscospark.com/
![Page 15: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/15.jpg)
Cisco Spark for Developers
APItoken
![Page 16: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/16.jpg)
Cisco Spark for Developers
APIdeveloper
botoauth
jwt
token
![Page 17: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/17.jpg)
Demo REST API Automation, ChatOps
![Page 18: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/18.jpg)
Cisco SparkCloud Service
1. interacts in spacesvia a Cisco Spark client
Cisco Spark User
Your Bot code runningOn-premise or on a Public Coud
2. posts notifications to registered WebHooks
Publicly accessible APIs
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
![Page 19: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/19.jpg)
Demo REST API Bot (on Glitch)
‘What is takes to code a bot’
![Page 20: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/20.jpg)
Cisco Spark for Developers
APIdeveloper
botoauth
jwt
token
![Page 21: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/21.jpg)
Cisco Spark for Developers
developerbot
oauthguest
token REST API
SDKs
Browsers, iOS, Android
all Sparkfeatures
![Page 22: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/22.jpg)
Demo OAuth grant flow
![Page 23: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/23.jpg)
Step 3 – App Requests Access Token
duittenb
With the received Auth Code, app.html does a HTTPS POST to sparkwith the client ID & secret to request the Access Token.
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
![Page 24: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/24.jpg)
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 Access Token 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
![Page 25: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/25.jpg)
Cisco Spark for Developers
developerbot
oauthjwt
token REST API
SDKs
Browsers, iOS, Android
all Sparkfeatures
![Page 26: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/26.jpg)
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
• Audio Control
• Video Control
Other Functions
• Persistent registration
• Feedback
• Push notifications
![Page 27: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/27.jpg)
Use Case: Retail
![Page 28: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/28.jpg)
https://developer.ciscospark.com/sdk-for-browsers.html
![Page 29: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/29.jpg)
https://ciscospark.github.io/spark-js-sdk/api
![Page 30: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/30.jpg)
Demo OAuth with Spark SDK
Web Dialer from FireFoxhttps://webdialer.chhab.rocks
![Page 31: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/31.jpg)
![Page 32: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/32.jpg)
Each space also has a SIP address
https://developer.ciscospark.com/endpoint-rooms-roomId-get.html
![Page 33: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/33.jpg)
Cisco Spark Client to Widget
Recents
Space
![Page 34: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/34.jpg)
Space Widget
• Audio & video 1:1 calling
• Space & 1:1 messaging
• Markdown support
• File sharing
• Message flags and ability to delete messages
• Read receipts
• Persistent chat
![Page 35: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/35.jpg)
Demo Space Widget
![Page 36: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/36.jpg)
Embedding the Space React component
![Page 37: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/37.jpg)
Cisco Spark for Developers
developerbot
oauthjwt
token REST API
SDKs
Browsers, iOS, Android
all Sparkfeatures
![Page 38: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/38.jpg)
What if my users are not on Spark ?
Cisco Spark
Anyone Everywhere- spark user- guest
- spark user, spaces, devices
- SIP addresses
![Page 39: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/39.jpg)
Guest mode
• Create a Developer Guest organisation
• Get issued a OrgId & Secret
• Dynamically register users
• Get JWT tokens for these users
• Access Cisco Spark APIs & SDKs
![Page 40: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/40.jpg)
Gest mode deep dive
![Page 41: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/41.jpg)
https://jwt.io/
![Page 42: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/42.jpg)
Create a user JWT token from code
![Page 43: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/43.jpg)
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
}
![Page 44: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/44.jpg)
Demo Guest mode
![Page 45: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/45.jpg)
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
![Page 46: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/46.jpg)
Cisco Spark Resources
developer.ciscospark.com
awesome-ciscospark
DevNet learning labs
https://learninglabs.cisco.com/tracks/collab-cloud
![Page 47: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/47.jpg)
Get empowered at
Learnings labs
Fog computing
Sandboxes
ready to use Kubernetes cluster
for DevNet members
![Page 48: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/48.jpg)
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
![Page 49: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/49.jpg)
Thank you
![Page 50: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/50.jpg)
![Page 51: Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Milan 2017](https://reader033.vdocuments.net/reader033/viewer/2022051301/5a6479a17f8b9a36568b4797/html5/thumbnails/51.jpg)