WebRTC开发者社区为开发者提供最新最全的WebRTC资料

网页版WebRTC多人聊天Demo

2020-07-11 14:21:46

网页版WebRTC多人聊天Demo

本文基于Codelab中step7，在其基础上作简单修改，使其支持多人视频通讯，本文暂时只支持星状结构三人聊天，多人聊天可以在基础上扩展，原理相同。

一.源码分析

该工程包括三个文件：server.js，main.js，index.html。

1.server.js

if (numClients == 0){
            socket.join(room);
            socket.emit('created', room);
        } else if (numClients == 1) {
            io.sockets.in(room).emit('join', room);
            socket.join(room);
            socket.emit('joined', room);
        } else { // max two clients
            socket.emit('full', room);
        }
        socket.emit('emit(): client ' + socket.id + ' joined room ' + room);
        socket.broadcast.emit('broadcast(): client ' + socket.id + ' joined room ' + room);

后台服务代码，负责异步消息通讯。当有新用户加入房间时，向客户端发送消息，客户端接收到消息后作相应的处理。

2.index.html

网站主页，包括两块视频区域和文本区域。

<!DOCTYPE html>
<html>
<head>

<meta name='keywords' content='WebRTC, HTML5, JavaScript' />
<meta name='description' content='WebRTC Reference App' />
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1'>

<base target='_blank'>

<title>WebRTC client</title>

<link rel='stylesheet' href='css/main.css' /> 

</head>

<body>

<div id='container' class='main' >

  <div id='videos' class='videos'>
    <video id='localVideo' class='localVideo' autoplay muted></video>
    <video id='remoteVideo' class='remoteVideo' autoplay></video>
  </div>
 
  <div id='textareas'>
        <textarea id="dataChannelSend" disabled placeholder="Press Start, enter some text, then press Send."></textarea>
        <textarea id="dataChannelReceive" disabled></textarea>
    </div>

  <button id="sendButton" disabled>Send</button>

</div>

<script src='/socket.io/socket.io.js'></script>
<script src='js/lib/adapter.js'></script>
<script src='js/main.js'></script>

</body>
</html>

3.main.js

核心代码区域，包括房间的创建，RTCPeerConnection创建和两点间的视频通话。

3.1消息处理

socket.on('created', function (room){
  console.log('Created room ' + room);
  isInitiator = true;
});

socket.on('full', function (room){
  console.log('Room ' + room + ' is full');
});

socket.on('join', function (room){
  console.log('Another peer made a request to join room ' + room);
  console.log('This peer is the initiator of room ' + room + '!');
  isChannelReady = true;
});

socket.on('joined', function (room){
  console.log('This peer has joined room ' + room);
  isChannelReady = true;
});

socket.on('message', function (message){
  console.log('Received message:', message);
  if (message === 'got user media') {
      maybeStart();
  } else if (message.type === 'offer') {
    if (!isInitiator && !isStarted) {
      maybeStart();
    }
    pc.setRemoteDescription(new RTCSessionDescription(message));
    doAnswer();
  } else if (message.type === 'answer' && isStarted) {
    pc.setRemoteDescription(new RTCSessionDescription(message));
  } else if (message.type === 'candidate' && isStarted) {
    var candidate = new RTCIceCandidate({sdpMLineIndex:message.label,
      candidate:message.candidate});
    pc.addIceCandidate(candidate);
  } else if (message === 'bye' && isStarted) {
    handleRemoteHangup();
  }
});

3.2peerconnection创建和通讯

function createPeerConnection() {
  try {
    pc = new RTCPeerConnection(pc_config, pc_constraints);
    pc.onicecandidate = handleIceCandidate;
    console.log('Created RTCPeerConnnection with:\n' +
      '  config: \'' + JSON.stringify(pc_config) + '\';\n' +
      '  constraints: \'' + JSON.stringify(pc_constraints) + '\'.');
  } catch (e) {
    console.log('Failed to create PeerConnection, exception: ' + e.message);
    alert('Cannot create RTCPeerConnection object.');
      return;
  }
  pc.onaddstream = handleRemoteStreamAdded;
  pc.onremovestream = handleRemoteStreamRemoved;

  if (isInitiator) {
    try {
      // Reliable Data Channels not yet supported in Chrome
      sendChannel = pc.createDataChannel("sendDataChannel",
        {reliable: false});
      sendChannel.onmessage = handleMessage;
      trace('Created send data channel');
    } catch (e) {
      alert('Failed to create data channel. ' +
            'You need Chrome M25 or later with RtpDataChannel enabled');
      trace('createDataChannel() failed with exception: ' + e.message);
    }
    sendChannel.onopen = handleSendChannelStateChange;
    sendChannel.onclose = handleSendChannelStateChange;
    console.log('....................this is  a initiator = true....................');
  } else {
    pc.ondatachannel = gotReceiveChannel;
    console.log('....................this is not a initiator = false....................');
  }
}

3.3 视频源的输出展现

function handleRemoteStreamAdded(event) {
  console.log('Remote stream added.');
 // reattachMediaStream(miniVideo, localVideo);
  attachMediaStream(remoteVideo, event.stream);
  remoteStream = event.stream;
//  waitForRemoteVideo();
}

