webtc视频聊天

WebRTC video chat

本文关键字:视频聊天 webtc      更新时间:2023-09-26

我正在尝试与webrtc和RTCPeerConnection API建立1对1的视频聊天。我的代码的一个问题是,在初始用户连接到服务器之后,当其他用户通过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("answerswer", 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);
    });
});

如果你想发送消息给特定的用户你设置唯一的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,所以它会给你发送一个消息,如果你想发送一个消息给特定的用户,你知道唯一的。以任何方式发送消息到每个连接,除了这个套接字(平均当前套接字)

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);
    });
});

我弄清楚了为什么在发出消息时没有通知其他客户机。在我的服务器端代码中,在信令通道部分下,套接字。Emit应该是socket.broadcast.emit或io.sockets.emit.

插座。Emit只将消息中继回发起对服务器调用的客户机。Socket.broadcast.emit将消息中继到除了发起调用的客户端之外的所有客户端,io.sockets.emit将消息中继到所有客户端,包括发起调用的客户端。