音视频

花了点时间跟着B站的教程手敲了一个关于WebRtc的项目，它是B/S框架的，用js做的前后端。工具用的是node，可以说是非常的方便。js语法本身也简单易学，和C有很多相似之处。总的来说nodejs YYDS(q(≧▽≦q))

整个项目可以分为三大块

  1. 身份验证:登录、注册

涉及到前端界面，数据库，信令服务器，node web服务器

  1. 聊天室

涉及到前端界面，信令服务器，node web服务器

  1. 1v1聊天室

涉及到前端界面，信令服务器，node web服务器，NAT穿透服务器(当然我这里没有搭建，所以候选者用的host，毕竟就是为了学习WebRtc)

相关设计

1、B/S架构模式

2、登录界面设计

3、音视频聊天界面设计

4、文字输入输出界面设计

5、房间创建与退出功能

6、音视频聊天服务

7、文字聊天服务处理

8、信令服务处理

9、NAT穿透服务处理

用到的node模块

http https 用于支持http https协议
sqlite3 数据库模块
log4js 主要用于服务器的控制台输出日志
socket.io 用于信令服务器的设计（额外还需要再客户端引入对应版本的socket.io.js）
express server-index 两者结合使用，用于将网页以文件夹的形式展示出来

内容很多，以下主要展示信号监听相应的js代码，项目的主要内容也就是这里

server.js（服务器）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

//引入的模块
var http=require("http");
var https = require("https");
var fs = require("fs");

    //自己安装的
var express=require("express");
var serveIndex=require("serve-index");
var sqlite3=require("sqlite3");
var log4js=require("log4js");
var socket=require("socket.io");

......

var io=socket.listen(httpServer);
io.sockets.on("connection", (socket)=>{
    logger.info("connected", socket.id);

    //开始监听身份验证相关的信号
    socket.on("login", (uname, pwd)=>{
        logger.info("login: ", uname, pwd);
        db.all("select * from users where name=? and pwd=?",
            [uname, pwd], (e, rows)=>{
            if(e){
                handleErr(e);
                socket.emit("serverErr");
            }else{
                if(rows.length===1){
                    socket.emit("loginsuc", uname);
                }else{
                    socket.emit("loginfailed", uname);
                }
            }
        })
    });

    socket.on("regist", (uname, pwd)=>{
        var sql = "select * from users where name=?";
        db.all(sql, [uname], (e, rows)=>{
           if(e){
               handleErr(e);
               socket.emit("serverErr");
           }else{
               if(rows.length===1){
                   socket.emit("samename", uname);
               }else{
                   sql="insert into users(name, pwd) values(?, ?)";
                   db.run(sql, [uname, pwd], (e)=>{
                       if(e){
                           handleErr(e);
                           socket.emit("serverErr");
                       }else{
                           socket.emit("registsuc");
                       }
                   })
               }
           }
        });
    })

    //监听聊天大厅相关的信号
    socket.on("cjoin", (room, uname)=>{
        logger.info("cjoin", room, uname);
        socket.join(room);

        socket.emit("cjoined", uname);
        socket.to(room).emit("cotherjoined", uname);
    })

    socket.on("cmessage", (room, uname, msg)=>{
        logger.info("cmessage", room, uname, msg);
        io.in(room).emit("cgetmessage", uname, msg);
    })

    socket.on("cleave", (room, uname)=>{
        logger.info("cleave", room, uname);
        socket.leave(room);
        socket.emit("cleft");
        socket.to(room).emit("cotherleft", uname);
    })

    //开始处理1v1聊天室的消息
    socket.on("vjoin", (room, uname)=>{
        logger.info("vjoin", room, uname);
        socket.join(room);

        var myRoom = io.sockets.adapter.rooms[room];
        var users = Object.keys(myRoom.sockets).length;
        logger.info(room+" users=" + users);
        if(users > 2){
            socket.leave(room);
            socket.emit("vfull", room);
        }else{
            socket.emit("vjoined", room);
            if(users > 1){
                socket.to(room).emit("votherjoined", room, uname);
            }
        }
    });

    socket.on("vdata", (room, data)=>{
        logger.info("vdata", room, data);
        socket.to(room).emit("vgetdata", room, data);
    });

    socket.on("vleave", (room, uname)=>{
        logger.info("vleave", room, uname);
        if(room === "" || uname === ""){
            logger.info("room is empty string");
            return;
        }
        var myRoom = io.sockets.adapter.rooms[room];
        var users = Object.keys(myRoom.sockets).length;

        logger.info("vleave users=" + (users - 1));
        socket.leave(room);
        socket.emit("vleft", room);
        socket.to(room).emit("votherleft");
    })

});

