WebRTC 数据通道错误

Question

我正在尝试在没有摄像头和麦克风的情况下使用 webrtc 和数据通道连接 2 个对等点。

try {
            socket = new WebSocket("ws://localhost:1337/");
            var servers = {iceServers:[{url:"stun:stun.l.google.com:19302"}]};
            peerConn = new webkitRTCPeerConnection(servers, {optional:[{RtpDataChannels: true}]});
            channel = peerConn.createDataChannel("abcd1234", {reliable: false});

            peerConn.onicecandidate = function(evt) {
                if(evt.candidate) {
                    socket.send(JSON.stringify({"candidate": evt.candidate}));
                }
            };

            channel.onopen = function () {
                console.log("channel is open");
                channel.send('first text message over RTP data ports');
            };

            channel.onmessage = function (event) {
                console.log('received a message:', event.data);
            };

            peerConn.createOffer(function(desc) {
                peerConn.setLocalDescription(desc);
                socket.send(JSON.stringify({"sdp": desc}));
            });

            socket.onmessage = function(evt) {
                var signal = JSON.parse(evt.data);
                if(signal.sdp) { 
                    peerConn.setRemoteDescription(new RTCSessionDescription(signal.sdp));
                    alert("desc");
                } else { 
                    peerConn.addIceCandidate(new RTCIceCandidate(signal.candidate));
                    alert("ice");
                }
            }
        } catch(e) {
            console.log(e.message);
        }

在 Chrome 中，出现以下错误：

Uncaught Error: InvalidStateError: DOM Exception 11

Answer 1

打开两个标签；点击第一个标签中的“创建报价”按钮；并查看控制台日志：

<script>
    // webkitRTCPeerConnection && RTCDataChannel specific code goes here
    var iceServers = {
        iceServers: [{
            url: 'stun:stun.l.google.com:19302'
        }]
    };

    var optionalRtpDataChannels = {
        optional: [{
            RtpDataChannels: true
        }]
    };

    var mediaConstraints = {
        optional: [],
        mandatory: {
            OfferToReceiveAudio: false, // Hmm!!
            OfferToReceiveVideo: false // Hmm!!
        }
    };

    var offerer, answerer, answererDataChannel, offererDataChannel;

    function createOffer() {
        offerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels);

        offererDataChannel = offerer.createDataChannel('RTCDataChannel', {
            reliable: false
        });

        setChannelEvents(offererDataChannel, 'offerer');

        offerer.onicecandidate = function (event) {
            if (!event.candidate) returnSDP();
        };

        offerer.ongatheringchange = function (event) {
            if (event.currentTarget && event.currentTarget.iceGatheringState === 'complete') returnSDP();
        };

        function returnSDP() {
            socket.send({
                sender: 'offerer',
                sdp: offerer.localDescription
            });
        }

        offerer.createOffer(function (sessionDescription) {
            offerer.setLocalDescription(sessionDescription);
        }, null, mediaConstraints);
    }


    function createAnswer(offerSDP) {
        answerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels);
        answererDataChannel = answerer.createDataChannel('RTCDataChannel', {
            reliable: false
        });

        setChannelEvents(answererDataChannel, 'answerer');

        answerer.onicecandidate = function (event) {
            if (!event.candidate) returnSDP();
        };

        answerer.ongatheringchange = function (event) {
            if (event.currentTarget && event.currentTarget.iceGatheringState === 'complete') returnSDP();
        };

        function returnSDP() {
            socket.send({
                sender: 'answerer',
                sdp: answerer.localDescription
            });
        }

        answerer.setRemoteDescription(new RTCSessionDescription(offerSDP));
        answerer.createAnswer(function (sessionDescription) {
            answerer.setLocalDescription(sessionDescription);
        }, null, mediaConstraints);
    }

    function setChannelEvents(channel, channelNameForConsoleOutput) {
        channel.onmessage = function (event) {
            console.debug(channelNameForConsoleOutput, 'received a message:', event.data);
        };

        channel.onopen = function () {
            channel.send('first text message over RTP data ports');
        };
    }

    // WebSocket specific code goes here
    var socket = new WebSocket('ws://localhost:1337');
    socket.onmessage = function (e) {
        var data = JSON.parse(e.data);
        console.log(data);
        if (data.sdp) {
            if (data.sender == 'offerer') createAnswer(data.sdp);
            else offerer.setRemoteDescription(new RTCSessionDescription(data.sdp));
        }
    };

    socket.push = socket.send;
    socket.send = function (data) {
        socket.push(JSON.stringify(data));
    };
</script>

<button id="create-offer">Create Offer</button>
<script>
    document.getElementById('create-offer').onclick = function () {
        this.disabled = true;
        createOffer();
    };
</script>

Answer 2

现在我正在尝试以下方法：

首先我在客户 #1 上创建一个报价并发送描述：

try {
    peerConn = new webkitRTCPeerConnection(stunServers, {optional:[{RtpDataChannels: true}]});

    peerConn.createOffer(function(desc) {
        peerConn.setLocalDescription(desc);
        socket.send("createpeer|" + JSON.stringify(desc));
    }, null, mediaConstraints);

    peerConn.onconnection = function () {
        console.log("[webrtc] connected with peer");

        peerChannel = peerConn.createDataChannel("test", {reliable: false});

        peerChannel.onmessage = function (event) {
            alert("Server: " + event.data);
        };

        peerChannel.onopen = function () {
            peerChannel.send("Hello Server!");
        };
    };

} catch(error) {
    console.log(error);
}

客户端 #2 收到并发送他的描述：

case "createpeer":
    console.log("[websocket] received create peer request from " + cmd[1] + " on " + cmd[2]);
    try {
        peerConn = new webkitRTCPeerConnection(stunServers, {optional:[{RtpDataChannels: true}]});

        peerConn.setRemoteDescription(new RTCSessionDescription(JSON.parse(cmd[3])));

        peerConn.createAnswer(function(desc) {
            peerConn.setLocalDescription(desc);
            socket.send("openpeer|" + cmd[1] + "|" + cmd[2] + "|" + JSON.stringify(desc));
        }, null, mediaConstraints);

        peerConn.ondatachannel = function (channel) {
            channel.onmessage = function (event) {
                alert("Client: " + event.data);
            };

            channel.onopen = function () {
                channel.send("Hello Client!");
            };
        };

    } catch(error) {
        console.log(error);
    }
    break;

最后客户端 #1 收到客户端 #2 的描述

case "openpeer":
    console.log("[websocket] received open peer");
    peerConn.setRemoteDescription(new RTCSessionDescription(JSON.parse(cmd[1])));
    break;

一切正常，没有错误，但是没有建立连接，也没有调用onconnection方法。

问候