效果预览
前言
之前写过关于websocket的文章《基于WebSocket的在线聊天室（一）（二）》,这次换成WebRTC来实现语音视频功能。
客户端
网上可以找到很多关于WebRTC的demo，不过很多即使翻墙了也跑不起来。再加上直接使用WebRTC配置起来比较复杂，因此在本文中使用的是WebRTC的一个封装库SimpleWebRTC，网址是https://github.com/andyet/SimpleWebRTC，这个是nodejs下的项目，经测试可以不用翻墙直接在局域网内使用。
首先，在页面中引入上述demo中的latest-v2.js
<script type="text/javascript" src="js/latest-v2.js"></script>
接着在js中配置webrtc并建立连接
webrtc = new SimpleWebRTC({
// 显示本地摄像头画面的video元素id
localVideoEl: 'myVideo',
// 显示远程摄像头画面的video元素id，此处暂不需要
remoteVideosEl: '',
// 自动请求访问媒体设备，即弹框询问是否允许访问相机和麦克风设备
autoRequestMedia: true,
debug: false,
detectSpeakingEvents: true,
// 媒体请求参数
media: {
video: true,// 摄像头
audio: true// 麦克风
},
autoAdjustMic: false
});
// 有新的远程视频流传入时添加video控件来显示画面
webrtc.on('videoAdded', function (video, peer) {
console.log('video added', peer);
$(video).fadeIn('slow').appendTo(Console.Win + " #videocontent");
$(video).attr("id","dest-" + peer.id);
});
// 远程视频流断开时移除该视频画面
webrtc.on('videoRemoved', function (video, peer) {
console.log('video removed ', peer);
var dest = $('video[id="dest-' + peer.id + '"]');
dest && dest.remove()
});
加入房间
webrtc.joinRoom('video');// 'video'为房间名，可随意设置，但在同一个房间内才能通讯
离开房间
webrtc.leaveRoom();// 离开房间后远程客户端就接收不到音/视频流了
注意：webrtc貌似对chrominum版本有要求，建议升级到最新的chrome浏览器。测试过edge浏览器支持,而IE11仍然不支持。
服务端
之前的服务端用的是tomcat7,这次就换一换，来个nodejs的写法。网上nodejs中websocket的例子基本都是用的Socket.IO，它号称提供以下几种实时连接方案,在运行时会自动选择最有能力的运输模式，而不影响API的使用。
* WebSocket
* Adobe Flash Socket
* AJAX 长轮询
* AJAX 多重流
* iframe
* JSONP 轮询
但个人觉得Socket.IO的用法比较复杂，或者说和之前tomcat下开发的思路有些差异，触发的事件名称也怪怪的，一时无法接受（貌似客户端也要改成Socket.IO的写法），于是就果断放弃了，而选择采用最原始的用法，写法和客户端比较相近，最重要的是客户端不用做修改。
nodejs环境的配置在这里就不多介绍了，我也是n久之前好奇下过来玩玩的，常年不用，菜鸟一个。
首先，安装ws模块
npm install ws // 最好加上-g参数安装在全局路径下，这样就不用到处安装了
接着就是一大波代码袭来
(function(){
// http服务设置
var express = require('express'),
app = express(),
http = require('http').createServer(app);
app.use(express.static(__dirname));
http.listen(8080, function(){
console.log('httpServer: listening on "http://localhost:8080"');
});
// websocket服务设置
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({
port: 8082,// 端口设置，最好和http服务监听的端口不同
// host: "localhost",// 不设置时可使用外网，内网，回环地址发起websocket请求，设置之后只能使用指定ip了
path: "/websocket/chat"// 请求地址，不设置默认为根路径
}, function() {
console.log('websocketServer: listening on "ws://localhost:8082/chat"');
}),
connectionList = new ArrayList(),
roomInfo = {};
//连接建立
wss.on('connection', function(ws) {
var wsid = ws._ultron.id,
name = "游客" + new Date().getTime().toString();
console.log("%s 加入了聊天室.",name);
roomInfo = connectionList.length > 0 ? roomInfo : {
creater: name,
createTime: new Date().toLocaleString()
};
connectionList.add({
wsid: wsid,
name: name,
connect: ws
});
var dests = getDests(),
setNameMsg = {
host: name,
type: 6, //setName
roomInfo: roomInfo,
dests: dests
},
joinMsg = {
host: name,
type: 1, //setName
roomInfo: roomInfo,
dests: dests
},
msg = JSON.stringify(setNameMsg);
//设置名称
ws.send(msg);
msg = JSON.stringify(joinMsg);
//通知所有人有新连接
connectionList.foreach(function(obj) {
obj.connect.send(msg);
});
//收到消息
ws.on('message', function(message) {
console.log('收到%s的消息：%s', name, message);
//反序列化
var msg = JSON.parse(message);
msg.host = name;
//序列化
message = JSON.stringify(msg);
connectionList.foreach(function(obj) {
obj.connect.send(message);
});
});
//连接断开
ws.on('close', function(message) {
console.log("%s 离开了聊天室.", name );
//移除当前连接
var index = connectionList.find(function(obj) {
return obj.wsid == wsid;
});
index > -1 && connectionList.removeAt(index);
var closeMsg = {
host: name,
type: 2, //close
dests: getDests()
};
message = JSON.stringify(closeMsg);
connectionList.foreach(function(obj) {
obj.connect.send(message);
});
});
});
function getDests() {
var dests = [];
connectionList.foreach(function(obj) {
dests[dests.length] = obj.name;
});
return dests;
}
function ArrayList(array) {
this.array = typeof array !== 'undefined' && array instanceof Array ? array : new Array();
this.length = this.array.length;
var that = this,
setLength = function() {
that.length = that.array.length;
};
this.get = function(index){
return this.array[index];
}
this.add = function(obj) {
this.array.push(obj);
setLength();
};
this.indexOf = function(obj) {
return this.array.indexOf(obj);
}
this.find = function(callback) {
for(var i = 0; i < this.length; i++){
if(callback(this.get(i))) {
return i;
}
}
return -1;
}
this.removeAt = function(index){
this.array.splice(index, 1);
setLength();
};
this.remove = function(obj){
var index = this.indexOf(obj);
if (index >= 0){
this.removeAt(index);
}
};
this.clear = function(){
this.array.length = 0;
setLength();
};
this.insertAt = function(index, obj){
this.array.splice(index, 0, obj);
setLength();
};
this.foreach = function(callback) {
for(var i = 0; i < this.length; i++){
callback(this.get(i));
}
};
}
})();
将上述代码写入server.js，再运行命令行切换到当前目录下通过node server命令即可启动服务（在我的例子中可以直接双击项目根目录下的批处理文件打开）
启动的有两个服务器，其中
http是http服务器，用于当前目录下的页面访问；另一个wss是websocket服务器，用于websocket服务，当有新连接建立就会触发websocket服务器的"connection"事件，而收到消息和连接断开则是触发websocket连接这个"对象"的事件，与tomcat下触发的都是ServerEndpoint的事件稍微有点差异。
之前的文章末尾有提到过nginx的反向代理配置，同样适用于nodejs,本文就不多赘述了。
总结
- 由于用了现成的封装库SimpleWebRTC，代码量很少，用起来很方便，性能方面也比我之前通过websocket实现的要好很多。不过，还没测试过外网访问的效果，外网还需要STUN，ICE等服务器实现NAT穿透，有兴趣的同学可自行翻墙试试。
- 服务端改由nodejs实现，这样代码全部都是由html+js+css组成的了，另外服务启动很快，内存占用也很少。
参考文章：
项目代码已在github上更新
网友评论
警告2：getElementById() 被传递了空字符串参数。
依赖安装： npm install ws@1.1.0 express -g