# drawImage in Camera Mode returning an error

**URL:** <https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505>\
**Category:** Zoom Apps\
**Created:** [July 19, 2022, 4:17pm UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505 "2022-07-19T16:17:37Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![wei.hu](https://avatars.discourse-cdn.com/v4/letter/w/d07c76/32.png) [@wei.hu](https://devforum.zoom.us/u/wei.hu)\
**Post date:** [July 19, 2022, 4:17pm UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/1 "2022-07-19T16:17:37Z")

</div>

As [Drawing images in Camera Mode Documentation](https://marketplace.zoom.us/docs/zoom-apps/guides/layers-manipulating-ui/#drawing-images-in-camera-mode) in Zoom Apps, , I am trying to draw a image while in camera mode.

Steps to reproduce:

1.Start the rendering context in camera mode:

```auto
await zoomSdk.runRenderingContext({
    view: "camera"
})

```

1. Attempt to draw the image, eg:

```auto
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const ctx: CanvasRenderingContext2D = canvas.getContext("2d") as CanvasRenderingContext2D;
const img = new Image();

function draw(img: HTMLImageElement) {
    canvas.width = 1280;
    canvas.height = 720;

    // draw image
    ctx.drawImage(img, 0, 0);

    // get image data from canvas
    const imageData: ImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    zoomSdk
        .drawImage({
            imageData,
            x: 0,
            y: 0,
            zIndex: 10
        })
        .then((ctx) => {
            console.log("drawImage returned", ctx);
        })
        .catch((e) => {
            console.log(e);
        });
}

img.onload = () => {
    draw(img);
};

img.src =
    "https://9bae041b1da7.jp.ngrok.io/assets/1@2x.jpg?0.0.14?w=164&h=164&fit=crop&auto=format";

```

This results in the following console error:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/e/1/e1860675f7990007ddc2bcb8aa4050fb84110703.png)

Is something missing from the documentation, or is there a bug with this feature?

Thanks!

---

<div class="post-metadata">

**Author:** ![narmadaravali](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/narmadaravali/32/39496_2.png) [@narmadaravali](https://devforum.zoom.us/u/narmadaravali)\
**Post date:** [July 19, 2022, 11:08pm UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/2 "2022-07-19T23:08:57Z")

</div>

Are you making sure if `zoomSdk.runRenderingContext({ view: "camera" })` is called before you call `await zoomSdk.drawImage({})`?

`drawImage ` needs camera context for it to draw image.

---

<div class="post-metadata">

**Author:** ![wei.hu](https://avatars.discourse-cdn.com/v4/letter/w/d07c76/32.png) [@wei.hu](https://devforum.zoom.us/u/wei.hu)\
**Post date:** [July 20, 2022, 12:41am UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/3 "2022-07-20T00:41:59Z")

</div>

Yes, I’m sure the `zoomSdk.runRenderingContext({ view: "camera" })` is called before I call await zoomSdk.drawImage({}), when I call the `zoomSdk.runRenderingContext({ view: "camera" })`, I got the error below,

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/6/9610bada15014e0d92a2856892715ec7d55fea2c.png)

Can you help me find out what is the reason? Thanks you!

---

<div class="post-metadata">

**Author:** ![wei.hu](https://avatars.discourse-cdn.com/v4/letter/w/d07c76/32.png) [@wei.hu](https://devforum.zoom.us/u/wei.hu)\
**Post date:** [July 20, 2022, 10:06am UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/4 "2022-07-20T10:06:32Z")

</div>

Client version: 5.11.3 (8937)

My code is as below:

```auto
 const ctx = await zoomSdk.runRenderingContext({
    view: "camera"
 });

 console.log("runRenderingContext returned", ctx);

 zoomSdk
  .drawImage({
    imageData: new ImageData(100, 100),
        x: 0,
        y: 0,
        zIndex: 1
     }).then((ctx) => {
         console.log("drawImage returned", ctx);
     }).catch((e) => {
         console.log(e);
     });

```

Then I got the following error:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/3/631fa5c5ad26abe159380b6e5537a75b6ab11075.png)

Looking forward to your help, thanks!

---

<div class="post-metadata">

**Author:** ![narmadaravali](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/narmadaravali/32/39496_2.png) [@narmadaravali](https://devforum.zoom.us/u/narmadaravali)\
**Post date:** [July 20, 2022, 6:30pm UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/5 "2022-07-20T18:30:26Z")

</div>

Can you try this approach, wait for inCamera app to load first, then `postMessage` to the sidebar. Then drawImage, you might also have to drawWebView to see the result.

---

<div class="post-metadata">

**Author:** ![wei.hu](https://avatars.discourse-cdn.com/v4/letter/w/d07c76/32.png) [@wei.hu](https://devforum.zoom.us/u/wei.hu)\
**Post date:** [July 21, 2022, 3:53pm UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/6 "2022-07-21T15:53:24Z")

</div>

Hi~ Narmada, I have try this approach, but still get an error as below

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/7/97f88de8daf70090490a40be9d269874c081f98f.png)

If you can give me an example, I will be very grateful! 🤝

---

<div class="post-metadata">

**Author:** ![narmadaravali](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/narmadaravali/32/39496_2.png) [@narmadaravali](https://devforum.zoom.us/u/narmadaravali)\
**Post date:** [July 22, 2022, 7:48pm UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/7 "2022-07-22T19:48:43Z")

</div>

Hi, this example should work

```auto
function getMyImageData(width, height) {
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;

    const img = new Image(100, 200);
    img.src = zoomlogo; // insert any image here

    const ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    return ctx.getImageData(0, 0, width, height);
  }

async function testDrawImage() {
    const imageHeight = 100;
    const imageWidth = 500;
    const imageData = getMyImageData(imageWidth, imageHeight);
    await zoomSdk
      .drawImage({
        imageData: imageData,
        x: 0,
        y: 720 - imageHeight,
        zIndex: 2,
      })
      .then((result) => {
        console.log(result);
      })
      .catch((error) => console.error("Unable to call drawImage ", error));
  }

```

output:

 ![Screen Shot 2022-07-22 at 12.46.40 PM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/c/ccf8575baa9d8f28da6999a608f0cceea99abc12.jpeg)

---

<div class="post-metadata">

**Author:** ![wei.hu](https://avatars.discourse-cdn.com/v4/letter/w/d07c76/32.png) [@wei.hu](https://devforum.zoom.us/u/wei.hu)\
**Post date:** [July 24, 2022, 1:29pm UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/8 "2022-07-24T13:29:56Z")

</div>

Hi, Narmada Ravali, thanks for you help, I try it with your example, but got the same error again, Is it because I missed some other configuration?

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/5/8/5814eb2a3f7cc72a8d024070a60a9e008cf6b90e.png)

below is the full code:

```auto
import React from "react";
import Button from "@mui/material/Button";
import zoomSdk from "@zoom/appssdk";
import { IMAGES } from "./constants";

const MY_IMAGE = "https://9bae041b1da7.jp.ngrok.io/assets/1@2x.jpg";

const CameraMode = () => {
    const Start = async () => {
        const configRes = await zoomSdk.config({
            size: { width: 480, height: 360 },
            capabilities: [
                // The following are needed for Layers API.
                // Include any other capabilities your app needs here, too.
                `getRunningContext`,
                `runRenderingContext`,
                `closeRenderingContext`,
                `drawParticipant`,
                `clearParticipant`,
                `drawImage`,
                `clearImage`,
                `drawWebView`,
                `clearWebView`,
                `postMessage`,
                `sendAppInvitationToAllParticipants`,
                `onMessage`,
                `onMyMediaChange`
            ]
        });

        console.log("configRes", configRes);

        const renderingCtx = await zoomSdk.runRenderingContext({ view: "camera" });

        console.log("runRenderingContext returned", renderingCtx);

        function getMyImageData(width, height) {
            const canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;

            const img = new Image(100, 200);
            img.src = MY_IMAGE; // insert any image here

            const ctx = canvas.getContext("2d");

            ctx.drawImage(img, 0, 0, width, height);
            return ctx.getImageData(0, 0, width, height);
        }

        async function testDrawImage() {
            const imageHeight = 100;
            const imageWidth = 500;
            const imageData = getMyImageData(imageWidth, imageHeight);
            await zoomSdk
                .drawImage({
                    imageData: imageData,
                    x: 0,
                    y: 720 - imageHeight,
                    zIndex: 2
                })
                .then((result) => {
                    console.log(result);
                })
                .catch((error) => console.error("Unable to call drawImage ", error));
        }

        testDrawImage();
    };

    return (
        <div>
            <Button
                onClick={() => {
                    Start();
                }}
            >
                Start
            </Button>
            <canvas id="canvas" />
            <img src={MY_IMAGE} style={{ display: "none" }} />
        </div>
    );
};

export default CameraMode;

```

---

<div class="post-metadata">

**Author:** ![coreyhobbs](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/coreyhobbs/32/36605_2.png) [@coreyhobbs](https://devforum.zoom.us/u/coreyhobbs)\
**Post date:** [July 26, 2022, 5:42pm UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/9 "2022-07-26T17:42:47Z")

</div>

Are you using a free NGROK account? Also, are you on MAC?

---

<div class="post-metadata">

**Author:** ![wei.hu](https://avatars.discourse-cdn.com/v4/letter/w/d07c76/32.png) [@wei.hu](https://devforum.zoom.us/u/wei.hu)\
**Post date:** [July 27, 2022, 1:45am UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/10 "2022-07-27T01:45:46Z")

</div>

I use a paid NGROK, on my MAC, the Immersive mode is work for me, and other API can also work, except drawImage in Camera Mode

---

<div class="post-metadata">

**Author:** ![wei.hu](https://avatars.discourse-cdn.com/v4/letter/w/d07c76/32.png) [@wei.hu](https://devforum.zoom.us/u/wei.hu)\
**Post date:** [July 29, 2022, 9:05am UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/11 "2022-07-29T09:05:56Z")

</div>

It is work for me now, thanks everyone 😀

---

<div class="post-metadata">

**Author:** ![narmadaravali](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/narmadaravali/32/39496_2.png) [@narmadaravali](https://devforum.zoom.us/u/narmadaravali)\
**Post date:** [July 29, 2022, 5:41pm UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/12 "2022-07-29T17:41:53Z")

</div>

Hi Wei, what changes did you do? Glad you are unblocked.

---

<div class="post-metadata">

**Author:** ![wei.hu](https://avatars.discourse-cdn.com/v4/letter/w/d07c76/32.png) [@wei.hu](https://devforum.zoom.us/u/wei.hu)\
**Post date:** [July 31, 2022, 3:08am UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/13 "2022-07-31T03:08:08Z")

</div>

Hi Narmada Ravali, I call `zoomSdk.config` and `zoomSdk.runRenderingContext` methods in `useEffect` hook, then draw a image when user select a image. and it can draw success, some code as below:

```auto
// App.tsx
useEffect(() => {
    const initial = async () => {
        if (!isZoomApp) {
            return;
        }

        const configRes = await zoomSdk.config({
            size: { width: 480, height: 360 },
            capabilities: [
                // The following are needed for Layers API.
                // Include any other capabilities your app needs here, too.
                `getRunningContext`,
                `runRenderingContext`,
                `closeRenderingContext`,
                `drawParticipant`,
                `clearParticipant`,
                `drawImage`,
                `clearImage`,
                `drawWebView`,
                `clearWebView`,
                `postMessage`,
                `sendAppInvitationToAllParticipants`,
                `onMessage`,
                `onMyMediaChange`,
                `onReaction`
            ]
        });

        await zoomSdk.runRenderingContext({ view: "camera" });
    };

    initial();
}, []);

useEffect(() => {
    let src = currImg[size];
    if (showOverlays && src) {
        drawImg(src).then(({ imageId }) => {
            drawImgRef.current = imageId;
        });
    } else {
        zoomSdk.clearImage({
            imageId: drawImgRef.current
        });
    }
}, [showOverlays, currImg, size]);

// utils/index.ts
const CANVAS_WIDTH = 1280;
const CANVAS_HEIGHT = 720;

const drawImg = (
    src: string
): Promise<{
    imageId: string;
}> => {
    const canvas = document.createElement("canvas");
    const ctx: CanvasRenderingContext2D = canvas.getContext("2d") as CanvasRenderingContext2D;
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;

    // coordinate reference adjustment
    let scale = -1;
    ctx.translate(canvas.width, 0);
    ctx.scale(scale, 1);

    const img = new Image();
    img.src = src;
    ctx.drawImage(img, 0, 0, img.width, img.height, canvas.width - img.width, 0, img.width, img.height);

    // coordinate reference restoration
    ctx.setTransform(1, 0, 0, 1, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    return zoomSdk.drawImage({
        imageData,
        x: 0,
        y: 0,
        zIndex: 2
    });
};

```

---

<div class="post-metadata">

**Author:** ![soham.gada20](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/soham.gada20/32/49726_2.png) [@soham.gada20](https://devforum.zoom.us/u/soham.gada20)\
**Post date:** [February 1, 2024, 10:17am UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/14 "2024-02-01T10:17:29Z")

</div>

I am facing the same issues can you please share the file where you made these changes or if possible can you please send the github link for this application

---

<div class="post-metadata">

**Author:** ![petercox1002](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/petercox1002/32/49905_2.png) [@petercox1002](https://devforum.zoom.us/u/petercox1002)\
**Post date:** [February 16, 2024, 6:02pm UTC](https://devforum.zoom.us/t/drawimage-in-camera-mode-returning-an-error/72505/15 "2024-02-16T18:02:51Z")

</div>

It seems like there might be an issue with the image source or the rendering context in camera mode. Double-check the image URL, and ensure that the rendering context is properly initialized.