Unable to join a meeting using React

API and Webhooks
1

When I click join the meeting, it keeps showing the join meet screen

This is what I recorded

https://storage.googleapis.com/yipdotcom-dunda/v1/video/profile/Kvu5dCZv_iShot_2023-06-27_18.37.03_temp.mp4

This is what the API returns


{
    "signature": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZGtLZXkiOiJrQzhtcDIwcjlTb1dVWUZTTHRhcjR5ZUFHY21sYVliNTdVUWYiLCJtbiI6ODMxNzM4NzkyODIsInJvbGUiOjEsImlhdCI6MTY4Nzg2MjExNCwiZXhwIjoxNjg3ODY5MzE0LCJhcHBLZXkiOiJrQzhtcDIwcjlTb1dVWUZTTHRhcjR5ZUFHY21sYVliNTdVUWYiLCJ0b2tlbkV4cCI6MTY4Nzg2OTMxNH0.d9IY4-XwPo9l5HO4_j2-2cadwBtwljXvtEwbZf7z9QY",
    "meetingNumber": 83173879282,
    "userName": "yiper_06",
    "userEmail": "yiper_05@tundatech.com",
    "passWord": "",
    "tk": "",
    "tak": "eyJ0eXAiOiJKV1QiLCJzdiI6IjAwMDAwMSIsInptX3NrbSI6InptX28ybSIsImFsZyI6IkhTMjU2In0.eyJhdWQiOiJjbGllbnRzbSIsInVpZCI6IjJBUE9ocnZsVEtlSXg4a1huQnNfSUEiLCJpc3MiOiJ3ZWIiLCJzayI6IjAiLCJzdHkiOjk5LCJ3Y2QiOiJ1czA2IiwiY2x0IjowLCJleHAiOjE2OTU2MzgxNDIsImlhdCI6MTY4Nzg2MjE0MiwiYWlkIjoiYlhlbGRmNFlSZDI5TEJWR0dFZnhNZyIsImNpZCI6IiJ9.6U3Hli5A08ig9RpZGWTn-UGkQ025liPOhdWIkgIhaS8",
    "role": 1,
    "zoomUserId": "2APOhrvlTKeIx8kXnBs_IA",
    "join_url": "https://us06web.zoom.us/j/83173879282",
    "start_url": "https://us06web.zoom.us/s/83173879282?zak=eyJ0eXAiOiJKV1QiLCJzdiI6IjAwMDAwMSIsInptX3NrbSI6InptX28ybSIsImFsZyI6IkhTMjU2In0.eyJhdWQiOiJjbGllbnRzbSIsInVpZCI6IjJBUE9ocnZsVEtlSXg4a1huQnNfSUEiLCJpc3MiOiJ3ZWIiLCJzayI6IjAiLCJzdHkiOjk5LCJ3Y2QiOiJ1czA2IiwiY2x0IjowLCJtbnVtIjoiODMxNzM4NzkyODIiLCJleHAiOjE2OTU1Mzk3ODUsImlhdCI6MTY4Nzc2Mzc4NSwiYWlkIjoiYlhlbGRmNFlSZDI5TEJWR0dFZnhNZyIsImNpZCI6IiJ9.KQhMYfBGe4VII3Do8PNmttc2wxXU3pO2hOeLti4JqjA",
    "start_time": "2023-06-27T10:30:00.000Z"
}

This is my React code

import { useEffect, useReducer, useState } from "react";

import "./ClientView.css";
import { ZoomMtg } from "@zoomus/websdk";
import events from "../../../api/events";
import { useParams } from "react-router-dom";
import { COURSES_URL } from "../../../properties/Routes";
import { Alert } from "@mui/material";
import { Box } from "@material-ui/core";
import bookings from "../../../api/bookings";

ZoomMtg.setZoomJSLib("https://source.zoom.us/2.13.0/lib", "/av");

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
console.log("000000000000222222");
ZoomMtg.i18n.load("en-US");
ZoomMtg.i18n.reload("en-US");

const initialed = new Map();

const VideoView = () => {
  const { eventId } = useParams();
  const [error, setError] = useState(null);

  const [state, updateState] = useReducer((state, payload) => ({ ...state, ...payload }), {
    sdkKey: "kC8mp20r9SoWUYFSLtar4yeAGcmlaYb57UQf",
    authEndpoint: "",
    meetingNumber: "123456789",
    passWord: "",
    role: 0,
    userName: "React",
    userEmail: "",
    registrantToken: "",
    zakToken: "",
    signature: "",
    tk: "",
    disableInvite: true,
    meetingInfo: ["topic", "host", "mn", "dc", "report"],
    leaveUrl: "",
  });

  useEffect(() => {
    if (eventId) {
      events
        .getSessionDetail(eventId)
        .then(({ data }) => updateState({ leaveUrl: `${window.location.origin}${COURSES_URL}/${data.product.id}` }));
    }
  }, [eventId]);

  useEffect(() => {
    if (!state.leaveUrl || !eventId) {
      return;
    }
    bookings.getZoomSignature(eventId).then(response =>
      updateState({
        authEndpoint: response?.data?.authEndpoint ?? "",
        meetingNumber: response?.data?.meetingNumber ?? "",
        passWord: response?.data?.passWord ?? "",
        role: response?.data?.role ?? 0,
        userName: response?.data?.userName ?? "",
        userEmail: response?.data?.userEmail ?? "",
        registrantToken: response?.data?.registrantToken ?? "",
        zakToken: response?.data?.zakToken ?? "",
        signature: response?.data?.signature ?? "",
        tk: response?.data?.tk ?? "",
      })
    );
  }, [state.leaveUrl, eventId]);

  useEffect(() => {
    if (!state.signature) {
      return;
    }

    if (initialed.get(state.signature)) {
      return;
    }

    initialed.set(state.signature, 1);
    document.getElementById("zmmtg-root").style.display = "block";
    ZoomMtg.init({
      meetingInfo: state.meetingInfo,
      leaveUrl: state.leaveUrl,
      disableInvite: state.disableInvite,
      success: success => {
        ZoomMtg.join({
          ...state,
          error: error => {
            console.log("🚀 ~ file: ClientView.js:90 ~ useEffect ~ error:", error);
          },
          success: success => {
            console.log("🚀 ~ file: ClientView.js:81 ~ ZoomMtg.join ~ success:", success);
          },
        });
      },
      error: error => {
        console.log(error);
      },
    });
  }, [state.userName, state.userEmail, state.signature, state.meetingNumber, state.passWord, state.tk, state, eventId]);

  return (
    <div className="App">
      <link type="text/css" rel="stylesheet" href="/assets/css/main-client.wc_meeting.min.css" />
      <main>
        {error && (
          <Box
            sx={{
              width: "300px",
              margin: "auto",
              height: "100vh",
              display: "flex",
              alignItems: "center",
            }}
          >
            <Alert severity={"error"}>{error.error}</Alert>
          </Box>
        )}
      </main>
    </div>
  );
};

export default VideoView;