Adding Voice & Video to a web application using the OpenTok API

A presentation at Vonage Campus in October 2019 in San Francisco, CA, USA by Manik Sachdeva

Slide 1

Slide 1

The OpenTok API

Slide 2

Slide 2

Agenda ● ● ● ● VONAGE CONFIDENTIAL

Slide 3

Slide 3

What is OpenTok? The OpenTok platform makes it easy to embed high-quality real-time interactive video, voice, messaging, screen-sharing and more into web, mobile, and desktop apps. VONAGE CONFIDENTIAL

Slide 4

Slide 4

What is OpenTok? The platform includes client-side SDKs for web, iOS, Android, and Windows as well as server-side SDKs that wrap the OpenTok REST API. VONAGE CONFIDENTIAL

Slide 5

Slide 5

OpenTok Basics VONAGE CONFIDENTIAL

Slide 6

Slide 6

OpenTok Basics ● ● ● ● VONAGE CONFIDENTIAL

Slide 7

Slide 7

Session ● ● ● VONAGE CONFIDENTIAL

Slide 8

Slide 8

Types of Sessions ● ● Relayed ○ Relayed (Peer-to-Peer) - Media is streamed directly between clients. Good for remote areas that are not close to an OpenTok Media Router. Routed ○ Routed - Media is streamed through OpenTok’s SFU. This provides upload bandwidth savings for large calls and the ability to record (archive), broadcast, and dial out with SIP. VONAGE CONFIDENTIAL

Slide 9

Slide 9

Token ● ● ● ● ○ ○ ○ VONAGE CONFIDENTIAL

Slide 10

Slide 10

Publishing & Subscribing ● ● Publisher ○ Creator of the stream ○ Has the ability to publish audio or video only Subscriber ○ Receiver of the stream ○ Has the ability to subscribe to audio or video only VONAGE CONFIDENTIAL

Slide 11

Slide 11

Events ● Session Events ○ Connection Events ■ connectionCreated ■ connectionDestroyed ○ Stream Events ■ sessionConnected ■ streamCreated ■ streamDestroyed ■ sessionDisconnected ■ sessionReconnecting ■ sessionReconnected ■ streamPropertyChanged ○ Error Event ■ Error ○ Signal ○ Many more VONAGE CONFIDENTIAL

Slide 12

Slide 12

API Model Publish: patient phone camera+audio Publish: stethoscope audio stream Subscribe: doctor video stream Publish: doctor laptop camera+audio Subscribe: phone video stream Subscribe: stethoscope audio stream VONAGE CONFIDENTIAL

Slide 13

Slide 13

OpenTok Platform VONAGE CONFIDENTIAL

Slide 14

Slide 14

Supported Platforms ● ● ● ● ● ○ ● ● ● ● VONAGE CONFIDENTIAL

Slide 15

Slide 15

Supported Browsers ● ● ● ● ● ● VONAGE CONFIDENTIAL

Slide 16

Slide 16

Archiving (Recording) VONAGE CONFIDENTIAL

Slide 17

Slide 17

Types of Archives ● ○ ○ ● ○ VONAGE CONFIDENTIAL

Slide 18

Slide 18

Layout Control ● ● ● You can specify the layout of the videos when you start the archive and you can also update the layout when the archive is in progress Predefined Layouts ○ Best Fit ○ Picture in Picture ○ Vertical Presentation ○ Horizontal Presentation Custom Layouts using CSS VONAGE CONFIDENTIAL

Slide 19

Slide 19

Resolution Support ● ● Composed ○ 1280 x 720 ○ 640 x 480 Individual ○ Resolution captured by the camera VONAGE CONFIDENTIAL

Slide 20

Slide 20

Storing Archives ● ● ● AWS S3 Microsoft Azure … VONAGE CONFIDENTIAL

Slide 21

Slide 21

API Model Publish: patient phone camera+audio Publish: stethoscope audio stream Subscribe: doctor video stream Archives S3 / Azure Start Archive Publish: doctor laptop camera+audio Subscribe: phone video stream Subscribe: stethoscope audio stream VONAGE CONFIDENTIAL

Slide 22

Slide 22

Let’s build! https://github.com/msach22/opentok-vonage-campus VONAGE CONFIDENTIAL