embedding messages and video calls in your apps
TRANSCRIPT
How to embed
Messaging and Video
in your apps
API Evangelist @CiscoDevNet
@SteveSfartz
Stève Sfartz
DEMOS AND CODEINTENSE
/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
so what’s on the menu
• Tour the potential of Video Calls
• Messaging from code
• Calling from code
• Demos & tech details
EN
GA
GE
ME
NT
TIME
Ad HocMeetings
FuriousChat
OccasionalMessaging
REALTIME
ScheduledMeetings
Current Workstyles Use Multiple Modes
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?
EN
GA
GE
ME
NT
TIME
Continuous Collaboration
REALTIME
OccasionalMessaging
Ad HocMeetings
FuriousChat
ScheduledMeetings
Secure, scalable, continuous collaboration
Cisco Spark Platform
Apps and Endpoints
On Premise Services Cloud Based Services
Single Experience Across Devices & Applications
Apps and Endpoints
Every Pocket , Desk, Room
Demo Cisco Spark Clients DX80
?! Now what if your app could getthese Messages, Audio/Video
super powers ?!
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
Cisco Spark REST API
14
GET
POST
DELETE
PUT
/Rooms
/Memberships
/Messages
/Webhooks
/People
/Teams
developer.ciscospark.com/
Cisco Spark for Developers
APItoken
Cisco Spark for Developers
APIdeveloper
botoauth
jwt
token
Demo REST API Automation, ChatOps
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
Demo REST API Bot (on Glitch)
‘What is takes to code a bot’
Cisco Spark for Developers
APIdeveloper
botoauth
jwt
token
Cisco Spark for Developers
developerbot
oauthguest
token REST API
SDKs
Browsers, iOS, Android
all Sparkfeatures
Demo OAuth grant flow
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
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
Cisco Spark for Developers
developerbot
oauthjwt
token REST API
SDKs
Browsers, iOS, Android
all Sparkfeatures
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
Use Case: Retail
https://developer.ciscospark.com/sdk-for-browsers.html
https://ciscospark.github.io/spark-js-sdk/api
Demo OAuth with Spark SDK
Web Dialer from FireFoxhttps://webdialer.chhab.rocks
Each space also has a SIP address
https://developer.ciscospark.com/endpoint-rooms-roomId-get.html
Cisco Spark Client to Widget
Recents
Space
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
Demo Space Widget
Embedding the Space React component
Cisco Spark for Developers
developerbot
oauthjwt
token REST API
SDKs
Browsers, iOS, Android
all Sparkfeatures
What if my users are not on Spark ?
Cisco Spark
Anyone Everywhere- spark user- guest
- spark user, spaces, devices
- SIP addresses
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
Gest mode deep dive
https://jwt.io/
Create a user JWT token from code
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
}
Demo Guest mode
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
Cisco Spark Resources
developer.ciscospark.com
awesome-ciscospark
DevNet learning labs
https://learninglabs.cisco.com/tracks/collab-cloud
Get empowered at
Learnings labs
Fog computing
Sandboxes
ready to use Kubernetes cluster
for DevNet members
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
Thank you
