WebRTC 視頻聊天

Question

我正在嘗試使用 webrtc 和 RTCPeerConnection API 構建一對一視頻聊天。 我的代碼的一個問題是，在初始用戶連接到服務器后，當其他用戶通過 socket.io 發出消息時，它不會從服務器接收消息。 客戶端只接收他們自己發出的消息。 這是我的一些代碼。 完整的項目在 Github 上： https : //github.com/rashadrussell/webrtc_experiment

客戶端

var isInitiator = false;


socket.on('initiatorFound', function(data) {
    isInitiator = data.setInitiator;
    console.log("Is Initiator? " + isInitiator);
});


navigator.getMedia = (
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia
    );

navigator.getMedia(
    {video: true, audio: false},
    function(stream) {
        var video = document.getElementById("localView");
        video.src = window.URL.createObjectURL(stream);
        console.log("Add Stream");
        sendMessage('streamAdd', {streamAdded: 'stream-added'});

        createPeerConnection();
        pc.addStream(stream);

        if(isInitiator)
        {
            callPeer();
        }

    },
    function(err) {
        console.log("The following error occured: ");
        console.dir(err);
    }

);


function sendMessage(type, message)
{
    console.log("Sending Message");
    socket.emit('message',{
        "type": type,
        "message": message
    });
}

function createPeerConnection() {

    pc = new rtcPeerConnection(servers, options);
    console.dir(pc);

    pc.onicecandidate = function(evt) {
        if(evt.candidate == null) return; 
        pc.onicecandidate = null;           

        console.log("Send Ice Candidate");
        sendMessage("iceCandidate", JSON.stringify(evt.candidate));
    };

    pc.onaddstream = function(evt) {
        document.body.append("<video id='remoteVideo' autoplay></video>");
        var remoteVid = document.getElementById("remoteVideo");
        remoteVid.src = window.URL.createObjectURL(evt.stream);
    };

}


function callPeer() {

    pc.createOffer(function (offer) {
            pc.setLocalDescription(offer, function() {
                sendMessage("offer", JSON.stringify(offer));
            });
            console.log("Send Offer");
        }, function(err) { console.log("Offer Error: " + err) },
            videoConstraints
        );

}

function answerPeer() {

    pc.createAnswer(function(answer) {
        pc.setLocalDescription(answer);
        sendMessage("answer", JSON.stringify(answer))
    }, function(err) { console.log("Sending Answer Error: " + err) },
        videoConstraints
    );

}

socket.on('message', function(message) {
    console.log("CONSOLE MESSAGE:");
    console.dir(message);

    if(message.type == 'streamAdd') {
        console.log('Stream was added');
        createPeerConnection();

        if(isInitiator) {
            callPeer();
        }

    } else if(message.type == 'offer') {

        pc.setRemoteDescription( new rtcSessionDescription(JSON.parse(message.message)));

        if(!isInitiator)
        {
            console.log("Sending Answer");
            answerPeer();
        }


    } else if(message.type == 'answer') {
        pc.setRemoteDescription( new rtcSessionDescription(JSON.parse(message.message)));
    } else if(message.type == 'iceCandidate') {
        console.log("Get Ice Candidate");
        pc.addIceCandidate(new rtcIceCandidate(JSON.parse(message.message)) );
    }

});

服務器端

var isInitiator = false;
io.sockets.on('connection', function(socket) {

    if (!isInitiator) {
      isInitiator = true;
      socket.emit('initiatorFound', {setInitiator: isInitiator});
    } else {
      socket.emit('initiatorFound', {setInitiator: !isInitiator});
    }

    // Signaling Channel
    socket.on('message', function(message) {

      if (message.type == 'streamAdd') {
        console.log('Got message: ' + message);
      }
      //socket.emit('message' ,message);
      // Should be:
      socket.broadcast.emit('message', message);

    });

});

Answer 1

看看您是否想向特定用戶發送消息，您設置了唯一 ID(socket.id)，但現在您正在嘗試測試是否正確，因此請更改您的服務器端代碼

var isInitiator = false;

io.sockets.on('connection', function(socket) {

    if (!isInitiator) {
      isInitiator = true;
      socket.emit('initiatorFound', {setInitiator: isInitiator});
    } else {
      socket.emit('initiatorFound', {setInitiator: !isInitiator});
    }

    // Signaling Channel
    socket.on('message', function(message) {

      if (message.type == 'streamAdd') {
        console.log('Got message: ' + message);
      }
      socket.emit('message' ,message);

    });

});

看這里 socket.emit('message',message); 此套接字對象包含您的 id，因此它會向您發送消息，如果您想向特定用戶發送消息，您知道 unique.id 以任何方式向每個連接發送消息，期望此套接字（意思是當前套接字）

io.sockets.on('connection', function(socket) {

    if (!isInitiator) {
      isInitiator = true;
      socket.emit('initiatorFound', {setInitiator: isInitiator});
    } else {
      socket.emit('initiatorFound', {setInitiator: !isInitiator});
    }

    // Signaling Channel
    socket.on('message', function(message) {

      if (message.type == 'streamAdd') {
        console.log('Got message: ' + message);
      }
      socket.broadcast.emit('message' ,message);

    });

});

Answer 2

我想出了為什么在發出消息時沒有通知其他客戶端。 在我的服務器端代碼中，在信號通道部分下，socket.emit 應該是 socket.broadcast.emit 或 io.sockets.emit。

Socket.emit 僅將消息中繼回發起呼叫服務器的客戶端。 socket.broadcast.emit 將消息中繼到除發起調用的客戶端之外的所有客戶端，而 io.sockets.emit 將消息中繼到所有客戶端，包括發起調用的客戶端。