SIP.js icon indicating copy to clipboard operation
SIP.js copied to clipboard

Reconnect to the last call

Open minhtruong92 opened this issue 1 year ago • 3 comments

Hi all, I am newbie with WebRTC, I am using SIP.JS to make outbound/inbound call in Web. It works well but if user refresh the browser, I don't know how to reconnect last call session with SIP.JS

I am using Asterisk 18, SIP.JS 0.21.2

minhtruong92 avatar Apr 17 '24 07:04 minhtruong92

can you provide me code for reciver side like i create reciver side but its not get any invite

SIP Calling Receiver

SIP Calling Receiver

<script src="https://cdnjs.cloudflare.com/ajax/libs/sip.js/0.20.0/sip.min.js"></script>
<script>
  let userAgent;
  let currentSession;

  const socket = new WebSocket("ws://localhost:8080");

  socket.onopen = () => {
    console.log("WebSocket connected");
  };

  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log("Received message:", data);

    if (data.event === "incoming_call") {
      document.getElementById("callModal").style.display = "block";
    } else if (data.event === "endCall") {
      endCall();
    }
  };

  async function answerCall() {
    if (!userAgent) {
      try {
        const uri = new SIP.URI(
          "sip",
          "UserB",
          "recieverside.sip.us1.twilio.com"
        );

        const sipConfig = {
          uri: uri,
          transportOptions: {
            wsServers: "ws://localhost:8080",
          },
          authorizationUser: "user",
          password: "password",
          delegate: {
            onInvite,
          },
        };

        console.log("sipConfig", sipConfig);

        userAgent = new SIP.UserAgent(sipConfig);
        //await userAgent.start();
        console.log("userAgent", userAgent);

        document.getElementById("callModal").style.display = "none";
        socket.send(JSON.stringify({ event: "accepted" }));
      } catch (error) {
        console.error("Error accessing user media:", error);
      }
    }
  }

  function onInvite(invitation) {
    const stream = navigator.mediaDevices.getUserMedia({
      audio: true,
      video: false,
    });
    console.log("Incoming call invitation received:", invitation);

    // Handle incoming call acceptance
    try {
      invitation.accept({
        sessionDescriptionHandlerOptions: {
          constraints: {
            stream: stream,
          },
        },
      });

      console.log("Call accepted successfully.");

      // Attach the incoming audio stream to an audio element
      const remoteAudio = document.getElementById("remoteAudio");
      remoteAudio.srcObject = invitation.remoteMediaStream;
    } catch (e) {
      console.error("Error accepting call:", e);
    }
  }

  function rejectCall() {
    // Hide the call modal after rejecting
    document.getElementById("callModal").style.display = "none";
    socket.send(JSON.stringify({ event: "rejected" }));
  }
</script>

thanossOp avatar May 09 '24 07:05 thanossOp

Hey @minhtruong92, have you managed to solve this?

tomisykora avatar Apr 10 '25 16:04 tomisykora

Hi @tomisykora

The issue have not resovled yet. If user refresh the page, our call will be interupted

minhtruong92 avatar Apr 11 '25 03:04 minhtruong92