二.
简单工作流程介绍与修改思路

1. 工作过程如下：

1.1.浏览器A访问主页，允许访问摄像头音频设备，server接收到'create or join'消息，计算此时连接到服务器的客户端数量，此时数量为0，则向客户端发送'created'消息。

1.2.浏览器A接收到'created'消息，将isInitiator设为true,该值为true表示该客户断是peerconnection的发起者。

1.3.浏览器B访问主页，允许访问摄像头音频设备,server接收到'create or join'消息，计算此时连接到服务器的客户端数量，此时数量为1，则向客户端发送join和joined消息。

1.4.浏览器A和浏览器B都接收到join和joined消息,设置isChannelReady=true，表示此时准备好建立连接。浏览器A发起peerconnection连接doCall，浏览器B回应peerconnection连接doAnswer,A和B建立P2P连接。

1.5.A和B分别将来自本地和远端的视频stream显示在页面上。

注意：浏览器A和浏览器B都接受来自server相同的消息，而两者在接收到相同的消息后的处理却不一样（main.js代码是一样的），一个是发起者，一个是应答者。可以使用状态机来理解，程序所处状态不一样，虽然接收到相同的命令，但可以做出不同的处理（通过isInitiator变量区分不同的状态）。

2.三人聊天室的实现

简单起见，我们暂时先实现三人视频通讯，使用星状结构。下面是修改思路：

a.A和B以及建立连接，此时如C加入，可以将A和C建立连接，同时保持A和B之前的连接。此时，A能看到B和C，而B和C只能看到A。

b.如果A B C三者需要互相看到，则需要A将B的视频传给C，并将C的视频传给B。

本文暂时只实现A与B通讯，A与C通讯，BC之间不能通讯。下面是具体的代码修改步骤:

2.1server.js

if (numClients == 0){
            socket.join(room);
            socket.emit('created', room);
        } else if (numClients <=2 ) { //第三个用户加入后仍然发送join joined消息
            io.sockets.in(room).emit('join', room);
            socket.join(room);
            socket.emit('joined', room);
        } else { // max two clients
            socket.emit('full', room);
        }

2.2index.html

可以采用动态方式添加，这里简单起见直接增加一路视频实现块。

<div id='videos' class='videos'>
    <video id='localVideo' class='localVideo' autoplay muted></video> //本地视频 A
  </div>
  <div >
    <video id='remoteVideo' class='remoteVideo' autoplay></video>// remote视频B
  </div>
  <div >
    <video id='remoteVideo2' class='remoteVideo2' autoplay></video> //remote视频c
  </div>

2.3 main.js

   a.增加一个全局变量isPeerEstablished

用来表示该客户端是否已经创建了PeerConnection。isPeerEstablished和isInitiator两者可以区分发起者和应答者，因为具有超过2个客户端，所以必须使用isPeerEstablished来选择尚未创建连接的客户端作为应答者。

     var isPeerEstablished=false;

   b.处理message机制修改

在判断条件里面加入(!isPeerEstablished||isInitiator)，表示尚未创建链接C和发起者A才会执行peerconnection。保证新加入者C和A创建链接，同时保持A和B的连接。

socket.on('message', function (message){
  console.log('Received message:', message);
  if (message === 'got user media'&&(!isPeerEstablished||isInitiator)) {
    maybeStart();
  } else if (message.type === 'offer'&&(!isPeerEstablished||isInitiator)) {    
    if (!isInitiator && !isStarted) {     
      maybeStart();
    }
    pc.setRemoteDescription(new RTCSessionDescription(message));
    doAnswer();
  } else if (message.type === 'answer' && isStarted&&(!isPeerEstablished||isInitiator)) {
    pc.setRemoteDescription(new RTCSessionDescription(message));
  } else if (message.type === 'candidate' && isStarted&&(!isPeerEstablished||isInitiator)) {
    var candidate = new RTCIceCandidate({sdpMLineIndex:message.label,
      candidate:message.candidate});
    pc.addIceCandidate(candidate);
  } else if (message === 'bye' && isStarted) {      
    handleRemoteHangup();
  }
});

c.视频流展现

如果isInitiator和isPeerEstablished都为true，说明此时A和B已经建立链接。此时，应该将新的视频流显示在remoteVideo2中。其他情况将视频流展示在remoteVideo中。

function handleRemoteStreamAdded(event) {
  console.log('Remote stream added.');
  
 // reattachMediaStream(miniVideo, localVideo);
if(isInitiator&&isPeerEstablished){
  attachMediaStream(remoteVideo2, event.stream);
  remoteStream2 = event.stream;
}else{
  attachMediaStream(remoteVideo, event.stream);
  remoteStream = event.stream;
}
isPeerEstablished=true;
//  waitForRemoteVideo();
}

d.其他两处修改

var remoteVideo2 = document.querySelector('#remoteVideo2');

......


function handleRemoteHangup() {
  console.log('Session terminated.');
  stop();
  //isInitiator = false;  //总是保持A的发起者角色


}

三人聊天效果图：

By:rasp | WebRTC概念与基础 |

网页版WebRTC多人聊天Demo

最新文章

链接

开源项目

网页版WebRTC多人聊天Demo

分类目录

最新文章

链接

开源项目