Virtual streamer overlay text on camera not showing after zoom update

Zoom Apps
1

We have Zoom app in marketplace i.e, Givent and there is an option to show virtual streamer overlay on camera when we click a button. On button click we are calling runRenderingContext({ view: “camera” }) and drawWebView, this works fine till couple of days earlier after we updated zoom this stops working.

Below is my code:

  useEffect(() => {
    if (
      Object.keys(props.userContext).length &&
      props.dimensions &&
      props.runningContext === "inCamera"
    ) {
      setReadyForCamera(true);
    }
    zoomSdk.onMessage(messageHandler);
    return () => {
      zoomSdk.removeEventListener("onMessage", messageHandler);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.runningContext, props.userContext, props.dimensions]);

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

  }, [readyForCamera]);

  const toggleRenderingContext = () => {

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

  const sendMessage = (message, data) => {
    let msg = { message: message, data: data };
  
    zoomSdk
      .postMessage(msg)
      .then(() => {
        sessionStorage.setItem('showvirtual',true);
        setShowOverlay(true);
        setShowStreamLoader(false);
      })
      .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":
       
        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(() =>"")
      .catch((e) => {
     
        setShowStreamLoader(false);
        sendMessage("errorMsg", e);
      });
      return;

  };

  const closeRenderingContext = () => {
    zoomSdk
      .closeRenderingContext()
      .then((ctx) => {
        setShowOverlay(false);
        sessionStorage.setItem('showvirtual',false);
      })
      .catch((e) => {
        console.log(e);
        setShowStreamLoader(false);
      });
  };

We call toggleRenderingContext function on button click, Please help us to fix this issue.

Zoom client version: 6.7.0
@zoom/appssdk version : 0.16.36

1 Like