Unable to see virtual text on Camera on Mobile devices

Zoom Apps
1

@MaxM @elisa.zoom
Hi, We are creating a Zoom app, In which we are rendering some content on Camera/Video , It is working fine when we open our app in Zoom Desktop Client like below screenshot:

strm
strm1918×1000 158 KB

But when we open the same on Mobile Device and enabling our camera the content is not rendering.
Please help us to fix this issue.

2

This sounds like it could have to do with the scaling or XY coordinates of where you are attempting to draw the image over the video. Are you able to draw anything on the center of the s screen on mobile?

Can you share a code snippet of how you are drawing this image on desktop and mobile?

3

Hi @MaxM Below is the code snippet for drawing content on video for both desktop and Mobile.

toggleRenderingContext is a function called when button click to show the content on video,

 useEffect(() => {
    if (props.runningContext === "inCamera") {
      setReadyForCamera(true);
    }
    zoomSdk.onMessage(messageHandler);
    return () => {
      zoomSdk.removeEventListener("onMessage", messageHandler);
    };
    
  }, [props.runningContext]);

  useEffect(() => {
   
    if (readyForCamera) {
      sendMessage("cameraModeLoaded", "");
    }

  }, [readyForCamera]);

 const toggleRenderingContext = () => {

    setShowStreamLoader(true);
    zoomSdk
      .runRenderingContext({
        view: "camera",
      })
      .then(() => {})
      .catch((e) => {
        closeRenderingContext();
      
      });
  };

  const sendMessage = (message, data) => {
    let msg = { message: message, data: data };
   
    zoomSdk
      .postMessage(msg)
      .then(() => {
      
        setShowOverlay(true);
      
      })
      .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":
        console.log("received error message", msg.data);
        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(() => console.log("Drew Participant"))
      .catch((e) => {
        sendMessage("errorMsg", e);
      });
      return;

  };

Tried to change X,Y coordinated in drawWebview() to 540,960 then nothing is showing on Desktop and Mobile.
When changes X,Y coordinates in drawParticipant() to 540,960 then in Desktop showing the content but video goesoff and showing all white background and on Mobile nothing shows.

If we Keep as it is i.e, X,Y as 0,0 then working fine on Desktop., but nothing showing on Mobile.

Please help to fix this issue.

4

@MaxM Could you please help us to fix the issue!

5

@MaxM @elisa.zoom Could you please help us to fix this issue.