We have Zoom app in marketplace i.e, Givent and there is an option to show virtual streamer overlay on camera when we click a button. On button click we are calling runRenderingContext({ view: “camera” }) and drawWebView, this works fine till couple of days earlier after we updated zoom this stops working.
Below is my code:
useEffect(() => {
if (
Object.keys(props.userContext).length &&
props.dimensions &&
props.runningContext === "inCamera"
) {
setReadyForCamera(true);
}
zoomSdk.onMessage(messageHandler);
return () => {
zoomSdk.removeEventListener("onMessage", messageHandler);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.runningContext, props.userContext, props.dimensions]);
useEffect(() => {
if (readyForCamera) {
sendMessage("cameraModeLoaded", "");
}
}, [readyForCamera]);
const toggleRenderingContext = () => {
setShowStreamLoader(true);
zoomSdk
.runRenderingContext({
view: "camera",
})
.then(() => {
})
.catch((e) => {
closeRenderingContext();
setShowStreamLoader(false);
console.log(e);
});
};
const sendMessage = (message, data) => {
let msg = { message: message, data: data };
zoomSdk
.postMessage(msg)
.then(() => {
sessionStorage.setItem('showvirtual',true);
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:
console.log("received weird message", msg);
}
};
const drawWebview = (data) => {
zoomSdk
.drawWebView({
webviewId: "1",
x: 0,
y: 0,
width: props.dimensions.width,
height: props.dimensions.height,
zIndex: 2,
})
.then(sendMessage("setSlug", []))
.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(() =>"")
.catch((e) => {
setShowStreamLoader(false);
sendMessage("errorMsg", e);
});
return;
};
const closeRenderingContext = () => {
zoomSdk
.closeRenderingContext()
.then((ctx) => {
setShowOverlay(false);
sessionStorage.setItem('showvirtual',false);
})
.catch((e) => {
console.log(e);
setShowStreamLoader(false);
});
};
We call toggleRenderingContext function on button click, Please help us to fix this issue.
Zoom client version: 6.7.0
@zoom/appssdk version : 0.16.36