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.
6

@donte.zoom It will be really appreciated if you could provide any solution/suggestion to fix this issue.

7

@reyaz.ahmed Thank you for following up on this! We’ve released multiple updates to the Zoom Client that addressed reported Layer API behavior. Can you help us understand what behavior you’re seeing today? It would be helpful if you also updated the information so we can better understand what you’re experiencing. Please share the client version and screenshot or recording as well.

8

@donte.zoom We are using zoom sdk version 0.16.20 and zoom client version is 6.6.6 . Below is recording for the streamer marquee where we can see the scrolling marquee texts are blurred. It will be really appreciated if you could help me to fix this issue.
https://vimeo.com/1131224768/9f5cb3a7b6