Embedding Messages and Video Calls in your apps
•Als PPTX, PDF herunterladen•
0 gefällt mir•281 views
End-users love to interact through Messages & Videos from their favorite tool: Messenger, WhatsApp, Webex... Wouldn't it be great to embed Messaging and Video into your apps ?! It turns out that at Cisco, we are not only providing 'Cisco Spark' - the Cloud Collaboration platform tailored for the Enterprise - but also proposing SDKs for Javascript, iOS and Android. In this talk, we'll explore how to create engaging multi-channel user experiences. We'll dig into Cisco Spark's React Widget and explain SIP & ChatBot concepts to ramp you up as a Messaging & Video enterprise professional !
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Embedding Messages and Video Calls in your apps
Ähnlich wie Embedding Messages and Video Calls in your apps (20)
Mehr von Cisco DevNet
Mehr von Cisco DevNet (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Embedding Messages and Video Calls in your apps
- 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
- 5. ENGAGEMENT TIME Ad Hoc Meetings Furious Chat Occasional Messaging REALTIME Scheduled Meetings Current Workstyles Use Multiple Modes
- 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
- 10. Every Pocket , Desk, Room
- 11. Demo Cisco Spark Clients DX80
- 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/
- 15. Cisco Spark for Developers API token
- 16. Cisco Spark for Developers API developer bot oauth jwt token
- 17. Demo REST API Automation, ChatOps
- 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
- 19. Demo REST API Bot (on Glitch) ‘What is takes to code a bot’
- 20. Cisco Spark for Developers API developer bot oauth jwt token
- 21. Cisco Spark for Developers developer bot oauth guest token REST API SDKs Browsers, iOS, Android all Spark features
- 22. Demo OAuth grant flow
- 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
- 27. Use Case: Retail
- 30. Demo OAuth with Spark SDK Web Dialer from FireFox https://webdialer.chhab.rocks
- 32. Each space also has a SIP address https://developer.ciscospark.com/endpoint-rooms-roomId-get.html
- 33. Cisco Spark Client toWidget Recents Space
- 34. 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
- 36. Embedding the Space React component
- 37. Cisco Spark for Developers developer bot oauth jwt token REST API SDKs Browsers, iOS, Android all Spark features
- 38. What if my users are not on Spark ? Cisco Spark Anyone Everywhere - spark user - guest - spark user, spaces, devices - SIP addresses
- 39. 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
- 40. Gest mode deep dive
- 41. https://jwt.io/
- 42. Create a user JWT token from code
- 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
- 46. Cisco Spark Resources developer.ciscospark.com awesome-ciscospark DevNet learning labs https://learninglabs.cisco.com/tracks/collab-cloud
- 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
- 49. Thank you
Hinweis der Redaktion
- 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
- eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJVU0VSSUQiLCJuYW1lIjoiVVNFUk5BTUUiLCJpc3MiOiJERVZFTE9QRVJfT1JHIn0.swoT9rodEYx-K4f-PpFhOc7du1-KKLScrO9qUerpB_U
- Generate a token for ‘Ilaria’
- 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.