How to embed Video Calls and Messaging in your applications without being a Media, WebRTC, XMPP or...
-
Upload
codemotion -
Category
Technology
-
view
41 -
download
7
Transcript of How to embed Video Calls and Messaging in your applications without being a Media, WebRTC, XMPP or...
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
How to embed Video Calls and Messaging without being a WebRTC, XMPP or SIP expert
Joshua ReolaBusiness Development ManagerCisco Spark API BU
@gqpinoy
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
• Overview
• Why a SDK for video?• Benefits• Use cases
• What is in the Spark SDK?• Capabilities• Video SDK• WebRTC
• What is the Spark widget?
• Demo - Embed video in seconds
Agenda
2
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
About Me
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
• RFC 3261• SIP (Session Initiation
Protocol) is a protocol used in VoIP communications allowing users to make voice and video calls.
• SMTP• Dialing
• +15125551234• SIP URI like URL
What is SIP
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
7% (Verbal)
93% (Visual)
How do we communicate?
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
Cisco Spark Demo
6
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 7
Why a SDK for Video?Benefits and Use Cases
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 8
Cisco Spark Supports Beautiful Video Today
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
But What If Your Cisco Spark Users Spend Most of Their Day in Some Other Business App?
9
Coud Inc.
Date:
Name:
Weight:
Meeting (Doctor)Full status (Doctor)AssistantBillingReports
Appointments
2 month checkup1 month checkupRespiration problem10 days checkup
Medical History
Patient Information
Notes
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 10
SDK for Spark Subscribers
[email protected] [email protected]
Cloud / PaaS
Microservices Media Infrastructure
APIs
Cloud Inc.
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 11
SDK for Non-subscriber calling Subscriber
Cloud / PaaS
Microservices Media Infrastructure
APIs
Guest/Client [email protected]
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 12
alice557 SonitaInParis
Cloud / PaaS
Microservices Media Infrastructure
APIs
SDK for Non-subscribers
SparkBnB SparkBnB
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 13
SDK Simplifies the User ExperienceBusiness App + Video App Business App with Video SDK
embedded
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 14
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
NativeIntegrations
Power-users create their own apps
in minutes
App IntegrationServices
Developers accelerate the value of Spark in
their environments
PlatformAPIs / SDKs
https://developer.ciscospark.com
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 15
SDK Benefits for the Developer
• Open source SDK & royalty free – Cisco pays for open H.264
• Embed video in your app requires only few minutes
• Render inside your mobile app
• WebRTC - no need for plugin for browser
• Anyone can contribute under MIT license
• 24/7 Support
-
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 17
Use Cases
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 18
HealthcareVirtual care use cases
Main HospitalHome
Patient’s FamilyMain Hospital
Branch Hospital
Branch Hospital
Spark Platform
Patient locations
Remote locations
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 19
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 20
LMS - Learning Management System
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 21
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
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
What is in the Spark SDK?
BRKCOL-2022
22
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 23
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
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 24
Spark SDK - Features
Calling
• Calling
• Call Events
Specs
iOS SDK - swift• iOS 9 and 10JS SDK - WebRTC• Chrome - current• Firefox - currentCODECS• H264• Opus
Call &Media Controls
• Call Control
• Audio Control
• Video Control
Other Functions
• Persistent registration
• Feedback
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 25
Embed the Spark SDK
1. Register you app on developer.ciscospark.com/apps.html
How to start
2. Get your Oauth query parameters
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 26
What Is in the Spark Widget?
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 27
Easily embed Spark messaging, video and calling into your workflow
• Spark Widgets – Leverage Spark UI/UX
• Spark SDKs – Build your own UI
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 28
SDK and Widget
SDK WIDGET
UI elements No UI Spark UI and UX
Platform Web + iOS Web
Capability Audio-Video 1:1 Messaging 1:1Audio-video 1:1
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 29
Coud Inc.
Spark Messaging Widget
Date:
Name:
Weight:
Meeting (Doctor)Full status (Doctor)AssistantBillingReports
Appointments
2 month checkup1 month checkupRespiration problem10 days checkup
Medical History
Patient Information
Notes
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 30
Coud Inc.
Spark WidgetSpaces Messaging
Date:
Name:
Weight:
Meeting (Doctor)Full status (Doctor)AssistantBillingReports
Appointments
2 month checkup1 month checkupRespiration problem10 days checkup
Medical History
Patient Information
Notes
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 31
Spark Meet Widget
Coud Inc.
Date:
Name:
Weight:
Meeting (Doctor)Full status (Doctor)AssistantBillingReports
Appointments
2 month checkup1 month checkupRespiration problem10 days checkup
Medical History
Patient Information
Notes
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 32
WebRTC: The Journey from Browser Plugins to Thin Client Communications
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 33
IE/Win(10+ only)
Win 10 / Edge Safari/Mac(7+ only)
FireFox(WebRTC)
Chrome(WebRTC)
Chromebook(WebRTC)
VoIP No WebRTC – Plugin Only
WebRTCORTC
No WebRTC – Plugin Only
Opus - G711 WebRTC
Opus - G711 WebRTC
Opus - G711 WebRTC
Video No WebRTC – Plugin Only
WebRTCORTC
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
WebRTC: Browser Readiness for Collaboration
* WebRTC Share standard extension definition underway** OpenH.264 currently in Firefox
Considers interoperability
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
BRKCOL-2022 34
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 35
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
NetMarketShare 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%
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 36
http://iswebrtcreadyyet.com/
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 37
Benefit from the Spark Platform
38© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Optimizing Wi-Fi Connectivity
Integrating Voice and Collaboration
Prioritizing Business Apps
Apple and Cisco R&D
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 39
Global Backbone
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
Demo – Embed the SDK in Your App
40
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 41
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: ”[email protected]")
// Where should I display the call view?self.present(sparkMedia, animated: true, completion: nil)
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 42
Demo for specific verticals
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 43
Spark SDK for JavaScriptWebRTC DEMO
Sample App https://github.com/marchfederico/simpleVideoApp
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 44
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>
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
References
45
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 46
Spark SDK for iOS
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 …
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 47
Spark SDK for JavaScript
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/
And more to come …
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 48
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
Demohttps://code.s4d.io/widget-message-meet/latest/demo/index.htmlhttp://sparkdemo.cisco.com/pharmacy/logon.html
Quick Start Sample Code
And more to come …
<!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>
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 49
Closing
• Learn more at https://developer.ciscospark.com
• Lab: Room N4
• CodeMotion Feedback
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
Thank You
© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 50BRKCOL-2022