login.js（登录）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function start(){
    socket=io.connect();

    //监听服务器的消息
    socket.on("loginsuc",(uname)=>{
        alert("登录成功:" + uname);
        window.location.href="chat.html?uname="+uname;
    });

    socket.on("loginfailed",(uname)=>{
        alert("登录失败:" + uname);
    });

    socket.on("serverErr",()=>{
         alert("服务器操作异常");
    })
}

regist.js（注册）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function start(){
    socket=io.connect();

    socket.on("serverErr", ()=>{
        alert("服务器操作异常，请重试");
    });

    socket.on("samename", (uname)=>{
        alert("改名字已被注册");
    });

    socket.on("registsuc", ()=>{
        alert("注册成功");
        goBack();
    });
}

chat.js（聊天室）

这里的taMsgList指向的是一个textarea标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function start(){
    socket=io.connect();

    socket.on("cjoined", (uname)=>{
        console.log(taMsgList); // 检查taMsgList是否正确指向textarea
        taMsgList.value = "欢迎" + uname + "来到大厅\n";
    });

    socket.on("cotherjoined", (uname)=>{
        taMsgList.value += uname + "进入大厅\n";
    })

    socket.on("cgetmessage", (uname, msg)=>{
        taMsgList.value += uname + ":" + msg + "\n";
    })

    socket.on("cleft", ()=>{
        history.back();
    })

    socket.on("cotherleft", (uname)=>{
        taMsgList.value += uname + "离开了大厅\n";
    })

    socket.emit("cjoin", room, uname);
}

videoRoom.js(视频聊天)

这里有一个状态机的概念，基status的状态，它的设计是为保证所有情况的发生都有正确的处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
function conn(){
    socket = io.connect();
    //监听来自服务器的信号
    socket.on("vfull", (room)=>{
        status = "leave";
        alert("房间已满: " + room);
        console.log("vfull:", status);
    });

    socket.on("vjoined", (room)=>{
        alert("成功加入房间:" + room);

        iptRoom.disabled = true;
        btnEnterRoom.disabled = true;
        btnLeaveRoom.disabled = false;

        createPeerConnection();

        status = "joined";
        console.log("vjoined:", status);
    });

    socket.on("votherjoined", (room, uname)=>{
        console.log("别人进来了了:"+uname);

        if(status === "joined_unbind"){
            createPeerConnection();
        }
        status = "joined_conn";

        //媒体协商
        mediaNegociate()

        console.log("votherjoined:", status);
    });

    socket.on("vgetdata", (room, data)=>{
       console.log("vgetdata:", data);
       if(!data){
           return;
       }
       if(data.type==="candidate"){
           console.log("get other candidate");
           //候选者信息
           var cddt = new RTCIceCandidate({
               sdpMLineIndex:data.label,
               candidate:data.candidate
           });
           pc.addIceCandidate(cddt);
       }else if(data.type === "offer"){
           console.log("get offer");
           pc.setRemoteDescription(new RTCSessionDescription(data));

           //查询自己的媒体信息并应答
           pc.createAnswer()
               .then(getAnswer)
               .catch(handleErr);
       }else if(data.type === "answer"){
           console.log("get answer");
           pc.setRemoteDescription(new RTCSessionDescription(data));
       }
    });

    socket.on("vleft", (room)=>{
        alert("离开房间:"+room);

        iptRoom.disabled = false;
        btnEnterRoom.disabled = false;
        btnLeaveRoom.disabled = true;

        status = "leaved";
        console.log("vleft:", status);
    });

    socket.on("votherleft", ()=>{
        status = "vjoined_unbind";
        closePeerConnection();
        console.log("votherleft:", status);
    });
}

说些什么吧！

valine