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


About Me


• 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

• [email protected]

What is SIP


7% (Verbal)

93% (Visual)

How do we communicate?


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


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


SDK for Spark Subscribers

[email protected] [email protected]

Cloud / PaaS

Microservices Media Infrastructure

APIs

[email protected]

Cloud Inc.


SDK for Non-subscriber calling Subscriber

Cloud / PaaS


APIs

Guest/Client [email protected]


alice557 SonitaInParis

Cloud / PaaS


APIs

SDK for Non-subscribers

SparkBnB SparkBnB


SDK Simplifies the User ExperienceBusiness App + Video App Business App with Video SDK

embedded


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

https://developer.ciscospark.com/


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

-


Use Cases


HealthcareVirtual care use cases

Main HospitalHome

Patient’s FamilyMain Hospital

Branch Hospital

Branch Hospital

Spark Platform

Patient locations

Remote locations


LMS - Learning Management System


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


What is in the Spark SDK?

BRKCOL-2022

22


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


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


Embed the Spark SDK

1. Register you app on developer.ciscospark.com/apps.html

How to start

2. Get your Oauth query parameters

https://developer.ciscospark.com/apps.html


What Is in the Spark Widget?


Easily embed Spark messaging, video and calling into your workflow

• Spark Widgets – Leverage Spark UI/UX

• Spark SDKs – Build your own UI


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


Coud Inc.

Spark Messaging Widget

Date:

Name:

Weight:


Appointments


Medical History

Patient Information

Notes


Coud Inc.

Spark WidgetSpaces Messaging

Date:

Name:

Weight:


Appointments


Medical History

Patient Information

Notes


Spark Meet Widget

Coud Inc.

Date:

Name:

Weight:


Appointments


Medical History

Patient Information

Notes


WebRTC: The Journey from Browser Plugins to Thin Client Communications


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


BRKCOL-2022 34


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%

http://en.wikipedia.org/wiki/Usage_share_of_web_browsers


http://iswebrtcreadyyet.com/

http://iswebrtcreadyyet.com/


Benefit from the Spark Platform


Global Backbone


Demo – Embed the SDK in Your App

40


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)


Demo for specific verticals


Spark SDK for JavaScriptWebRTC DEMO

Sample App https://github.com/marchfederico/simpleVideoApp

https://github.com/marchfederico/simpleVideoApp


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>


References

45


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 …

https://developer.ciscospark.com/iosquickstart.html

https://github.com/ciscospark/spark-ios-sdk-example

https://github.com/ciscospark/spark-ios-sdk

https://ciscospark.github.io/spark-ios-sdk/


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/


https://ciscospark.github.io/spark-js-sdk/example/getting-started/

https://ciscospark.github.io/spark-js-sdk/example/getting-started/

https://ciscospark.github.io/spark-js-sdk/app/

https://github.com/ciscospark/spark-js-sdk

https://ciscospark.github.io/spark-js-sdk/api/


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


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

https://github.com/ciscospark/spark-js-sdk/tree/master/packages/widget-message-meet

https://github.com/ciscospark/spark-js-sdk/blob/master/packages/widget-message-meet/README.md

https://code.s4d.io/widget-message-meet/latest/demo/index.html

https://code.s4d.io/widget-message-meet/latest/demo/index.html

http://sparkdemo.cisco.com/pharmacy/logon.html

http://sparkdemo.cisco.com/pharmacy/logon.html


Closing

• Learn more at https://developer.ciscospark.com

• Lab: Room N4

• CodeMotion Feedback

https://developer.ciscospark.com/

How to embed Video Calls and Messaging in your applications without being a Media, WebRTC, XMPP or...

Technology

Transcript of How to embed Video Calls and Messaging in your applications without being a Media, WebRTC, XMPP or...