Notworking properly the connection.

[azebuji]

Hello everyone! 😃

I'm encountering an issue with my peer-to-peer call functionality in a repository using PeerJS.

I'm facing a problem where I have a call between two users, where one of them is logged in, and the other is just a client who doesn't need an account. The goal is for the logged-in user to assist the non-logged-in user by starting a streaming call. When I test this locally, it works most of the time, about 98% of the time. The connection is established, and they can exchange their screens and microphone data. However, when I deploy it to the server, it doesn't work properly. Sometimes it works, sometimes it doesn't. More than 50% of the time, only one of the peers can connect. Sometimes the other peer can share their screen, sometimes neither of them can share their screen and microphone.

The expected behavior is that when both users enter the call screen, they should automatically share their microphones with each other, and when they want, they should be able to share their screens.

I'll provide the source code for the component, but I won't be able to share the repository as it's private. However, I can share the component's source code.

[Source code for the component goes here]

`import { faArrowUp, faComments, faCommentSlash, faMicrophone, faMicrophoneSlash, faShare, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { database } from "faker";
import { Peer } from "peerjs";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Alert, Button, Col, Row } from "react-bootstrap";
import { useNavigate } from "react-router-dom";

import { customConfig } from "../../../beans/turnAndStunServers";
//import Peer, { SignalData } from 'simple-peer';

import Avatar from "../../../components/lists/Avatar";
import { baseURL } from "../../../utils/axios";
import { generateId } from "../../../utils/functions/generateRandomId";
import useSocket from "../../../utils/hooks/useSocket";
import useToken from "../../../utils/hooks/useToken";
import { SupportTicketChat } from "../interfaces/ticket";

interface MainChatStreamProps {
ticketData: SupportTicketChat;
ticket: string;
setCallEnded: Function;
setIsChatVisible: React.Dispatch<React.SetStateAction>;
isChatVisible: boolean;
}
const MainChatStream = ({ ticketData, ticket, setCallEnded, setIsChatVisible, isChatVisible }: MainChatStreamProps) => {
const { socket } = useSocket();
const { user } = useToken();
const navigate = useNavigate();

const [stream, setStream] = useState();
const [isAudioShared, setIsAudioShared] = useState(true);
const [streamRemoto, setStreamRemoto] = useState();
const [isSharing, setIsSharing] = useState(false);
const [peer, setPeer] = useState<Peer | null>(null);
const localVideo = useRef(null);
const remoteVideo = useRef(null);
const [myId, setMyId] = useState<string | undefined>(generateId(6));
const [theirId, setTheirId] = useState('');
const [end, setEnd] = useState(false);

const handleFinaly = useCallback(async () => {

await closeStream().then(() => {
  setEnd((prev) => !prev);
});

if (user) {
  socket?.emit('attendantClosedTicket', ticket);
  socket?.emit('updateTicketForPending', ticket);
  navigate("/status");
} else {
  socket?.emit('clientClosedTicket', ticket);
  setCallEnded(true);
  navigate("/atendimento/chat/" + ticket);
}

}, [socket]);

useEffect(() => {
//Esse useEffect é o efeito colateral do handleFinaly
//useEffect para fechar a stream quando o atendimento finalizar,
//pois quando o componente desmonta ele não finaliza a chamada
//dessa forma ele finaliza a stream ao desmontar o componente.

return () => {
  if (end) {
    console.log('entro aqui')
    closeStream();
  }
}

}, [end])

useEffect(() => {
if (user) {
socket?.on('signalForAttendant' + ticket, () => {
handleFinaly()
})
} else {
socket?.on('signalForClient' + ticket, () => {
handleFinaly()
})
}

return () => {
  if (user) {
    socket?.off('signalForAttendant' + ticket)
  } else {
    socket?.off('signalForClient' + ticket)
  };
}

}, [])

useEffect(() => {

window.addEventListener("beforeunload", handleFinaly);

return () => {
  window.removeEventListener("beforeunload", handleFinaly);
}

});

useEffect(() => {
if (ticketData.status !== 'OPEN') {
handleFinaly();
}
}, [])

useEffect(() => {

const videoTrack = stream?.getVideoTracks();

if (isAudioShared && !videoTrack?.length) {
  navigator.mediaDevices.getUserMedia({ audio: isAudioShared }).then(function (audioStream) {

    if (localVideo.current && audioStream) {
      localVideo.current.srcObject = audioStream
    }
    setStream(audioStream);
  }).catch((error) => {
    console.error(error)
  })
}

}, [])

const shareStream = () => {

const options = {
  video: { facingMode: "user" }
};

if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
  alert("A API de captura de tela não está disponível neste navegador.");
  return;
}
if (!isSharing) {
  navigator.mediaDevices.getDisplayMedia(options).then(function (screenStream) {

    const videoTracks = screenStream.getVideoTracks();
    const audioTracks = stream ? stream.getAudioTracks() : [];

    const mergedStream = new MediaStream([...videoTracks, ...audioTracks]);

    // Definir o novo stream como o stream atual
    setStream(mergedStream);

    if (localVideo.current && mergedStream) {
      localVideo.current.srcObject = mergedStream
    }
  })
    .catch((error) => {
      console.log(error);
      setIsSharing(false);
      console.error("Erro ao compartilhar tela:", error);
    });
} else {
  closeStream(true)
}

setIsSharing(!isSharing);

};

useEffect(() => {
if (myId && ticketData.status === "OPEN") {
if (!peer) {
setPeer(new Peer(myId, { secure: true, ...customConfig }));
}
if (user) {
socket?.emit("sendIdAttendant", {
uuidSupportTicket: ticket,
id: myId
});

    socket?.on('getIdClient-' + ticket, ({ id }) => {
      if (!theirId) {
        setTheirId(id);
      }
    })
  } else {
    socket?.emit("sendIdClient", {
      uuidSupportTicket: ticket,
      id: myId
    });

    socket?.on('getIdAttendant-' + ticket, ({ id }) => {
      if (!theirId) {
        setTheirId(id);
      }
    });
  }
}

}, [myId]);

useEffect(() => {
if (theirId && ticketData.status === "OPEN") {

  if (peer) {

    peer.on('disconnected', (currentId) => {
      // handleFinaly()
    })

    peer.on('close', () => {
      //  handleFinaly()
    })

    peer.on('error', (error) => {
      // handleFinaly()
      console.log("erro gerado:", error)
    })

  }
}

}, [peer, myId, theirId])

useEffect(() => {
if (peer && ticketData.status === "OPEN") {
peer.on('call', call => {
call.answer(stream);
call.on('stream', userVideoStream => {
// When we recieve their stream
setStreamRemoto(userVideoStream)
})
call.on('close', () => {
setStreamRemoto(undefined);
})
})
}
}, [peer]);

useEffect(() => {
if (peer && stream && theirId) {
const call = peer.call(theirId, stream); // Call the user who just joined

  call.on('stream', userVideoStream => {

    setStreamRemoto(userVideoStream)
    //if (userVideo.current) userVideo.current.srcObject = userVideoStream;
  })
  // If they leave, remove their video
  call.on('close', () => {
    if (remoteVideo.current) remoteVideo.current.srcObject = null
  })
}

}, [theirId, stream])

useEffect(() => {

if (remoteVideo.current && streamRemoto) remoteVideo.current.srcObject = streamRemoto;
if (!streamRemoto?.active && remoteVideo.current) {

  remoteVideo.current.srcObject = null
}

}, [streamRemoto]);

const handleStreamEnded = () => {
if (ticketData.status === "OPEN") {
closeStream()
setIsSharing((prevVal) => !prevVal); // Atualize o estado, se necessário
}
};

async function closeStream(justVideo?: boolean) {
if (stream) {
if (justVideo) {
const tracksVideo = stream.getVideoTracks();
const tracksAudio = stream.getAudioTracks();
tracksVideo.forEach((trackVideo) => trackVideo.stop());
setStream(new MediaStream([...tracksAudio]))
} else {
const tracks = stream.getTracks();
tracks.forEach((track) => track.stop());
setStream(undefined);
if (localVideo?.current) {
localVideo.current.srcObject = null;
}
}

  if (peer) {
    peer.call(theirId, stream).emit('stream', stream);
  }
}

}

useEffect(() => {
if (stream && stream.active) {
console.log(stream)
stream.getTracks()[0].addEventListener("ended", handleStreamEnded);
const videoTracks = stream?.getVideoTracks();
if (videoTracks && videoTracks.length) {
videoTracks[0].addEventListener('ended', handleStreamEnded)
}
}
return () => {
if (stream && stream?.active) {
stream.getTracks()[0].removeEventListener("ended", handleStreamEnded);
}
const videoTracks = stream?.getVideoTracks();
if (videoTracks && videoTracks.length) {
videoTracks[0].removeEventListener('ended', handleStreamEnded)
}
};
}, [stream]);

useEffect(() => {

if (stream?.active && ticketData.status === "OPEN") {

  const audioTracks = stream.getAudioTracks();

  audioTracks.forEach((track) => {
    track.enabled = isAudioShared
  });
}

}, [isAudioShared]);

/useEffect(() => {
if (ticketData.status === "OPEN") {
stream && setIsSharing(Boolean(stream.active));
}
}, [shareStream]);/

const MyInterface = () => (

<Button variant="gray" size="lg" className="mt-2" onClick={() => { setIsAudioShared(!isAudioShared); }}>
<FontAwesomeIcon icon={isAudioShared ? faMicrophone : faMicrophoneSlash} />

<Button
className="mt-2"
variant="gray"
onClick={() => { setIsChatVisible((prevVal) => !prevVal) }}
>
<FontAwesomeIcon icon={isChatVisible ? faCommentSlash : faComments} />

      <Button
        variant="success"
        size="lg"
        className="mt-2"
        onClick={shareStream}
      >
        <FontAwesomeIcon icon={faShare} />  {isSharing ? "Parar compartilhamento" : "Compartilhar tela"}
      </Button>



      <Button variant="danger" size="lg" className="mt-2" onClick={handleFinaly}>
        <FontAwesomeIcon icon={faTimesCircle} /> Finalizar atendimento
      </Button>
    </div>
  </Col>
</Row >

);

return ticketData.status === "OPEN" ? (

<React.Fragment>
  <Col>

    <Row className="mx-n2">

      <Col sm={12} className={"chat-video"}>

        <p>{user ? "Tela do cliente: " + ticketData.customerName : "Tela do atendente"}</p>
        {remoteVideo ?
          <video
            ref={remoteVideo}
            playsInline
            autoPlay={true}
            muted={false}
            className={`w-100`}
          />

          : null}

      </Col>
    </Row>
    <Row>
      <Col className=" mt-2" sm={6}>
        <div className="user-box text-center">
          <Avatar
            src={
              ticketData.image
                ? baseURL + "/uploads/photos/" + ticketData.image
                : ""
            }
            name={ticketData.attendantName}
            big={true}
          />
          <p className="lead mb-0 mt-2">
            <b>
              {ticketData.attendantName} - Vendedor {user ? "(você)" : ""}
            </b>
          </p>
        </div>
        {!!user && <MyInterface />}
      </Col>
      <Col className="px-2 mt-2" sm={6}>
        <div className="p-2 user-box text-center">
          <Avatar src="" name={ticketData.customerName} big={true} />
          <p className="lead mb-0 mt-2">
            <b>
              {ticketData.customerName} - Cliente {user ? "" : "(você)"}
            </b>
          </p>
        </div>
        {!user && <MyInterface />}
      </Col>
    </Row>

  </Col>

</React.Fragment>

) : null;
}

export default MainChatStream;

`

I hope this helps clarify my issue with PeerJS in my repository. Any guidance or suggestions on how to improve the reliability of the peer-to-peer connections when deployed to a server would be greatly appreciated!