WebSDK in not responsive, how can I fix this?

[ravi.gupta]

Hello there,

I’m trying to implement my zoom webSDK in my next.js v13 project. the Client view of zoom web SDK is working fine on desktop view it is not responsive in mobile view. I’ve test the responsiveness of my app on inspect mode, poco X3 android mobile, and iPhone 13 mini. but the it is not working properly. Let me show you my code.

/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react-hooks/rules-of-hooks */
"use client";
import { RootState } from "@/app/store";
import axios from "axios";
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { ZoomMtg } from "@zoomus/websdk";
interface IParams {
    meetingId?: string;
}

const page = ({ params }: { params: IParams }) => {
    const currentUser = useSelector((state: RootState) => state.currentUser);
    const [participants, setParticipants] = useState([]);
    const [participantsCount, setParticipantsCount] = useState(0);
    const [currentZoomUser, setCurrentZoomUser] = useState<any>({});
    const { meetingId } = params;
    const [meetingData, setMeetingData] = useState<any>({});
    const [muted, setMuted] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const leaveUrl = `https://zoom-meetings.vercel.app/sba-meetings`;
    const ref = useRef<HTMLDivElement>(null);
    const [disabled, setDisabled] = useState<{
        action?: string;
        status?: boolean;
    }>({});

    const fetchData = (meetingObjId?: string) => {
        setIsLoading(true);
        axios
            .get(
                `${process.env.NEXT_PUBLIC_SUB_PREFIX}/meetings/meeting-data/${meetingObjId}`
            )
            .then((result) => {
                setMeetingData(result.data);
                startMeeting(
                    result.data.meetingId,
                    result.data.meetingEncryptedPassword
                );
                const joinMeetingButton = document.getElementById("join-btn");
                joinMeetingButton?.click();
            })
            .catch((error) => {
                toast({
                    title: "Opps!",
                    message: error?.response?.data
                        ? error?.response?.data
                        : "Sorry, something went wrong!",
                    type: "error",
                });
            });
    };

    const startMeeting = async (meetingId: string, meetingPassword: string) => {
        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareWebSDK();

        ZoomMtg.generateSDKSignature({
            meetingNumber: meetingId,
            role: "1",
            sdkKey: process.env.NEXT_PUBLIC_SDK_KEY
                ? process.env.NEXT_PUBLIC_SDK_KEY
                : "",
            sdkSecret: process.env.NEXT_PUBLIC_SDK_SECRET
                ? process.env.NEXT_PUBLIC_SDK_SECRET
                : "",
            success: function (signature: any) {
                ZoomMtg.showInviteFunction({
                    show: false,
                });
                ZoomMtg.init({
                    leaveUrl: leaveUrl,
                    isSupportAV: true,
                    videoHeader: false,
                    videoDrag: false,
                    success: function (data: any) {
                        ZoomMtg.join({
                            meetingNumber: `${meetingId}`,
                            signature: `${signature.result}`,
                            sdkKey: `${process.env.NEXT_PUBLIC_SDK_KEY}`,
                            userName: currentUser.name ? `${currentUser.name}` : "unknown",
                            userEmail: currentUser.zoomId ? `${currentUser.zoomId}` : "",
                            passWord: `${meetingPassword}`,
                            tk: "",
                            success: function (data: any) {
                                ZoomMtg.getCurrentUser({
                                    success: (res: any) => {
                                        setCurrentZoomUser(res.result.currentUser);
                                    },
                                    error: (error: any) => {
                                        console.log("error is: ", error);
                                    },
                                });
                                setIsLoading(false);
                            },
                            error: function (error: any) {
                                // todo ====>
                            },
                        });
                    },
                    error: function (error: any) {
                        // todo ====>
                    },
                });
            },
            error: function (error: any) {
                // todo ====>
            },
        });
    };

    useEffect(() => {
        fetchData(meetingId);
        ZoomMtg.setZoomJSLib("https://source.zoom.us/lib", "/av");
    }, [meetingId]);

   
    return (
        <div>                    
        </div>
    );
};

export default page;