效果预览

前言

---

之前写过关于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,本文就不多赘述了。

总结

---

1. 由于用了现成的封装库SimpleWebRTC，代码量很少，用起来很方便，性能方面也比我之前通过websocket实现的要好很多。不过，还没测试过外网访问的效果，外网还需要STUN，ICE等服务器实现NAT穿透，有兴趣的同学可自行翻墙试试。
2. 服务端改由nodejs实现，这样代码全部都是由html+js+css组成的了，另外服务启动很快，内存占用也很少。

---

参考文章：

• http://blog.chinaunix.net/uid-24567872-id-3961702.html
• http://my.oschina.net/yushulx/blog/309413

---

项目代码已在github上更新