DOMException: Failed to set local answer sdp: Called in wrong state: kStable

[meghq]

I am trying to run the webRTC code which i have mentioned below, it is working fine when i am connecting with two devices using same network. But it is not connecting when the devices are in different networks and i am getting DOM Exception. please help me to fix it.

// Generate random room name if needed if (!location.hash) { location.hash = Math.floor(Math.random() * 0xFFFFFF).toString(16); } const roomHash = location.hash.substring(1);

// TODO: Replace with your own channel ID const drone = new ScaleDrone('yiS12Ts5RdNhebyM'); // Room name needs to be prefixed with 'observable-' const roomName = 'observable-' + roomHash; const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] }; let room; let pc;

function onSuccess() {}; function onError(error) { console.error(error); };

drone.on('open', error => { if (error) { return console.error(error); } room = drone.subscribe(roomName); room.on('open', error => { if (error) { onError(error); } }); // We're connected to the room and received an array of 'members' // connected to the room (including us). Signaling server is ready. room.on('members', members => { console.log('MEMBERS', members); // If we are the second user to connect to the room we will be creating the offer const isOfferer = members.length === 2; startWebRTC(isOfferer); }); });

// Send signaling data via Scaledrone function sendMessage(message) { drone.publish({ room: roomName, message }); }

function startWebRTC(isOfferer) { pc = new RTCPeerConnection(configuration);

// 'onicecandidate' notifies us whenever an ICE agent needs to deliver a // message to the other peer through the signaling server pc.onicecandidate = event => { if (event.candidate) { sendMessage({'candidate': event.candidate}); } };

// If user is offerer let the 'negotiationneeded' event create the offer if (isOfferer) { pc.onnegotiationneeded = () => { pc.createOffer().then(localDescCreated).catch(onError); } }

// When a remote stream arrives display it in the #remoteVideo element pc.ontrack = event => { const stream = event.streams[0]; if (!remoteVideo.srcObject || remoteVideo.srcObject.id !== stream.id) { remoteVideo.srcObject = stream; } };

navigator.mediaDevices.getUserMedia({ audio: true, video: true, }).then(stream => { // Display your local video in #localVideo element localVideo.srcObject = stream; // Add your stream to be sent to the conneting peer stream.getTracks().forEach(track => pc.addTrack(track, stream)); }, onError);

// Listen to signaling data from Scaledrone room.on('data', (message, client) => { // Message was sent by us if (client.id === drone.clientId) { return; }

if (message.sdp) {
  // This is called after receiving an offer or answer from another peer
  pc.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
    // When receiving an offer lets answer it
    if (pc.remoteDescription.type === 'offer') {
      pc.createAnswer().then(localDescCreated).catch(onError);
    }
  }, onError);
} else if (message.candidate) {
  // Add the new ICE candidate to our connections remote description
  pc.addIceCandidate(
    new RTCIceCandidate(message.candidate), onSuccess, onError
  );
}

}); }

function localDescCreated(desc) { pc.setLocalDescription( desc, () => sendMessage({'sdp': pc.localDescription}), onError ); }

[Pierre-Demessence]

Hello,

As far as I know, the issues comes from Chrome Desktop who's sending the request twice. Using another browser fixed the issue for me.

[kirusiya]

i have same problem, how con i fixed

[AlekRuzic]

I currently have the exact same problem, I'll try using a different browser when I get a chance to test across different networks again

[rawars]

Dude, I had the same problem and you can fix it by deploying the signaling server on port 8080.

Also I had to add these iceServers:

const config = {
  'iceServers': [
      { url: 'stun:stun1.l.google.com:19302' },
      {
          url: 'turn:numb.viagenie.ca',
          credential: 'muazkh',
          username: 'webrtc@live.com'
      }
  ]
}
const peerConnection = new RTCPeerConnection(config);

I managed to deploy with the fixes on an amazon server.

[rsingh2083]

@rawars How do I deploy it on port 8080 ? Where is the option to change port ? Im running on my localhost desktop and trying to connect to it from laptop.

[DanielNogueraDevelopment]

Going to port 8080 worked for me!

[rawars]

Hello, for those who still do not work even changing the port to 8080, it is because they need to go through the configuration, the ice servers:

const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]} const peerConnection = new RTCPeerConnection(configuration);

[sehdev]

@rawars how to deploy signaling server on port 8080?

[rawars]

@rawars how to deploy signaling server on port 8080?

In Amazon lightsail:

const express = require('express');
const socketIO = require('socket.io');

const http = require('http');
const https = require('https');
const path = require('path');
const fs = require('fs');

var PatientsSockets = [];
var DoctorsSockets = [];

const DEFAULT_PORT = 8080;

const app = express()

var Server = null;

Server = https.createServer({
    key: fs.readFileSync('/etc/letsencrypt/live/domain.com/privkey.pem'),
    cert: fs.readFileSync('/etc/letsencrypt/live/domain.com/fullchain.pem'),
}, app);

var io = socketIO(Server);

app.use(express.static(path.join(__dirname, "public")));

io.on("connection", socket => {

    socket.on("new-paciente", (data) => {
        const existingSocket = PatientsSockets.find(existingSocket => existingSocket.socket === socket.id);
        if (!existingSocket) {

            PatientsSockets.push({
                names: data.names,
                surnames: data.surnames,
                socket: socket.id,
                role: 'PATIENT'
            });
            socket.broadcast.emit("update-list-patients", {
                patients: PatientsSockets
            });

        }
    });

    socket.on("new-doctor", (data) => {
        const existingSocket = DoctorsSockets.find(existingSocket => existingSocket.socket === socket.id);
        if (!existingSocket) {
            DoctorsSockets.push({
                socket: socket.id,
                role: 'DOCTOR'
            });
        }
    });

    socket.on("make-answer", data => {
        socket.to(data.to).emit("answer-made", {
            socket: socket.id,
            answer: data.answer
        });
    });

    socket.on("call-patient", (data) => {
        socket.to(data.to).emit("notify-call", {
            offer: data.offer,
            socket: socket.id
        });
    });

    socket.on("load-patients", (data) => {
        socket.emit("update-list-patients", {
            patients: PatientsSockets
        });
    });

    socket.on("disconnect", () => {
        PatientsSockets = PatientsSockets.filter(existingSocket => existingSocket.socket !== socket.id);
        socket.broadcast.emit("remove-user", {
            disconnected: socket.id,
            patients: PatientsSockets
        });
    });
});

Server.listen(DEFAULT_PORT, () => {
    console.log('HTTPS Server running on port ' + DEFAULT_PORT);
});