TypeError: Cannot read properties of null (reading 'readyState')

,
1

import { useState, useEffect, use } from “react”;
import SendBirdCall, { currentUser } from “sendbird-calls”;

export const SendBirdCallComponent = () => {
// State to hold the current call object
let currentCall: SendBirdCall.DirectCall | null;

// Function to connect to Sendbird Calls
useEffect(() => {
const connect = async () => {
// Init Sendbird Calls with your application Id
if (typeof SendBirdCall === “undefined”) {
console.error(“SendBirdCall instance not initialized”);
return;
}
SendBirdCall.init(“7954483D-2F32-48AE-8920-B9C290632911”);

  // Init Sendbird Calls with your application Id

  // Ask for video and audio permission
  await askBrowserPermission();
  // Authorize user
  await authorizeUser();
};
connect();

});

// Function to ask for audio and video permission
const askBrowserPermission = () => {
// eslint-disable-next-line react-hooks/rules-of-hooks
SendBirdCall.useMedia({ audio: true, video: true });
};

// Function to authorize the user
const authorizeUser = () => {
const authOption = {
userId: “63fcb1b2ec782b284a654c41”,
accessToken: “b31429d3919c9d91dc939580cf3f2de65d463caa”,
};
return new Promise((resolve, reject) => {
SendBirdCall.authenticate(authOption, (res, error) => {
if (error) {
console.dir(error);
alert(Error authenticating user! Is your Access / Session token correct? This user exists?);
reject(error);
} else {
resolve();
connectToWebsocket();
}
});
});
};

// Function to connect to websockets and wait for calls
const connectToWebsocket = async () => {
await SendBirdCall.connectWebSocket()
.then(() => {
waitForCalls();
makeCall();
console.log(“connected to the socket server”);
})
.catch((err) => {
console.log(err, “ashish”);
alert(Failed to connect to Socket server);
});
};

// Function to wait for incoming calls
const waitForCalls = () => {
SendBirdCall.addListener(“unique_handler_id_my”, {
onRinging: async (call) => {
// A call has arrived
call.onEstablished = (call) => {
currentCall = call;
};

    call.onConnected = (call) => {
      currentCall = call;
    };

    call.onEnded = (call) => {
      currentCall = call;
    };
    // Let's accept this call
    const acceptParams = {
      callOption: {
        // localMediaView: document.getElementById("local_video_element_id"),
        // remoteMediaView: document.getElementById("remote_video_element_id"),
        audioEnabled: true,
        videoEnabled: true,
      },
    };
    try {
      await call.accept(acceptParams);
    } catch (err) {
      console.dir(err);
      alert("Failed to accept call");
    }
  },
});

};

// Function to make a call to another user
const makeCall = async () => {
const userId = prompt(“ENTER USER ID TO CALL”);
if (!userId) {
return;
}

const dialParams = {
  userId,
  isVideoCall: true,
  callOption: {
    // localMediaView: document.getElementById("local_video_element_id"),
    // remoteMediaView: document.getElementById("remote_video_element_id"),
    videoEnabled: true,
    audioEnabled: true,
  },
};

const call = await SendBirdCall.dial(dialParams, (call, error) => {
  if (error) {
    console.dir(error);
    alert("Dial Failed!");
  } else {
    console.log("Dial Success", call);
    return call;
  }
});

call.onEstablished = (call) => {
  currentCall = call;
  console.log("establish")
  // Hide / Show some buttons
  // document.getElementById("butMakeCall").style.display = "none";
  // document.getElementById("butEndCall").style.display = "inline-block";
};

/**
 * Once the call is connected,
 * run this logic
 */
call.onConnected = (call) => {
  console.log("onConnected");
};
/**
 * Once the call ended,
 * run this logic
 */
call.onEnded = (call) => {
  console.log("onEnded");
  currentCall = null;
  // Hide / Show some buttons
  // document.getElementById("butMakeCall").style.display = "inline-block";
  // document.getElementById("butEndCall").style.display = "none";
};
/**
 * Remote user changed audio settings
 * (analysys not covered in this tutorial)
 */
call.onRemoteAudioSettingsChanged = (call) => {
  console.log("Remote user changed audio settings");
};
/**
 * Remote user changed audio settings
 * (analysys not covered in this tutorial)
 */
call.onRemoteVideoSettingsChanged = (call) => {
  console.log("Remote user changed video settings");
};

};

function endCall() {
if (!currentCall) {
return;
}
currentCall.end();
}

return (


Sendbird Calls Demo




Make Call

<button id=“butEndCall” onClick={endCall} style={{ display: “none” }}>
End Call



Incoming Call



<button
id=“butAcceptCall”
onClick={waitForCalls}
style={{ display: “none” }}
>
Accept Call

<button
id=“butRejectCall”
onClick={endCall}
style={{ display: “none” }}
>
Reject Call



Outgoing Call





);
};