使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天

最新推荐文章于 2022-03-27 18:47:36 发布

原创

最新推荐文章于 2022-03-27 18:47:36 发布 · 7k 阅读

57 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #javascript #socket

本文详细介绍使用WebRTC和socket.io构建实时视频聊天室的过程，包括前端和后端的代码实现，以及遇到的问题和优化方案。

WebRTC

代码原理及流程

源码：git@gitee.com:DieHunter/myCode.git仓库：myCode/videoSteam

前端

先附上HTML和CSS

完整的socket.js

完整的userList.js（创建用户在线列表，添加邀请事件，初始化聊天室）

WebRTC

网页即时通信，是Web Real-Time Communication 的缩写，它支持peer-to-peer（浏览器与浏览器之间）进行视频，音频传输，并保证传输质量，将其发送至本地audio标签，video标签或发送到另一个浏览器中，本文使用到navigator.mediaDevices，RTCPeerConnection对象配合socket+node构建远程实时视频聊天功能，文章有一个不足之处，后面会讲到。

相关文档：
MediaDevices
WebRTC API

参考文章：
https://rtcdeveloper.com/t/topic/13777

代码原理及流程

源码：https://gitee.com/DieHunter/myCode/tree/master/videoSteam

前端

要实现点对点就需要用到socket长链接从服务端进行寻呼
这是我以前的一篇关于socket简单使用的小案例：https://blog.youkuaiyun.com/time_____/article/details/86748679
首先引入socket.io，这里我将前端js分成三部分，分别是socket.js（socket相关操作），userList.js（页面操作）,video.js（视频聊天）

先附上HTML和CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style/main.css">
    <script src="./js/socket.io.js"></script>
    <script src="./js/socket.js"></script>
    <script src="./js/userList.js"></script>
    <script src="./js/video.js"></script>
</head>

<body>
    <div id="login" hidden class="loginBox">
        <input id="userName" autocomplete="false" class="userName" type="text" placeholder="请输入英文用户名">
        <button id="submit">提交</button>
    </div>
    <div id="chatBox" class="chatBox" hidden>
        <h1 id="myName" class="myName"></h1>
        <ul id="userList" class="userList"></ul>
    </div>
    <div id="videoChat" hidden class="videoChat">
        <button id="back" hidden>结束</button>
        <video id="myVideo" src="" class="myVideo"></video>
        <video id="otherVideo" src="" class="otherVideo"></video>
    </div>
    <script>
        checkToken()

        function checkToken() { //判断用户是否已有用户名
            if (localStorage.token) {
                login.hidden = true
                chatBox.hidden = false
                initSocket(localStorage.token) //初始化socket连接
            } else {
                login.hidden = false
                chatBox.hidden = true
                submit.addEventListener('click', function (e) {
                    initSocket(userName.value) //初始化socket连接
                })
            }
        }
    </script>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

.loginBox {
    width: 300px;
    height: 200px;
    margin: 50px auto 0;
}

.userName,
.loginBox button {
    width: 300px;
    height: 60px;
    border-radius: 10px;
    outline: none;
    font-size: 26px;
}

.userName {
    border: 1px solid lightcoral;
    text-align: center;
}

.loginBox button {
    margin-top: 30px;
    display: block;
}

input::placeholder {
    font-size: 26px;
    text-align: center;
}

.chatBox {
    width: 200px;
    margin: 50px auto 0;
    position: relative;
}

.myName {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    font-size: 40px;
    text-align: center;
    line-height: 50px;
    background: lightcoral;
}

.userList {
    height: 500px;
    width: 100%;
    padding-top: 50px;
    overflow-y: scroll;
    list-style: none;
}

.userList>li {
    background: lightblue;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
}

.videoChat {
    background: lightgreen;
    width: 500px;
    height: 400px;
    margin: 50px auto 0;
}

.videoChat button {
    width: 500px;
    height: 60px;
    border-radius: 10px;
    outline: none;
    float: left;
    font-size: 26px;
}

.myVideo,.otherVideo{
    width: 250px;
    height: 250px;
    float: left;
    overflow: hidden;
}

大致效果