无法设置远程应答 sdp：在错误状态下调用：稳定

Question

我正在尝试使用 socket.io 编写一个 WebRTC 应用程序。

信令服务器是用python写的，看起来像这样。

import socketio
import uvicorn
from starlette.applications import Starlette

ROOM = 'room'


sio = socketio.AsyncServer(async_mode='asgi', cors_allowed_origins='*')
star_app = Starlette(debug=True)
app = socketio.ASGIApp(sio, star_app)


@sio.event
async def connect(sid, environ):
    await sio.emit('ready', room=ROOM, skip_sid=sid)
    sio.enter_room(sid, ROOM)


@sio.event
async def data(sid, data):
    await sio.emit('data', data, room=ROOM, skip_sid=sid)


@sio.event
async def disconnect(sid):
    sio.leave_room(sid, ROOM)


if __name__ == '__main__':
    uvicorn.run(app, host='0.0.0.0', port=8003)

客户端看起来像这样

<script>
    const SIGNALING_SERVER_URL = 'http://127.0.0.1:8003?session_id=1';
    // WebRTC config: you don't have to change this for the example to work
    // If you are testing on localhost, you can just use PC_CONFIG = {}
    const PC_CONFIG = {};

    // Signaling methods
    let socket = io(SIGNALING_SERVER_URL, {autoConnect: false});

    socket.on('data', (data) => {
        console.log('Data received: ', data);
        handleSignalingData(data);
    });

    socket.on('ready', () => {
        console.log('Ready');
        // Connection with signaling server is ready, and so is local stream
        createPeerConnection();
        sendOffer();
    });

    let sendData = (data) => {
        socket.emit('data', data);
    };

    // WebRTC methods
    let pc;
    let localStream;
    let remoteStreamElement = document.querySelector('#remoteStream');

    let getLocalStream = () => {
        navigator.mediaDevices.getUserMedia({audio: true, video: true})
            .then((stream) => {
                console.log('Stream found');
                localStream = stream;
                // Connect after making sure that local stream is availble
                socket.connect();
            })
            .catch(error => {
                console.error('Stream not found: ', error);
            });
    }

    let createPeerConnection = () => {
        try {
            pc = new RTCPeerConnection(PC_CONFIG);
            pc.onicecandidate = onIceCandidate;
            pc.onaddstream = onAddStream;
            pc.addStream(localStream);
            console.log('PeerConnection created');
        } catch (error) {
            console.error('PeerConnection failed: ', error);
        }
    };

    let sendOffer = () => {
        console.log('Send offer');
        pc.createOffer().then(
            setAndSendLocalDescription,
            (error) => {
                console.error('Send offer failed: ', error);
            }
        );
    };

    let sendAnswer = () => {
        console.log('Send answer');
        pc.createAnswer().then(
            setAndSendLocalDescription,
            (error) => {
                console.error('Send answer failed: ', error);
            }
        );
    };

    let setAndSendLocalDescription = (sessionDescription) => {
        pc.setLocalDescription(sessionDescription);
        console.log('Local description set');
        sendData(sessionDescription);
    };

    let onIceCandidate = (event) => {
        if (event.candidate) {
            console.log('ICE candidate');
            sendData({
                type: 'candidate',
                candidate: event.candidate
            });
        }
    };

    let onAddStream = (event) => {
        console.log('Add stream');
        remoteStreamElement.srcObject = event.stream;
    };

    let handleSignalingData = (data) => {
        // let msg = JSON.parse(data);
        switch (data.type) {
            case 'offer':
                createPeerConnection();
                pc.setRemoteDescription(new RTCSessionDescription(data));
                sendAnswer();
                break;
            case 'answer':
                pc.setRemoteDescription(new RTCSessionDescription(data));
                break;
            case 'candidate':
                pc.addIceCandidate(new RTCIceCandidate(data.candidate));
                break;
        }
    };

    // Start connection
    getLocalStream();
</script>

我也将此代码用于客户端 socket.io

https://github.com/socketio/socket.io/blob/master/client-dist/socket.io.js

当两个人连接时，一切都很好。 但是一旦第三个用户尝试连接到他们，流式传输就会停止并出现错误

Uncaught (in promise) DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable

