simple-peer.js?v=0b318801:3641 Uncaught TypeError: Cannot read properties of undefined (reading 'call')
Author: sanmobd111Created Jan 5, 2026Updated Jan 5, 2026
Why I'm getting the Error when the stream is exist?
`
import { useEffect, useRef, useState } from "react";
import { FaPhone } from "react-icons/fa6";
import { MdOutlineAssignment } from "react-icons/md";
import Peer from "simple-peer";
import io from "socket.io-client";
const socket = io.connect('http://localhost:5000')
function App() {
const [me, setMe] = useState("")
const [stream, setStream] = useState()
const [receivingCall, setReceivingCall] = useState(false)
const [caller, setCaller] = useState("")
const [callerSignal, setCallerSignal] = useState()
const [callAccepted, setCallAccepted] = useState(false)
const [idToCall, setIdToCall] = useState("")
const [callEnded, setCallEnded] = useState(false)
const [name, setName] = useState("")
const myVideo = useRef()
const userVideo = useRef()
const connectionRef = useRef()
useEffect(() => {
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
setStream(stream)
myVideo.current.srcObject = stream
})
socket.emit("me")
socket.on("me", (id) => {
setMe(id)
})
socket.on("callUser", (data) => {
setReceivingCall(true)
setCaller(data.from)
setName(data.name)
setCallerSignal(data.signal)
})
}, [])
const callUser = (id, stream) => {
console.log({
initiator: true,
trickle: false, // It's good practice to add this
stream: stream
})
const peer = new Peer({
initiator: true,
trickle: false, // It's good practice to add this
stream: stream
});
peer.on("signal", (data) => {
socket.emit("callUser", {
userToCall: id,
signalData: data,
from: me,
name: name
});
});
peer.on("stream", (stream) => {
userVideo.current.srcObject = stream;
});
socket.on("callAccepted", (signal) => {
setCallAccepted(true);
peer.signal(signal);
});
connectionRef.current = peer;
};
const answerCall = () => {
setCallAccepted(true)
const peer = new Peer({
initiator: false,
trickle: false,
stream: stream
})
peer.on("signal", (data) => {
socket.emit("answerCall", { signal: data, to: caller })
})
peer.on("stream", (stream) => {
userVideo.current.srcObject = stream
})
peer.signal(callerSignal)
connectionRef.current = peer
}
const leaveCall = () => {
setCallEnded(true)
connectionRef.current.destroy()
}
const handleCopy = (text) => {
console.log(text)
navigator.clipboard.writeText(text);
alert("Copied!");
};
return (
<>
</>
)
}
export default App
`
Zoomish
{stream && }
{callAccepted && !callEnded ?
:
null}
setName(e.target.value)}
style={{ marginBottom: "20px" }}
/>
setIdToCall(e.target.value)}
/>
{callAccepted && !callEnded ? (
) : (
)}
{idToCall}
{receivingCall && !callAccepted ? (
) : null}
{name} is calling...
Source: feross/simple-peer