网页版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的发起者角色
}
三人聊天效果图：
时间： 2024-08-07 04:32:43