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

**URL:** <https://community.sendbird.com/t/typeerror-cannot-read-properties-of-null-reading-readystate/6670>\
**Category:** Miscellaneous\
**Tags:** sendbird-call, react-js\
**Created:** [February 28, 2023, 2:38am UTC](https://community.sendbird.com/t/typeerror-cannot-read-properties-of-null-reading-readystate/6670 "2023-02-28T02:38:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ashish\_Kumar](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/ashish_kumar/32/3656_2.png) [@Ashish\_Kumar](https://community.sendbird.com/u/Ashish_Kumar)\
**Post date:** [February 28, 2023, 2:38am UTC](https://community.sendbird.com/t/typeerror-cannot-read-properties-of-null-reading-readystate/6670/1 "2023-02-28T02:38:00Z")

</div>

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
  
  

  

  
);  
};