Context:
Working with NodeJS and VueJS
Description
So the issue I’m experiencing at the moment that can be forwarded to the zoom developers’ team are the following:
-
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);
};
!