Hi All,
@MaxM @amanda-recallai @elisa.zoom
We are creating an zoom app, which uses a form to donate, upon donation we were showing donation stream, and this donation stream shows on video as an overlay. It was working fine till last week but then it stopped showing the overlay. We are using a button (toggleRenderingContext()) upon click we are showing overlay on video. Below is our code, we are using React.js
useEffect(() => {
if (
Object.keys(props.userContext).length &&
props.runningContext === "inCamera"
) {
setReadyForCamera(true);
}
zoomSdk.onMessage(messageHandler);
return () => {
zoomSdk.removeEventListener("onMessage", messageHandler);
};
}, [props.runningContext, props.userContext]);
useEffect(() => {
if (readyForCamera) {
sendMessage("cameraModeLoaded", "");
}
}, [readyForCamera]);
useEffect(() => {
if (props.runningContext && props.runningContext !== "inCamera") {
props.initSdk(); //callback for zoomSdk.config
}
}, [props.runningContext]);
const toggleRenderingContext = () => {
setShowStreamLoader(true);
zoomSdk
.runRenderingContext({
view: "camera",
})
.then(() => {
})
.catch((e) => {
closeRenderingContext();
setShowStreamLoader(false);
});
};
const sendMessage = (message, data) => {
let msg = { message: message, data: data };
zoomSdk
.postMessage(msg)
.then(() => {
setShowOverlay(true);
setShowStreamLoader(false);
})
.catch((e) => console.log("error in sending message", e));
};
const sendSlugConfirmation = (overlaySlug) => {
zoomSdk
.postMessage({ message: "gotSlug", data: "" })
.then(redirectToOverlay(overlaySlug))
.catch((e) => sendMessage("errorMsg", e));
};
const redirectToOverlay = (overlaySlug) => {
navigate("/livestream",{state: overlaySlug});
};
const messageHandler = (message) => {
const msg = JSON.parse(message.payload);
switch (msg.message) {
case "cameraModeLoaded":
drawWebview(msg.data);
break;
case "setSlug":
sendSlugConfirmation(msg.data);
break;
case "gotSlug":
drawParticipant();
break;
case "sendSlug":
redirectToOverlay(msg.data);
break;
case "errorMsg":
break;
default:
}
};
const drawWebview = (data) => {
zoomSdk
.drawWebView({
webviewId: "1",
x: 0,
y: 0,
width: props.dimensions.width,
height: props.dimensions.height,
zIndex: 2,
})
.then(sendMessage("setSlug", 'test'))
.catch(handleZoomError);
};
const drawParticipant = () => {
zoomSdk
.drawParticipant({
participantUUID: props.userContext.participantUUID,
x: 0,
y: 0,
width: props.dimensions.width,
height: props.dimensions.height,
zIndex: 0,
})
.then(() => console.log("Drew Participant"))
.catch((e) => {
setShowStreamLoader(false);
sendMessage("errorMsg", e);
});
};
const closeRenderingContext = () => {
zoomSdk
.closeRenderingContext()
.then((ctx) => {
setShowOverlay(false);
})
.catch((e) => {
setShowStreamLoader(false);
});
};
Please help me on fixing this issue. Below is the working sample screenshot taken earlier. Now its not working.