我对javascript了解不多，所以我需要你的帮助。谢谢。

P.S。我在所有浏览器中都看到这个错误。

查看此存储库

https://github.com/pfertyk/webrtc-working-example

查看此说明

https://pfertyk.me/2020/03/webrtc-a-working-example/

Answer 1

您收到此错误消息的原因是，当第三个用户加入时，它会向之前连接的 2 个用户发送报价，因此，它会收到 2 个答案。由于一个 RTCPeerConnection 只能建立 one peer-to-peer 连接，当它尝试 setRemoteDescription 时会抱怨后来到达的答案，因为它已经与对等点建立了稳定的连接SDP 回答最先到达。要处理多个用户，您需要为每个远程对等点实例化一个新的 RTCPeerConnection 。

也就是说，您可以使用某种字典或列表结构来管理多个 RTCPeerConnections。通过您的信令服务器，无论何时用户连接，您都可以发出一个唯一的用户 ID（可以是套接字 ID）。当收到这个 id 时，您只需实例化一个新的 RTCPeerConnection 并将收到的 id 映射到新创建的对等连接，然后您必须在数据结构的所有条目上设置 RemoteDescription。

当您覆盖仍在使用的对等连接变量 'pc' 时，每次有新用户加入时，这也会消除代码中的内存泄漏。

但请注意，此解决方案根本不可扩展，因为您将以指数方式创建新的对等连接，使用 ~6 时您的通话质量已经很糟糕了。如果您打算拥有一个会议室，您真的应该考虑使用 SFU，但请注意，通常设置起来非常麻烦。

检查 Janus videoroom 插件以获得 open-source SFU 实现。

Answer 2

如您所知，您应该为每个对等点创建单独的对等点连接，因此在您的代码中，错误的部分是全局变量 pc，每次您都将其设置为 createPeerConnection功能。

相反，例如，您应该有一个 pc 数组，每次您得到一个 offer，您都会在 createPeerConnection 中创建一个新的 pc ] 函数，为 pc 设置本地和远程描述并将生成的 answer 发送到您的信令服务器。

Answer 3

关于为什么你遇到这个问题，我已经在上面详细回答了这个问题。但似乎您真正要寻找的是关于如何修复它的一些示例工作代码...所以给您：

index.html：稍微更新了 HTML 页面，所以现在我们有一个 div，我们将附加传入的远程视频。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC working example</title>
</head>
<body>
    <div id="remoteStreams"></div>
    <script src="socket.io.js"></script>
    <script src="main.js"></script>
</body>
</html>

app.py：更新了数据并准备了一些事件处理程序，以便我们正确地将套接字 ID 发送给其他对等方。

import socketio
import uvicorn
from starlette.applications import Starlette

ROOM = 'room'

sio = socketio.AsyncServer(async_mode='asgi', cors_allowed_origins='*')
star_app = Starlette(debug=True)
app = socketio.ASGIApp(sio, star_app)


@sio.event
async def connect(sid, environ):
    await sio.emit('ready', {'sid': sid}, room=ROOM, skip_sid=sid)
    sio.enter_room(sid, ROOM)


@sio.event
async def data(sid, data):
    peerToSend = None
    if 'sid' in data:
      peerToSend = data['sid']
    data['sid'] = sid
    await sio.emit('data', data, room=peerToSend if peerToSend else ROOM, skip_sid=sid)


@sio.event
async def disconnect(sid):
    sio.leave_room(sid, ROOM)


if __name__ == '__main__':
    uvicorn.run(app, host='localhost', port=8003)

main.js：创建此对等对象以将套接字 ID 映射到 RTCPeerConnections 并更新了一些函数以使用它而不是 pc 变量。

const SIGNALING_SERVER_URL = 'ws://127.0.0.1:8003';
// WebRTC config: you don't have to change this for the example to work
// If you are testing on localhost, you can just use PC_CONFIG = {}
const PC_CONFIG = {};

// Signaling methods
let socket = io(SIGNALING_SERVER_URL, {autoConnect: false});

socket.on('data', (data) => {
    console.log('Data received: ', data);
    handleSignalingData(data);
});

