-
+
-
-
-
+
+
diff --git a/index.js b/index.js
index b5c472f..212935b 100644
--- a/index.js
+++ b/index.js
@@ -1,59 +1,60 @@
-import { joinMeeting } from './webex.js';
+import { joinMeeting } from "./webex.js";
function openModal() {
- const body = document.getElementById('#body');
- body.style.filter = 'blur(15px)';
+ const body = document.getElementById("#body");
+ body.style.filter = "blur(15px)";
- const formModal = document.getElementById('#formModal');
- formModal.style.display = 'block';
+ const formModal = document.getElementById("#formModal");
+ formModal.style.display = "block";
}
function closeModal() {
- const body = document.getElementById('#body');
- body.style.filter = 'none';
+ const body = document.getElementById("#body");
+ body.style.filter = "none";
- const formModal = document.getElementById('#formModal');
- formModal.style.display = 'none';
+ const formModal = document.getElementById("#formModal");
+ formModal.style.display = "none";
}
async function openMeetingModal() {
- const formModal = document.getElementById('#formModal');
- formModal.style.display = 'none';
+ const formModal = document.getElementById("#formModal");
+ formModal.style.display = "none";
- const meetingModal = document.getElementById('#meetingModal');
- meetingModal.style.display = 'block';
+ const meetingModal = document.getElementById("#meetingModal");
+ meetingModal.style.display = "block";
await joinMeeting();
}
function closeMeetingModal() {
- const body = document.getElementById('#body');
- body.style.filter = 'none';
- const meetingModal = document.getElementById('#meetingModal');
- meetingModal.style.display = 'none';
+ const body = document.getElementById("#body");
+ body.style.filter = "none";
+ const meetingModal = document.getElementById("#meetingModal");
+ meetingModal.style.display = "none";
}
function handlerAssistanceOnchange() {
- const supportRow = document.getElementById('support-row');
- supportRow.style.display = 'block';
+ const supportRow = document.getElementById("support-row");
+ supportRow.style.display = "block";
}
function handlerSupportOnchange() {
- const getHelpBtn = document.querySelector('.get-help');
- getHelpBtn.style.display = 'block';
+ const getHelpBtn = document.querySelector(".get-help");
+ getHelpBtn.style.display = "block";
}
//Make the DIV element draggagle:
-dragElement(document.getElementById('local-video-section'));
+dragElement(document.getElementById("local-video-section"));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
- if (document.getElementById(elmnt.id + 'local-video')) {
+ if (document.getElementById(elmnt.id + "local-video")) {
/* if present, the header is where you move the DIV from:*/
- document.getElementById(elmnt.id + 'local-video').onmousedown = dragMouseDown;
+ document.getElementById(elmnt.id + "local-video").onmousedown =
+ dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
@@ -79,8 +80,8 @@ function dragElement(elmnt) {
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
- elmnt.style.top = elmnt.offsetTop - pos2 + 'px';
- elmnt.style.left = elmnt.offsetLeft - pos1 + 'px';
+ elmnt.style.top = elmnt.offsetTop - pos2 + "px";
+ elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
}
function closeDragElement() {
@@ -91,8 +92,8 @@ function dragElement(elmnt) {
}
window.openModal = openModal;
-window.handlerSupportOnchange = handlerSupportOnchange
-window.handlerAssistanceOnchange = handlerAssistanceOnchange
-window.closeMeetingModal = closeMeetingModal
-window.openMeetingModal = openMeetingModal
-window.closeModal = closeModal
+window.handlerSupportOnchange = handlerSupportOnchange;
+window.handlerAssistanceOnchange = handlerAssistanceOnchange;
+window.closeMeetingModal = closeMeetingModal;
+window.openMeetingModal = openMeetingModal;
+window.closeModal = closeModal;
diff --git a/meeting-info.js b/meeting-info.js
index 83f5bdf..1b757c7 100644
--- a/meeting-info.js
+++ b/meeting-info.js
@@ -1,12 +1,12 @@
// This URL below can be replaced with any Virtual Background Image URL
-export const vbgImageUrl = './images/V_B_G.jpg';
+export const vbgImageUrl = "./images/V_B_G.jpg";
// Obtain the following meetingInfo by creating a new meeting in the Webex Developer Portal
// Read through this API Reference to know more:
// https://developer.webex.com/docs/api/v1/meetings/create-a-meeting
// Once meeting is created, copy the whole response and paste it here.
// Note - Unless we have this information, this demo cannot join a meeting
-export const meetingInfo = {} // REQUIRED
+export const meetingInfo = {}; // REQUIRED
// Update the following with the Guest Issuer Access Token through Service Apps
// Read more about it here: https://developer.webex.com/docs/sa-guest-management
diff --git a/styles.css b/styles.css
index cc99344..699b75b 100644
--- a/styles.css
+++ b/styles.css
@@ -1,6 +1,6 @@
* {
font-size: small;
- font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
.body {
@@ -41,7 +41,11 @@
text-align: left;
padding: 0 0 0 30px;
color: white;
- background: linear-gradient(90deg, rgba(37, 125, 232, 1) 0%, rgba(57, 146, 235, 1) 52%);
+ background: linear-gradient(
+ 90deg,
+ rgba(37, 125, 232, 1) 0%,
+ rgba(57, 146, 235, 1) 52%
+ );
border-radius: 5px;
margin-left: 4px;
margin-top: -19px !important;
@@ -54,7 +58,11 @@
position: relative;
text-align: center;
color: white;
- background: linear-gradient(90deg, rgba(37, 125, 232, 1) 0%, rgba(57, 146, 235, 1) 52%);
+ background: linear-gradient(
+ 90deg,
+ rgba(37, 125, 232, 1) 0%,
+ rgba(57, 146, 235, 1) 52%
+ );
border-radius: 5px;
margin-top: 52vh;
margin-left: 4px;
@@ -209,7 +217,11 @@ tr .header {
padding: 27px;
border-radius: 10px;
background: rgb(37, 125, 232);
- background: linear-gradient(90deg, rgba(37, 125, 232, 1) 0%, rgba(57, 146, 235, 1) 52%);
+ background: linear-gradient(
+ 90deg,
+ rgba(37, 125, 232, 1) 0%,
+ rgba(57, 146, 235, 1) 52%
+ );
position: absolute;
top: 99px;
font-weight: 500;
@@ -273,7 +285,11 @@ tr .header {
height: 67px;
position: relative;
background: rgb(37, 125, 232);
- background: linear-gradient(90deg, rgba(37, 125, 232, 1) 0%, rgba(57, 146, 235, 1) 52%);
+ background: linear-gradient(
+ 90deg,
+ rgba(37, 125, 232, 1) 0%,
+ rgba(57, 146, 235, 1) 52%
+ );
}
#formModal p {
@@ -353,7 +369,7 @@ audio {
margin-top: 1rem;
}
-input[type='radio'] {
+input[type="radio"] {
cursor: pointer;
}
#support-row {
diff --git a/webex.js b/webex.js
index fd9c393..775bbbb 100644
--- a/webex.js
+++ b/webex.js
@@ -1,15 +1,21 @@
-const rootElement = document.getElementById('root');
-const joinWithMediaBtn = document.getElementById('join-with-media');
-const leaveMeetingBtn = document.getElementById('leave-meeting');
-const toggleVBGBtn = document.getElementById('toggle-vbg-btn');
+const rootElement = document.getElementById("root");
+const joinWithMediaBtn = document.getElementById("join-with-media");
+const leaveMeetingBtn = document.getElementById("leave-meeting");
+const toggleVBGBtn = document.getElementById("toggle-vbg-btn");
// Media elements
-const remoteVideoStreamElm = document.getElementById('remote-video');
-const remoteAudioStreamElm = document.getElementById('remote-audio');
-const localVideoStreamElm = document.getElementById('local-video');
-const localAudioStreamElm = document.getElementById('local-audio');
-
-import { meetingInfo, vbgImageUrl, guestIssuerAccessToken,personalAccessToken } from './meeting-info.js';
+const remoteVideoStreamElm = document.getElementById("remote-video");
+const remoteAudioStreamElm = document.getElementById("remote-audio");
+const localVideoStreamElm = document.getElementById("local-video");
+const localAudioStreamElm = document.getElementById("local-audio");
+
+import {
+ meetingInfo,
+ guestEndpointUrl,
+ vbgImageUrl,
+ guestIssuerAccessToken,
+ personalAccessToken,
+} from "./meeting-info.js";
let webex = null;
let createdMeeting = null;
@@ -18,17 +24,17 @@ let localStream = null;
let vbgEffect = null;
let isVBGEnabled = false;
-rootElement.addEventListener('click', async (e) => {
+rootElement.addEventListener("click", async (e) => {
switch (e.target.id) {
- case 'join-with-media':
+ case "join-with-media":
await joinMeeting();
break;
- case 'toggle-vbg-btn':
+ case "toggle-vbg-btn":
await toggleVBG();
break;
- case 'leave-meeting':
+ case "leave-meeting":
await leaveMeeting();
break;
@@ -39,20 +45,20 @@ rootElement.addEventListener('click', async (e) => {
e.stopPropagation();
});
-const guestUrl = 'https://webexapis.com/v1/guests/token';
+const guestUrl = "https://webexapis.com/v1/guests/token";
// Via Service App
async function getGuestAccessToken() {
const response = await fetch(guestUrl, {
- method: 'post',
+ method: "post",
headers: {
- Accept: 'application/json',
- 'Content-Type': 'application/json',
+ Accept: "application/json",
+ "Content-Type": "application/json",
Authorization: `Bearer ${guestIssuerAccessToken}`,
},
body: JSON.stringify({
- subject: 'Guest token for Webex SDK Sample App',
- displayName: 'Guest User',
+ subject: "Guest token for Webex SDK Sample App",
+ displayName: "Guest User",
}),
});
@@ -63,7 +69,7 @@ async function getGuestAccessToken() {
async function initWebexAndRegisterDevice(access_token) {
if (!access_token) {
- alert('Please provide an access token');
+ alert("Please provide an access token");
return;
}
@@ -85,25 +91,25 @@ async function createMeeting() {
function setMediaListeners() {
// Wait for media in order to show video
- createdMeeting.on('media:ready', (media) => {
- console.log('Media ready', media);
+ createdMeeting.on("media:ready", (media) => {
+ console.log("Media ready", media);
switch (media.type) {
- case 'remoteVideo':
+ case "remoteVideo":
remoteVideoStreamElm.srcObject = media.stream;
break;
- case 'remoteAudio':
+ case "remoteAudio":
remoteAudioStreamElm.srcObject = media.stream;
break;
}
});
// Remove stream if media stopped
- createdMeeting.on('media:stopped', (media) => {
+ createdMeeting.on("media:stopped", (media) => {
switch (media.type) {
- case 'remoteVideo':
+ case "remoteVideo":
remoteVideoStreamElm.srcObject = null;
break;
- case 'remoteAudio':
+ case "remoteAudio":
remoteAudioStreamElm.srcObject = null;
break;
}
@@ -112,12 +118,16 @@ function setMediaListeners() {
async function getLocalStreams() {
// https://github.com/webex/webex-js-sdk/wiki/Streams-and-Effects
- const microphoneStream = await webex.meetings.mediaHelpers.createMicrophoneStream({
- echoCancellation: true,
- noiseSuppression: true,
- });
+ const microphoneStream =
+ await webex.meetings.mediaHelpers.createMicrophoneStream({
+ echoCancellation: true,
+ noiseSuppression: true,
+ });
- const cameraStream = await webex.meetings.mediaHelpers.createCameraStream({ width: 640, height: 480 }); // Optional params
+ const cameraStream = await webex.meetings.mediaHelpers.createCameraStream({
+ width: 640,
+ height: 480,
+ }); // Optional params
localVideoStreamElm.srcObject = cameraStream.outputStream;
return {
@@ -127,12 +137,14 @@ async function getLocalStreams() {
}
async function verifyPassword() {
- const { isPasswordValid } = await createdMeeting.verifyPassword(meetingInfo.password);
+ const { isPasswordValid } = await createdMeeting.verifyPassword(
+ meetingInfo.password,
+ );
if (!isPasswordValid) {
- console.error('Invalid meeting password');
+ console.error("Invalid meeting password");
- throw new Error('Invalid meeting password');
+ throw new Error("Invalid meeting password");
}
}
@@ -146,12 +158,12 @@ async function joinMeetingWithMedia(localStreams) {
await createdMeeting.joinWithMedia(meetingOptions);
- leaveMeetingBtn.style.display = 'inline';
- joinWithMediaBtn.style.display = 'none';
+ leaveMeetingBtn.style.display = "inline";
+ joinWithMediaBtn.style.display = "none";
}
async function leaveMeeting() {
- leaveMeetingBtn.innerHTML = 'Leaving...';
+ leaveMeetingBtn.innerHTML = "Leaving...";
leaveMeetingBtn.disabled = true;
await createdMeeting.leave();
@@ -159,20 +171,20 @@ async function leaveMeeting() {
}
export async function joinMeeting() {
- joinWithMediaBtn.innerHTML = 'Joining...';
+ joinWithMediaBtn.innerHTML = "Joining...";
joinWithMediaBtn.disabled = true;
- joinWithMediaBtn.style.backgroundColor = 'grey';
- joinWithMediaBtn.style.cursor = 'default';
+ joinWithMediaBtn.style.backgroundColor = "grey";
+ joinWithMediaBtn.style.cursor = "default";
try {
// Step-1
- let accessToken
-
- if(guestIssuerAccessToken){
+ let accessToken;
+
+ if (guestIssuerAccessToken) {
accessToken = await getGuestAccessToken();
- } else{
- accessToken = personalAccessToken
- }
+ } else {
+ accessToken = personalAccessToken;
+ }
// Step-2
await initWebexAndRegisterDevice(accessToken);
@@ -193,17 +205,17 @@ export async function joinMeeting() {
// Step-7
await joinMeetingWithMedia(localStream);
} catch (error) {
- console.error('Error joining meeting', error);
+ console.error("Error joining meeting", error);
reset();
}
}
async function toggleVBG() {
- toggleVBGBtn.innerText = 'Toggling...';
+ toggleVBGBtn.innerText = "Toggling...";
if (!vbgEffect) {
vbgEffect = await webex.meetings.createVirtualBackgroundEffect({
- mode: 'IMAGE', // options are 'BLUR', 'IMAGE', 'VIDEO'
+ mode: "IMAGE", // options are 'BLUR', 'IMAGE', 'VIDEO'
bgImageUrl: vbgImageUrl,
// bgVideoUrl: blurVBGVideoUrl,
});
@@ -219,7 +231,7 @@ async function toggleVBG() {
isVBGEnabled = true;
}
- toggleVBGBtn.innerText = 'Toggle VBG';
+ toggleVBGBtn.innerText = "Toggle VBG";
}
async function addBNR() {
@@ -234,15 +246,15 @@ async function disableBNR() {
function reset() {
// Join meeting button
- joinWithMediaBtn.style.display = 'block';
- joinWithMediaBtn.innerHTML = 'Join';
+ joinWithMediaBtn.style.display = "block";
+ joinWithMediaBtn.innerHTML = "Join";
joinWithMediaBtn.disabled = false;
- joinWithMediaBtn.style.backgroundColor = '#59b15d';
- joinWithMediaBtn.style.cursor = 'pointer';
+ joinWithMediaBtn.style.backgroundColor = "#59b15d";
+ joinWithMediaBtn.style.cursor = "pointer";
// Leave meeting button
- leaveMeetingBtn.style.display = 'none';
- leaveMeetingBtn.innerHTML = 'Leave';
+ leaveMeetingBtn.style.display = "none";
+ leaveMeetingBtn.innerHTML = "Leave";
leaveMeetingBtn.disabled = false;
cleanUpMedia();
@@ -251,12 +263,17 @@ function reset() {
function cleanUpMedia() {
// local streams can be used across meetings
- [localAudioStreamElm, localVideoStreamElm, remoteVideoStreamElm, remoteAudioStreamElm].forEach((elem) => {
+ [
+ localAudioStreamElm,
+ localVideoStreamElm,
+ remoteVideoStreamElm,
+ remoteAudioStreamElm,
+ ].forEach((elem) => {
if (elem.srcObject) {
try {
elem.srcObject.getTracks().forEach((track) => track.stop());
} catch (error) {
- console.log('Cleanup media error: ', error);
+ console.log("Cleanup media error: ", error);
} finally {
elem.srcObject = null;
}
- 
@@ -73,7 +91,11 @@
+ 
Dashboard
Settings
- 
Logout
@@ -34,7 +50,9 @@
My-store
+ 
Your Orders