https://marketplace.zoom.us/docs/zoom-apps/guides/layers-manipulating-ui/ this is what Iâm following, can you see where the
webviewId
Context:
Working with NodeJS and VueJS
Description
- Camera mode never gets initiated on my mac after calling runRenderingContext with options { view: âcameraâ }. If I change the view value to immersive { view: âimmersiveâ }, I can see that the runningContext changes to âinImmersiveâ mode whereas I do not get âinCameraâ mode whenever I set view to camera. Also, Iâd be glad if there is a way to use developer tools in camera mode as it isnât very helpful that one cannot determine when runRenderingContext has switched to âinCameraâ.
- When iâm using the drawWebView and drawImage APIs, none of them seems to work, but while testing drawParticipant API, it works in Immersive mode so it is not clear why both drawWebView and drawImage wouldnât work in camera mode, and these two are important in rendering the webview (the feature). This issue might also be because the camera mode is not being initiated as discussed in the first point.
How To Reproduce
Call runRenderingContext with camera mode. Currently both drawWebView and drawImage are not working after calling runRenderingContext
await zoomSdk.runRenderingContext({ view: âcameraâ })
.then(async(ctx) => {
console.log(ârunRenderingContext returnedâ, ctx);
})
.catch(async(e) => {
console.log(e);
});
Then call drawWebView
await zoomSdk.drawWebView({
webviewId: âspeaking-time-overlayâ,
x: 0,
y: 0,
width: 300,
height: 300,
zIndex:2
})
.then(async(ctx) => {
console.log(âdrawWebView returnedâ, ctx);
})
.catch((e) => {
console.log(e);
});
OR call
await zoomSdk.drawImage({
imageData: imageData,
x: 0, y: 0, zIndex:3
})
.then((ctx) => {
console.log(âdrawImage returned imageIDâ, ctx);
console.log(âdrawImage returned imageIDâ, ctx.imageId);
})
.catch((e) => {
console.log(e);
});
This is the getImageData function
const getImageData = (width, height) => {
const canvas = document.createElement(âcanvasâ);
canvas.width = width;
canvas.height = height;
const img = new Image();
img.src = "HowTo2.png"; // our image url - change baseurl
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
return ctx.getImageData(0, 0, width, height);
};