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

• josh@cisco.com

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

alice@acme.com john@acme.com

Cloud / PaaS

Microservices Media Infrastructure

APIs

alice@acme.com

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 Tom@company.com

© 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: ”josh@cisco.com")

// 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