Format Your New Topic as Follows:
Meeting SDK Type and Version
3.8.5
Description
When joining the webinar from my website that contains my zoom meeting embedded the host video is blank. I am able to join the meeting and listen to audio however the host camera is not visible once turned on. I can see their cover image when their camera is off but a blank screen is shown when the camera is turned on
Error?
N/A - no errors
Troubleshooting Routes
Tested joining a meeting instead of a webinar and video is available for both the attendie and the host. Only when I join a webinar is the host camera / video not visible.
How To Reproduce
My html code for generating the zoom embed using nunjucks templating for the data.
{% extends 'layout.html' %}
{% block main %}
<h1>Webinar Details</h1>
<div id="meetingSDKElement"></div>
<button id="startMeeting">Join Meeting</button>
<script src="https://source.zoom.us/3.8.5/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/3.8.5/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/3.8.5/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/3.8.5/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/3.8.5/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/3.8.5/zoom-meeting-embedded-3.8.5.min.js"></script>
<script src="./coi-serviceworker.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
bindEvents();
function bindEvents() {
const client = ZoomMtgEmbedded.createClient();
const meetingSDKElement = document.getElementById('meetingSDKElement');
client.init({
debug: true,
zoomAppRoot: meetingSDKElement,
language: 'en-US',
webEndpoint: "zoom.us",
customize: {
video: {
isResizable: true,
viewSizes: {
default: {
width: 800,
height: 600
}
}
}
}
}).catch((error) => {
console.error(error);
});
document.getElementById('startMeeting').addEventListener('click', function () {
joinZoom(client, {
username: '{{ data.name }}',
userEmail: '{{ data.email }}',
meetingId: '{{ data.webinarId }}',
sdkKey: '{{data.zoomApiKey}}',
secret: '{{data.zoomSecret}}',
tk: '{{ data.joinToken }}',
});
});
}
function joinZoom(client, data) {
const userName = data.username;
const userEmail = data.userEmail;
const meetingId = data.meetingId;
const sdkKey = data.sdkKey;
const apiSecret = data.secret;
const token = data.tk;
const jwtToken = generateToken(sdkKey, meetingId, 0, apiSecret);
client.join({
sdkKey: sdkKey,
signature: jwtToken,
userName: userName,
userEmail: userEmail,
meetingNumber: meetingId,
tk: token,
success: (success) => {
console.log('Meeting joined');
},
error: (error) => {
console.error(error);
}
}).catch((error) => {
console.error(error);
});
}
function generateToken(appKey, meetingNumber, role, apiSecret) {
return ZoomMtg.generateSDKSignature({
meetingNumber: meetingNumber,
sdkKey: appKey,
sdkSecret: apiSecret,
role: role,
success: function (res) {
console.log('res', res.result);
}
});
}
});
</script>
{% endblock %}