Post on 17-Oct-2021
transcript
#CiscoLive | #DevNetDay
Adam Weeks, Technical Leader, Webex for Developers
Embedding Webex features into web and mobile apps
Elevating ‘face-to-face’ into the Cisco Collaboration Cloud
Agenda
#CiscoLive | #DevNetDay © 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public
• Introduction• Webex Integrations• Webex Widgets• Webex Javascript SDK
• Webex iOS SDK
• Webex Android SDK• Conclusion
2
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 3
How do we enable face to face meetings in our existing business apps?
Cloud Inc.
Integrations
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay DEVWKS-3273 5
https://developer.webex.com
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay Session ID 6
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay Session ID 7
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay Session ID 8
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 9Session ID
Access Token Success!
Webex Widgets
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 11
Webex Widgets
Recents
Space
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 12Session ID
<!DOCTYPE html><html><head><meta charset="utf8"><title>Space Widget Demo</title><script src="https://code.s4d.io/widget-space/production/bundle.js"></script><link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css"></head><body><div id="my-webexteams-widget" style="width: 500px; height: 500px;"/><script>var widgetEl = document.getElementById('my-webexteams-widget');// Init a new widgetwebex.widget(widgetEl).spaceWidget({accessToken: 'ACCESS_TOKEN',destinationId: 'SPACE_ID',destinationType: 'spaceId'});</script></body></html>
Sample code available at:https://developer.webex.com/docs/widgets
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 13Session ID
<!DOCTYPE html><html><head><meta charset="utf8"><title>Space Widget Demo</title><script src="https://code.s4d.io/widget-space/production/bundle.js"></script><link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css"></head><body><div id="my-webexteams-widget" style="width: 500px; height: 500px;"/><script>var widgetEl = document.getElementById('my-webexteams-widget');// Init a new widgetwebex.widget(widgetEl).spaceWidget({accessToken: 'ACCESS_TOKEN',destinationId: 'SPACE_ID',destinationType: 'spaceId'});</script></body></html>
Sample code available at:https://developer.webex.com/docs/widgets
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 14Session ID
<!DOCTYPE html><html><head><meta charset="utf8"><title>Space Widget Demo</title><script src="https://code.s4d.io/widget-space/production/bundle.js"></script><link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css"></head><body><div id="my-webexteams-widget" style="width: 500px; height: 500px;"/><script>var widgetEl = document.getElementById('my-webexteams-widget');// Init a new widgetwebex.widget(widgetEl).spaceWidget({accessToken: 'ACCESS_TOKEN',destinationId: 'SPACE_ID',destinationType: 'spaceId'});</script></body></html>
Sample code available at:https://developer.webex.com/docs/widgets
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 15Session ID
<!DOCTYPE html><html><head><meta charset="utf8"><title>Space Widget Demo</title><script src="https://code.s4d.io/widget-space/production/bundle.js"></script><link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css"></head><body><div id="my-webexteams-widget" style="width: 500px; height: 500px;"/><script>var widgetEl = document.getElementById('my-webexteams-widget');// Init a new widgetwebex.widget(widgetEl).spaceWidget({accessToken: 'ACCESS_TOKEN',destinationId: 'SPACE_ID',destinationType: 'spaceId'});</script></body></html>
Sample code available at:https://developer.webex.com/docs/widgets
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 16Session ID
<!DOCTYPE html><html><head><meta charset="utf8"><title>Space Widget Demo</title><script src="https://code.s4d.io/widget-space/production/bundle.js"></script><link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css"></head><body><div id="my-webexteams-widget" style="width: 500px; height: 500px;"/><script>var widgetEl = document.getElementById('my-webexteams-widget');// Init a new widgetwebex.widget(widgetEl).spaceWidget({accessToken: 'ACCESS_TOKEN',destinationId: 'SPACE_ID',destinationType: 'spaceId'});</script></body></html>
Sample code available at:https://developer.webex.com/docs/widgets
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 17Session ID
<!DOCTYPE html><html><head><meta charset="utf8"><title>Space Widget Demo</title><script src="https://code.s4d.io/widget-space/production/bundle.js"></script><link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css"></head><body><div id="my-webexteams-widget" style="width: 500px; height: 500px;"/><script>var widgetEl = document.getElementById('my-webexteams-widget');// Init a new widgetwebex.widget(widgetEl).spaceWidget({accessToken: 'ACCESS_TOKEN',destinationId: 'SPACE_ID',destinationType: 'spaceId'});</script></body></html>
Sample code available at:https://developer.webex.com/docs/widgets
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 18Session ID
<!DOCTYPE html><html><head><meta charset="utf8"><title>Space Widget Demo</title><script src="https://code.s4d.io/widget-space/production/bundle.js"></script><link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css"></head><body><div id="my-webexteams-widget" style="width: 500px; height: 500px;"/><script>var widgetEl = document.getElementById('my-webexteams-widget');// Init a new widgetwebex.widget(widgetEl).spaceWidget({accessToken: 'ACCESS_TOKEN',destinationId: 'SPACE_ID',destinationType: 'spaceId'});</script></body></html>
Sample code available at:https://developer.webex.com/docs/widgets
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 19Session ID
<!DOCTYPE html><html><head><meta charset="utf8"><title>Space Widget Demo</title><script src="https://code.s4d.io/widget-space/production/bundle.js"></script><link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css"></head><body><div id="my-webexteams-widget" style="width: 500px; height: 500px;"/><script>var widgetEl = document.getElementById('my-webexteams-widget');// Init a new widgetwebex.widget(widgetEl).spaceWidget({accessToken: 'ACCESS_TOKEN',destinationId: 'SPACE_ID',destinationType: 'spaceId'});</script></body></html>
Sample code available at:https://developer.webex.com/docs/widgets
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 20Session ID
Webex Widget Success!
Sample code available at:https://developer.webex.com/docs/widgets
Webex Javascript SDK
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 22
Source code available:https://github.com/webex/webex-js-sdk
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 23Session ID
Javascript SDK Bundle on CDN
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Using the Javascript SDK for a Webex Meeting• Initialize the SDK with Access Token
• Register the web browser as an SDK client• Create Meeting
• Join Meeting• Add Local Media
• Display Meeting Media on the Page
24Session ID
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Initialize the SDK with Access Token
25
const webex = Webex.init({credentials: {
access_token: myAccessToken}
});
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Register the web browser as an SDK client
26
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
webex.meetings.register().catch((err) => {console.error(err);alert(err);throw err;
});
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Create Meeting
27
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
const meeting = await webex.meetings.create(destination);
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Join Meeting
28
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
await meeting.join();
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Add Local Media
29
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
const mediaSettings = {receiveVideo: true,receiveAudio: true,receiveShare: false,sendVideo: true,sendAudio: true,sendShare: false};
return meeting.getMediaStreams(mediaSettings).then((mediaStreams) => {const [localStream, localShare] = mediaStreams;
meeting.addMedia({localShare,localStream,mediaSettings});});
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Add Local Media
30
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
const mediaSettings = {receiveVideo: true,receiveAudio: true,receiveShare: false,sendVideo: true,sendAudio: true,sendShare: false};
return meeting.getMediaStreams(mediaSettings).then((mediaStreams) => {const [localStream, localShare] = mediaStreams;
meeting.addMedia({localShare,localStream,mediaSettings});});
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Add Local Media
31
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
const mediaSettings = {receiveVideo: true,receiveAudio: true,receiveShare: false,sendVideo: true,sendAudio: true,sendShare: false};
return meeting.getMediaStreams(mediaSettings).then((mediaStreams) => {const [localStream, localShare] = mediaStreams;
meeting.addMedia({localShare,localStream,mediaSettings});});
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Add Local Media
32
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
const mediaSettings = {receiveVideo: true,receiveAudio: true,receiveShare: false,sendVideo: true,sendAudio: true,sendShare: false};
return meeting.getMediaStreams(mediaSettings).then((mediaStreams) => {const [localStream, localShare] = mediaStreams;
meeting.addMedia({localShare,localStream,mediaSettings});});
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Display Meeting Media on the Page
33
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
// Handle media streams changes to ready statemeeting.on('media:ready', (media) => {if (media.type === 'local') {document.getElementById('self-view').srcObject = media.stream;}if (media.type === 'remoteVideo') {document.getElementById('remote-view-video').srcObject = media.stream;
}if (media.type === 'remoteAudio') {document.getElementById('remote-view-audio').srcObject = media.stream;}
});
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Display Meeting Media on the Page
34
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
// Handle media streams changes to ready statemeeting.on('media:ready', (media) => {if (media.type === 'local') {document.getElementById('self-view').srcObject = media.stream;}if (media.type === 'remoteVideo') {document.getElementById('remote-view-video').srcObject = media.stream;
}if (media.type === 'remoteAudio') {document.getElementById('remote-view-audio').srcObject = media.stream;}
});
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Display Meeting Media on the Page
35
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
// Handle media streams changes to ready statemeeting.on('media:ready', (media) => {if (media.type === 'local') {document.getElementById('self-view').srcObject = media.stream;}if (media.type === 'remoteVideo') {document.getElementById('remote-view-video').srcObject = media.stream;
}if (media.type === 'remoteAudio') {document.getElementById('remote-view-audio').srcObject = media.stream;}
});
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Display Meeting Media on the Page
36
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
// Handle media streams changes to ready statemeeting.on('media:ready', (media) => {if (media.type === 'local') {document.getElementById('self-view').srcObject = media.stream;}if (media.type === 'remoteVideo') {document.getElementById('remote-view-video').srcObject = media.stream;
}if (media.type === 'remoteAudio') {document.getElementById('remote-view-audio').srcObject = media.stream;}
});
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Successfully Connected to Meeting!
37
Sample code available:https://github.com/WebexSamples/webex-meetings-quick-start
Webex iOS SDK
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Creating a Meeting with the Webex iOS SDK
• Import SDK Via Cocoapods
• Authentication• Register Device
• Make a Call
39
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Import SDK Via Cocoapods
40
Sample code available:https://github.com/webex/webex-ios-sdk-example
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Authentication
41
Sample code available:https://github.com/webex/webex-ios-sdk-example
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Register Device
42
Sample code available:https://github.com/webex/webex-ios-sdk-example
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Make a Call
43
Sample code available:https://github.com/webex/webex-ios-sdk-example
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 44
Webex iOS Meeting Success!
Webex Android SDK
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Creating a Meeting with the Webex Android SDK
• Integrate the Webex Teams Android SDK
• Add the Webex Teams Android SDK Library• Authentication
• Register Device• Make a Call
46
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Integrate the Webex Teams Android SDK
47
Sample code available:https://github.com/webex/webex-android-sdk-example
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Add the Webex Teams Android SDK Library
48
Sample code available:https://github.com/webex/webex-android-sdk-example
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Authentication
49
Sample code available:https://github.com/webex/webex-android-sdk-example
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Register Device
50
Sample code available:https://github.com/webex/webex-android-sdk-example
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Make a Call
51
Sample code available:https://github.com/webex/webex-android-sdk-example
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay 52
Webex Android SDK Meeting Success!
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public
Wrapping Things Up!
1. Create an Integration for Webex Authentication
2. Webex Widgets for quick browser based meetings
3. Webex Javascript SDK for custom browser experiences
4. Webex iOS SDK for iOS mobile meetings
5. Webex Android SDK for Android mobile meetings
53
© 2020 Cisco and/or its affiliates. All rights reserved. Cisco Public#CiscoLive | #DevNetDay
Explore More • Webex for Developers• https://developer.webex.com/
• Webex Widgets• https://developer.webex.com/docs/widgets
• Javascript SDK• https://developer.webex.com/docs/sdks/browser
• iOS SDK• https://developer.webex.com/docs/sdks/ios
• Android SDK• https://developer.webex.com/docs/sdks/android
Thank you
#CiscoLive | #DevNetDay
#CiscoLive | #DevNetDay