Text on video while share screen showing blur

Zoom Apps
1

@elisa.zoom @MaxM
We are showing donation streamers text when user enables his video and share his screen in our zoom app, but the text is showing blur for users who is seeing it.

streamer-text
streamer-text1422×298 73.7 KB

Is there a way we can show the text clearly. Any help will be highly appreciated.

2

@reyaz.ahmed ,

Greetings and thank you for posting in the Zoom Developer Forum. I’m happy to help here. As a start, can you share how you currently are displaying text on the screen? Are you leveraging the Zoom App layers API by any chance?

3

@donte.zoom Thank you for the reply, Please find below React.Js code which we are using to display text on video:

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

 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(() => {
        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":
        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) => {
       
        setShowStreamLoader(false);
        sendMessage("errorMsg", e);
      });
      return;

  };

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

Please help us to fix this issue.

4

Thanks for sharing the code snippet, @reyaz.ahmed ! To better assist you, could you please provide more details about your setup?

  • Are you experiencing blurry text on all devices and in every meeting, or is it specific to certain scenarios?
  • Does the text start clear and then become blurry, or is it consistently blurry throughout the meeting?
  • What are the specifications of the device you’re using (e.g., laptop model, desktop configuration)?
  • Which browser and version are you using to access the Zoom meeting?
  • Have you tried adjusting any display settings or zoom levels in your browser?

This information will help us pinpoint the cause and provide a more targeted solution for the blurry text overlay problem you’re experiencing.

5

@donte.zoom The text is blurry for the participants who is seeing the screen shared by the host/participant, It is clear to their own screen, Please find below details of our setup:

  • The text is blurry in all meetings for the participants when the screen is shared.
  • The text is consistently blurry.
  • We are seeing this issue in all devices.
  • We are using browser Microsoft edge version: 131.0.2903.51
  • We tried by adjusting zoom level settings but the issue is same.