webrtc视频通话项目部署

最新推荐文章于 2024-05-23 14:45:38 发布

五七五七

最新推荐文章于 2024-05-23 14:45:38 发布

阅读量345

点赞数

分类专栏：前端后端数据库文章标签： web

原文链接：https://www.bilibili.com/video/BV1py4y1e7G6?from=search&seid=6999309315538305246

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

后端数据库

3 篇文章 0 订阅

订阅专栏

环境配置

安装node.js（验证是否安装成功：cmd命令窗输npm -v和node -v显示版本号）
安装vs code

terminal窗口输入：npm init
npm install express(下载速度慢，需要更换npm包的源)：
npm config set registry https://registry.npm.taobao.org
检查是否修改成功：npm get
继续安装express：npm install express
安装express socket.io:npm install socket.io
验证安装两个npm包是否成功：File->new file->保存为index.js到project工程目录下，编辑index.js:

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

http.listen(3000,() => {
	console.log('listening on *:3000');
})
//引入三个包，同时启动http服务，监听3000端口，启动监听成功执行回调函数，在控制台输出内容

测试：terminal中输入node index.js 回车（浏览器输入127.0.0.1:3000显示“Cannot GET /”表示访问成功，原因是没有设置根目录的路由）。

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
/*新增代码---------------------------------------*/
app.get('/',(req, res) => {
	res.sendFile(__dirname + '\index.html');
})//路由根目录，成功时返回一个静态页面
/*---------------------------------------*/
http.listen(3000,() => {
	console.log('listening on *:3000');
})

ctrl + c退出当前后台服务，输入node index.js重新打开服务。浏览器显示no such file or directory , stat’C:\project\index.html’
new file新建index.html:

<!DOCTYPE html>
<html>

<head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font: 13px Helvetica, Arial;
        }
        
        form {
            background: #000;
            padding: 3px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        
        form input {
            border: 0;
            padding: 10px;
            width: 90%;
            margin-right: 0.5%;
        }
        
        form button {
            width: 9%;
            background: rgb(130, 224, 255);
            border: none;
            padding: 10px;
        }
        
        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        #messages li {
            padding: 5px 10px;
        }
        
        #messages li:nth-child(odd) {
            background: #eee;
        }
    </style>
</head>

<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
</body>

</html>

ctrl + c退出重新开启服务出现index.html静态页面

测试socket.io是否正常运行：

<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="//cdn.bootcdn.net/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
    <script>
        $(document).ready(function() {
            var socket = io("//");
            console.log("hello");
            socket.on("connect", () => {
                console.log("connect " + socket.id); //此id可以当成视频通话中的用户名
            })
        });
    </script>
</body>

</html>

信令服务器基础编程

修改后端服务器程序(index.js)，监听socket连接：

io.on('connection', (socket) => {
    console.log("a user connected: " + socket.id)

    socket.on("disconnect", () => {
        console.log("user disconnected: " + socket.id);
    })
});

重新运行服务器，可以不断刷新前端页面，每刷新一次，在终端显示（成对的）建立连接与失去连接。
修改前端程序，使能在前端发送消息给后端：
(使用所学jQuery知识，修改JavaScript程序，使按下网页中的按钮时，发送文本框中的内容)

接着对后台修改，实现两个及以上用户（网页）发送消息

//服务端
const { connect } = require('http2');

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
/*新增代码:创建工程的路由http://expressjs.com/en/5x/api.html#app.get.method*/
/*---------------------------------------*/
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
}); //路由根目录，成功时返回一个静态页面;
/*---------------------------------------*/

io.on('connection', (socket) => {
    console.log("a user connected: " + socket.id)

    socket.on("disconnect", () => {
        console.log("user disconnected: " + socket.id);
    });

    socket.on("chat message", (msg) => {
        console.log(socket.id + "say: " + msg);
        // io.emit("chat message", msg);
        socket.broadcast.emit("chat message", msg); //当前连接 进行广播
        //网址socket.io查看socket.io的用法
    })
});

//前端
<!DOCTYPE html>
<html>

<head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font: 13px Helvetica, Arial;
        }
        
        form {
            background: #000;
            padding: 3px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        
        form input {
            border: 0;
            padding: 10px;
            width: 90%;
            margin-right: 0.5%;
        }
        
        form button {
            width: 9%;
            background: rgb(130, 224, 255);
            border: none;
            padding: 10px;
        }
        
        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        #messages li {
            padding: 5px 10px;
        }
        
        #messages li:nth-child(odd) {
            background: #eee;
        }
    </style>
</head>

<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="//cdn.bootcdn.net/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
    <script>
        //当页面准备完成时，$是jQuery的一个函数
        $(document).ready(function() {
            //令 socket 等于 socke.io 对象，io()中的参数为socket.io服务器地址，在这里和web服务器相同。
            var socket = io("//");
            console.log("hello");
            //监听connect事件，当socket连接建立时，会触发后面第二个参数中的匿名函数内容
            socket.on("connect", () => {
                //socket.id 是当前socket连接的唯一ID
                console.log("connect " + socket.id); //此id可以当成视频通话中的用户名
            });
            //监听form的提交操作
            $('form').submit(function(e) {
                //禁止页面重新加载
                e.preventDefault(); //prevents page reloading
                //发送事件，其值为文本框中输入的值
                socket.emit('chat message', $('#m').val());
                //清空文本框中的值
                $('#m').val('');
                //返回false 禁止原始的提交
                return false;
            });
            //监听 chat message事件，当监听到事件发生时执行第二个参数中的匿名函数
            socket.on('chat message', function(msg) {
                //在网页中id为message的对象中，插入<li>标签，其内容为msg
                $('#messages').append($('<li>').text(msg));
            })
        });
    </script>
</body>

</html>

将受到消息这段代码进行改造：io.emit(‘chat message’, msg)
这里用io是因为要发送消息给所有建立连接的用户，使用io发送，会同时发送给自己（发送消息的用户）
如何把消息不发送给自己，而发给其他用户：io.emit改为socket.broadcast.emit

同一局域网内各台设备可以互相连接。如不行，检查是否防火墙阻止端口：
防火墙->高级设置->入站规则->新建规则->端口->TCP、特定端口设置->允许连接->设置名称->完成
在WebRTC流程中的SDP，ice candidate都是通过信令服务器转发，类似于写的chat message事件的转发功能。

音视频基础编程及局域网访问

**在服务器中编写camera相关程序，访问用户摄像头并显示在页面上，并能在局域网环境下正常使用，编写一个简单的“拍照”功能 **
待续。。。
来源：https://www.bilibili.com/video/BV1py4y1e7G6?from=search&seid=6999309315538305246