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);
};
