Description : I wanted to integrate Zoom Meeting SDK for a project, for which I am using the sample vue code available on github.
GitHub - zoom/meetingsdk-vuejs-sample: Use the Zoom Meeting SDK in Vue.js is the sample vue code and GitHub - zoom/meetingsdk-auth-endpoint-sample: Generate a Meeting SDK JWT to join Zoom meetings and webinars with the Meeting SDK. is the sample auth endpoint. Modified the code as below ( to implement cross origin isolation policy), and after running on localhost and joining the meeting, I can’t see the joined bot’s video feed on the localhost but it is visible to other members in the meet, also other member’s video feed is not available on the localhost client side.
I tried tunneling the auth endpoint through ngrok, but didn’t work out. The function crossOriginIsolated is returning false at the console, which tells me that cross origin isolation is not working with the current code changes.
SDK Version : 3.8.0
Reproducible Steps : Clone both the github repositories mentioned in the description, and change the below code files as shown. Also change HelloWorld.vue to HelloWorldNew.vue in the App.vue file in meetingsdk-vuejs-sample repository
HellowWorldNew.vue (meetingsdk-vuejs-sample)
<script setup>
import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';
var client = ZoomMtgEmbedded.createClient()
var authEndpoint = 'http://localhost:4000'
var sdkKey = ''
var meetingNumber = ''
var passWord = ''
var role = 1
var userName = 'botsdk'
var userEmail = ''
var registrantToken = ''
var zakToken = ''
function getSignature() {
fetch(authEndpoint, {
method: 'POST',
headers: {
'Content-Type':'application/json'
},
body: JSON.stringify({
meetingNumber: meetingNumber,
role: role
})
}).then((response) => {
return response.json()
}).then((data) => {
console.log(data)
startMeeting(data.signature)
}).catch((error) => {
console.log(error)
})
}
function startMeeting(signature) {
let meetingSDKElement = document.getElementById('meetingSDKElement');
client.init({zoomAppRoot: meetingSDKElement, language: 'en-US', patchJsMedia: true, leaveOnPageUnload: true}).then(() => {
client.join({
signature: signature,
sdkKey: sdkKey,
meetingNumber: meetingNumber,`Preformatted text`
password: passWord,
userName: userName,
userEmail: userEmail,
tk: registrantToken,
zak: zakToken
}).then(() => {
console.log('joined successfully')
}).catch((error) => {
console.log(error)
})
}).catch((error) => {
console.log(error)
})
}
</script>
<template>
<h1>Zoom Meeting SDK Vue.js Sample</h1>
<!-- For Component View -->
<div id='meetingSDKElement'>
</div>
<button @click='getSignature'>Join Meeting</button>
</template>
<style scoped>
</style>
index.js (meetingsdk-auth-endpoint-sample)
import cors from 'cors';
import dotenv from 'dotenv';
import express from 'express';
import { KJUR } from 'jsrsasign';
import { inNumberArray, isBetween, isRequiredAllOrNone, validateRequest } from './validations.js';
dotenv.config();
const app = express();
const port = process.env.PORT || 4000;
app.use(express.json());
app.use(cors({
origin: '*',
methods: ['GET', 'POST'],
allowedHeaders: ['Content-Type']
}));
app.options('*', cors());
// Add this middleware to set cross-origin isolation headers
app.use((req, res, next) => {
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
next();
});
const propValidations = {
role: inNumberArray([0, 1]),
expirationSeconds: isBetween(1800, 172800)
};
const schemaValidations = [isRequiredAllOrNone(['meetingNumber', 'role'])];
const coerceRequestBody = (body) => ({
...body,
...['role', 'expirationSeconds'].reduce(
(acc, cur) => ({ ...acc, [cur]: typeof body[cur] === 'string' ? parseInt(body[cur]) : body[cur] }),
{}
)
});
app.post('/', (req, res) => {
const requestBody = coerceRequestBody(req.body);
const validationErrors = validateRequest(requestBody, propValidations, schemaValidations);
if (validationErrors.length > 0) {
return res.status(400).json({ errors: validationErrors });
}
const { meetingNumber, role, expirationSeconds } = requestBody;
const iat = Math.floor(Date.now() / 1000);
const exp = expirationSeconds ? iat + expirationSeconds : iat + 60 * 60 * 2;
const oHeader = { alg: 'HS256', typ: 'JWT' };
const oPayload = {
appKey: process.env.ZOOM_MEETING_SDK_KEY,
sdkKey: process.env.ZOOM_MEETING_SDK_KEY,
mn: meetingNumber,
role,
iat,
exp,
tokenExp: exp
};
const sHeader = JSON.stringify(oHeader);
const sPayload = JSON.stringify(oPayload);
const sdkJWT = KJUR.jws.JWS.sign('HS256', sHeader, sPayload, process.env.ZOOM_MEETING_SDK_SECRET);
console.log(oPayload.mn, " is the meeting number");
console.log(sdkJWT);
return res.json({ signature: sdkJWT });
});
app.listen(port, () => console.log(`Zoom Meeting SDK Auth Endpoint Sample Node.js, listening on port ${port}!`));
Device: Macbook Air
OS: macOS 13.4.1
Browser: Chrome
Are their specific configurations I’m missing ?