socket.on('ready', (msg) => {
    console.log('Ready');
    // Connection with signaling server is ready, and so is local stream
    peers[msg.sid] = createPeerConnection();
    sendOffer(msg.sid);
    addPendingCandidates(msg.sid);
});

let sendData = (data) => {
    socket.emit('data', data);
};

// WebRTC methods
let peers = {}
let pendingCandidates = {}
let localStream;

let getLocalStream = () => {
    navigator.mediaDevices.getUserMedia({audio: true, video: true})
        .then((stream) => {
            console.log('Stream found');
            localStream = stream;
            // Connect after making sure thzat local stream is availble
            socket.connect();
        })
        .catch(error => {
            console.error('Stream not found: ', error);
        });
}

let createPeerConnection = () => {
    const pc = new RTCPeerConnection(PC_CONFIG);
    pc.onicecandidate = onIceCandidate;
    pc.onaddstream = onAddStream;
    pc.addStream(localStream);
    console.log('PeerConnection created');
    return pc;
};

let sendOffer = (sid) => {
    console.log('Send offer');
    peers[sid].createOffer().then(
        (sdp) => setAndSendLocalDescription(sid, sdp),
        (error) => {
            console.error('Send offer failed: ', error);
        }
    );
};

let sendAnswer = (sid) => {
    console.log('Send answer');
    peers[sid].createAnswer().then(
        (sdp) => setAndSendLocalDescription(sid, sdp),
        (error) => {
            console.error('Send answer failed: ', error);
        }
    );
};

let setAndSendLocalDescription = (sid, sessionDescription) => {
    peers[sid].setLocalDescription(sessionDescription);
    console.log('Local description set');
    sendData({sid, type: sessionDescription.type, sdp: sessionDescription.sdp});
};

let onIceCandidate = (event) => {
    if (event.candidate) {
        console.log('ICE candidate');
        sendData({
            type: 'candidate',
            candidate: event.candidate
        });
    }
};

let onAddStream = (event) => {
    console.log('Add stream');
    const newRemoteStreamElem = document.createElement('video');
    newRemoteStreamElem.autoplay = true;
    newRemoteStreamElem.srcObject = event.stream;
    document.querySelector('#remoteStreams').appendChild(newRemoteStreamElem);
};

let addPendingCandidates = (sid) => {
    if (sid in pendingCandidates) {
        pendingCandidates[sid].forEach(candidate => {
            peers[sid].addIceCandidate(new RTCIceCandidate(candidate))
        });
    }
}

let handleSignalingData = (data) => {
    // let msg = JSON.parse(data);
    console.log(data)
    const sid = data.sid;
    delete data.sid;
    switch (data.type) {
        case 'offer':
            peers[sid] = createPeerConnection();
            peers[sid].setRemoteDescription(new RTCSessionDescription(data));
            sendAnswer(sid);
            addPendingCandidates(sid);
            break;
        case 'answer':
            peers[sid].setRemoteDescription(new RTCSessionDescription(data));
            break;
        case 'candidate':
            if (sid in peers) {
                peers[sid].addIceCandidate(new RTCIceCandidate(data.candidate));
            } else {
                if (!(sid in pendingCandidates)) {
                    pendingCandidates[sid] = [];
                }
                pendingCandidates[sid].push(data.candidate)
            }
            break;
    }
};

// Start connection
getLocalStream();

我尝试尽可能少地更改您的代码，因此您应该能够只复制粘贴并使其正常工作。

这是我的工作代码：https://github.com/lnogueir/webrtc-socketio

如果您有任何问题运行，请告诉我或在那里提出问题，我会尽力提供帮助。

Answer 4

简而言之，您需要确保每个对等点都有一个对等连接，并且您的信令协议允许区分谁向您发送了报价或答复。

对于两个连接的情况，请参考规范示例 https://webrtc.github.io/samples/src/content/peerconnection/multiple/

为了将其推广到具有 socket.io 的多个对等点，（现已弃用且未维护）simplewebrtc 包可能很有用：https://github.com/simplewebrtc/SimpleWebRTC

simple-peer library 提供类似的功能，但您必须自己集成 socketio。

无法设置远程应答 sdp：在错误状态下调用：稳定

Failed to set remote answer sdp: Called in wrong state: stable

javascript

python

socket.io

webrtc

streaming