目录
WebRTC
代码原理及流程
源码：git@gitee.com:DieHunter/myCode.git仓库：myCode/videoSteam
前端
先附上HTML和CSS
完整的socket.js
完整的userList.js（创建用户在线列表，添加邀请事件，初始化聊天室）
遇到的问题
优化后完整的video.js
服务端
完整的server.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.csdn.net/time_____/article/details/86748679
首先引入socket.io，这里我将前端js分成三部分，分别是socket.js（socket相关操作），userList.js（页面操作）,video.js（视频聊天）

文章图片

先附上HTML和CSS

提交

* { 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; }

大致效果

文章图片

文章图片

文章图片

socket.js
首先建立socket连接，添加连接和断开的事件

let socket //供其他页面调用function initSocket(token) {//获取到用户输入的id并传到服务端 socket = io('http://127.0.0.1:1024?token=' + token, { autoConnect: false }); socket.open(); socket.on('open', socketOpen); //连接登录 socket.on('disconnect', socketClose); //连接断开 }function socketClose(reason) { //主动或被动关闭socket console.log(reason) localStorage.removeItem("token") }function socketOpen(data) { //socket开启 if (!data.result) { //当服务端找到相同id时跳出连接 console.log(data.msg) return; } createChatList(data) //创建用户列表 localStorage.setItem('token', data.token) login.hidden = true chatBox.hidden = false videoChat.hidden = true myName.textContent = localStorage.token }

之后在socket中添加几个事件监听

socket.on('dataChange', createChatList); //新增人员 socket.on('inviteVideoHandler', inviteVideoHandler); //被邀请视频 socket.on('askVideoHandler', askVideoHandler); //视频邀请结果 socket.on('ice', getIce); //从服务端接收ice socket.on('offer', getOffer); //从服务端接收offer socket.on('answer', getAnswer); //从服务端接收answer socket.on('break', stopVideoStream) //挂断视频通话

若用户接到对方邀请时，弹出确认框，并将结果返回给对方

function inviteVideoHandler(data) { //当用户被邀请时执行 let allow = 0 if (isCalling) { allow = -1 //正在通话 } else { let res = confirm(data.msg); if (res) { allow = 1 startVideoChat(data.token) //用户点击同意后开始初始化视频聊天 localStorage.setItem('roomNo', data.roomNo) //将房间号保存 } } socket.emit('askVideo', { myId: localStorage.token, otherId: data.token, type: 'askVideo', allow }); }

当收到返回邀请结果时，后端创建视频聊天房间后，开始初始化聊天室

function askVideoHandler(data) { //获取被邀请用户的回复 console.log(data.msg) if (data.allow == -1) return //通话中 if (data.allow) { localStorage.setItem('roomNo', data.roomNo) //将房间号保存 startVideoChat(data.token) } }

当用户挂断时

function breakVideoConnect(e) { console.log(localStorage.getItem('roomNo')) socket.emit('_break', { roomNo: localStorage.getItem('roomNo') }); }

• 完整的socket.js
  
  

  let socket //供其他页面调用function initSocket(token) {//获取到用户输入的id并传到服务端 socket = io('http://127.0.0.1:1024?token=' + token, { autoConnect: false }); socket.open(); socket.on('open', socketOpen); //连接登录 socket.on('disconnect', socketClose); //连接断开 socket.on('dataChange', createChatList); //新增人员 socket.on('inviteVideoHandler', inviteVideoHandler); //被邀请视频 socket.on('askVideoHandler', askVideoHandler); //视频邀请结果 socket.on('ice', getIce); //从服务端接收ice socket.on('offer', getOffer); //从服务端接收offer socket.on('answer', getAnswer); //从服务端接收answer socket.on('break', stopVideoStream) //挂断视频通话 }function socketClose(reason) { //主动或被动关闭socket console.log(reason) localStorage.removeItem("token") }function socketOpen(data) { //socket开启 if (!data.result) { //当服务端找到相同id时跳出连接 console.log(data.msg) return; } createChatList(data) //创建用户列表 localStorage.setItem('token', data.token) login.hidden = true chatBox.hidden = false videoChat.hidden = true myName.textContent = localStorage.token }function inviteVideoHandler(data) { //当用户被邀请时执行 let allow = 0 if (isCalling) { allow = -1 //正在通话 } else { let res = confirm(data.msg); if (res) { allow = 1 startVideoChat(data.token) //用户点击同意后开始初始化视频聊天 localStorage.setItem('roomNo', data.roomNo) //将房间号保存 } } socket.emit('askVideo', { myId: localStorage.token, otherId: data.token, type: 'askVideo', allow }); }function askVideoHandler(data) { //获取被邀请用户的回复 console.log(data.msg) if (data.allow == -1) return //通话中 if (data.allow) { localStorage.setItem('roomNo', data.roomNo) //将房间号保存 startVideoChat(data.token) } }function breakVideoConnect(e) { console.log(localStorage.getItem('roomNo')) socket.emit('_break', { roomNo: localStorage.getItem('roomNo') }); }

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

function createChatList(data) { //新建用户列表 console.log(data.msg) let userData = https://www.it610.com/article/data.userIds let userList = document.querySelector('#userList') if (userList) { userList.remove() userList = null } userList = createEle('ul', {}, { id: 'userList', className: 'userList' }) chatBox.appendChild(userList) for (let key in userData) { if (userData[key] != localStorage.token) { var li = createEle('li', {}, { textContent: userData[key] }) li.addEventListener('click', videoStart) userList.appendChild(li) } } }function createEle(ele, style, attribute) { //新增标签，设置属性及样式 let element = document.createElement(ele) if (style) { for (let key in style) { element.style[key] = style[key]; } } if (attribute) { for (let key in attribute) { element[key] = attribute[key]; } } return element }function videoStart(e) { //用户点击列表某个用户时发送邀请至服务端 socket.emit('inviteVideo', { myId: localStorage.token, otherId: this.textContent, type: 'inviteVideo' }); }function startVideoChat(otherId) { //初始化视频聊天 videoChat.hidden = false login.hidden = true chatBox.hidden = true localStorage.setItem('otherId', otherId) //将对方的id保存 startVideoStream() }

video.js
初始化媒体对象，并将Stream存到全局，这里由于navigator.mediaDevices.getUserMedia是异步方法，需要同步执行，先获取stream，然后进行后续操作

async function createMedia() { //同步创建本地媒体流 if (!stream) { stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true }) } console.log(stream) let video = document.querySelector('#myVideo'); video.srcObject = stream; //将媒体流输出到本地video以显示自己 video.onloadedmetadata = https://www.it610.com/article/function (e) { video.play(); }; createPeerConnection() }

创建stream后，初始化RTCPeerConnection，用于建立视频连接，同样需要同步获取，并且在peer获取之后发送offer给对方

async function createPeerConnection() { //同步初始化描述文件并添加事件 if (!peer) { peer = new RTCPeerConnection() } await stream.getTracks().forEach(async track => { await peer.addTrack(track, stream); //将本地流附属至peer中 }); // await peer.addStream(stream); //旧方法（将本地流附属至peer中） peer.addEventListener('addstream', setVideo) //当peer收到其他流时显示另一个video以显示对方 peer.addEventListener('icecandidate', sendIce) //获取到candidate时，将其发送至服务端，传至对方 peer.addEventListener('negotiationneeded', sendOffer) //双方约定的协商被完成时才触发该方法 }

当收到对方发送过来的stream时，即触发addstream事件时，通过setVideo将对方的视频流放到本地video中

function setVideo(data) { //播放对方的视频流 console.log(data.stream) let back = document.getElementById('back') back.hidden = false //显示挂断按钮 back.addEventListener('click', breakVideoConnect) //挂断事件 isCalling = true //正在通话 let video = document.querySelector('#otherVideo'); video.srcObject = data.stream; video.onloadedmetadata = https://www.it610.com/article/function (e) { video.play(); }; }

创建offer，保存本地offer，并发送offer给对方

async function sendOffer() { //同步发送offer到服务端，发送给对方 let offer = await peer.createOffer(); await peer.setLocalDescription(offer); //peer本地附属offer socket.emit('_offer', { streamData: offer }); }

收到对方的offer后，保存远程offer，但是这里有一个小问题，如果peer还没有创建好，也就是如果对方先创建，就会马上发offer过来，这时我们这边的peer可能还没有创建成功，如果直接调用setRemoteDescription的话会报错，所以可以用trycatch来调用，或使用if(!peer) return的方式运行

async function getOffer(data) { //接收到offer后，返回answer给对方 await peer.setRemoteDescription(data.streamData); //peer远程附属offer sendAnswer() }//优化后 async function getOffer(data) { //接收到offer后，返回answer给对方 if (!peer) return //等待对方响应，也可以用try catch await peer.setRemoteDescription(data.streamData); //peer远程附属offer sendAnswer() }

创建answer，保存本地answer，发送answer给对方

async function sendAnswer() { let answer = await peer.createAnswer(); await peer.setLocalDescription(answer); //peer附属本地answer socket.emit('_answer', { streamData: answer }); }

接收到answer时，保存本地answer

async function getAnswer(data) { //接收到answer后，peer远程附属answer await peer.setRemoteDescription(data.streamData); }

peer触发icecandidate事件时，即本地触发过setLocalDescription时，也就是将本地offer和本地answer保存时，触发方法

function sendIce(e) { //setLocalDescription触发时，发送ICE给对方 if (e.candidate) { socket.emit('_ice', { streamData: e.candidate }); } }

接收对方的ICE，但是这里有一个和上面一样的小问题如果在ICE事件中，peer还没有创建好，也就是如果对方先创建，就会马上发offer过来，这时我们这边的peer可能还没有创建成功，如果直接调用addIceCandidate的话会报错，所以可以用trycatch来调用，或使用if(!peer) return的方式运行

async function getIce(data) { //获取对方的ICE var candidate = new RTCIceCandidate(data.streamData) await peer.addIceCandidate(candidate) }//优化后async function getIce(data) { //获取对方的ICE if (!peer) return //等待对方响应，也可以用try catch var candidate = new RTCIceCandidate(data.streamData) await peer.addIceCandidate(candidate) }

遇到的问题
最后是挂断的方法，这里有个小问题，当挂断时，原来的stream无法删除，导致摄像头虽然没有调用，但是导航栏仍然会有摄像头图标（没有真正关闭），下一次打开时会传输前面的流（叠加），网上没有解决方式，如果有知道的同学，希望能补充优化，感谢

function stopVideoStream(data) { //停止传输视频流 console.log(data.msg) stream.getTracks().forEach(async function (track) { //这里得到视频或音频对象 await track.stop(); await stream.removeTrack(track) stream = null }) peer.close(); peer = null; isCalling = false videoChat.hidden = true login.hidden = true chatBox.hidden = false }

• 优化后完整的video.js
  
  

  var stream, peer, isCalling = false //初始化要发送的流,和描述文件,通话状态 function startVideoStream(e) { //开始传输视频流 createMedia() }function stopVideoStream(data) { //停止传输视频流 console.log(data.msg) stream.getTracks().forEach(async function (track) { //这里得到视频或音频对象 await track.stop(); await stream.removeTrack(track) stream = null }) peer.close(); peer = null; isCalling = false videoChat.hidden = true login.hidden = true chatBox.hidden = false }async function createMedia() { //同步创建本地媒体流 if (!stream) { stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true }) } console.log(stream) let video = document.querySelector('#myVideo'); video.srcObject = stream; //将媒体流输出到本地video以显示自己 video.onloadedmetadata = https://www.it610.com/article/function (e) { video.play(); }; createPeerConnection() }async function createPeerConnection() { //同步初始化描述文件并添加事件 if (!peer) { peer = new RTCPeerConnection() } await stream.getTracks().forEach(async track => { await peer.addTrack(track, stream); //将本地流附属至peer中 }); // await peer.addStream(stream); //旧方法（将本地流附属至peer中） peer.addEventListener('addstream', setVideo) //当peer收到其他流时显示另一个video以显示对方 peer.addEventListener('icecandidate', sendIce) //获取到candidate时，将其发送至服务端，传至对方 peer.addEventListener('negotiationneeded', sendOffer) //双方约定的协商被完成时才触发该方法 }function setVideo(data) { //播放对方的视频流 console.log(data.stream) let back = document.getElementById('back') back.hidden = false //显示挂断按钮 back.addEventListener('click', breakVideoConnect) //挂断事件 isCalling = true //正在通话 let video = document.querySelector('#otherVideo'); video.srcObject = data.stream; video.onloadedmetadata = https://www.it610.com/article/function (e) { video.play(); }; }async function sendOffer() { //同步发送offer到服务端，发送给对方 let offer = await peer.createOffer(); await peer.setLocalDescription(offer); //peer本地附属offer socket.emit('_offer', { streamData: offer }); }async function getOffer(data) { //接收到offer后，返回answer给对方 if (!peer) return //等待对方响应，也可以用try catch await peer.setRemoteDescription(data.streamData); //peer远程附属offer sendAnswer() }async function sendAnswer() { let answer = await peer.createAnswer(); await peer.setLocalDescription(answer); //peer附属本地answer socket.emit('_answer', { streamData: answer }); }async function getAnswer(data) { //接收到answer后，peer远程附属answer await peer.setRemoteDescription(data.streamData); }function sendIce(e) { //setLocalDescription触发时，发送ICE给对方 if (!e || !e.candidate) return socket.emit('_ice', { streamData: e.candidate }); }async function getIce(data) { //获取对方的ICE if (!peer) return //等待对方响应，也可以用try catch var candidate = new RTCIceCandidate(data.streamData) await peer.addIceCandidate(candidate) }

  
  
  

服务端 后端部分同样使用socketio进行通信
首先在npm初始化后下载express，socket.io

npm i express --save-dev npm i socket.io --save-dev

之后引入至server.js中

const express = require('express') const app = express(); const server = require('http').Server(app); const io = require('socket.io')(server);

并监听1024端口

server.listen(1024, function () { console.log('Socket Open') });

配置socket
给socket添加一些事件

io.on('connect', socket => { let { token } = socket.handshake.query socket.on('disconnect', (exit) => { //socket断开 delFormList(token) //清除用户 broadCast(socket, token, 'leave') //广播给其他用户 }) });

这样，我们最简单的一个socket就搭好了
完整的server.js

const express = require('express') const app = express(); const server = require('http').Server(app); const io = require('socket.io')(server); let userList = {} //用户列表，所有连接的用户 let userIds = {} //用户id列表，显示到前端 let roomList = {} //房间列表，视频聊天 io.on('connect', socket => { let { token } = socket.handshake.query socket.on('disconnect', (exit) => { //socket断开 delFormList(token) //清除用户 broadCast(socket, token, 'leave') //广播给其他用户 }) socket.on('inviteVideo', inviteVideoHandler) //邀请用户 socket.on('askVideo', inviteVideoHandler); //回应用户是否邀请成功 if (userList[token]) { //找到相同用户名就跳出函数 socket.emit('open', { result: 0, msg: token + '已存在' }); socket.disconnect() return; } addToList(token, socket) //用户连接时，添加到userList broadCast(socket, token, 'enter') //广告其他用户，有人加入 }); function addToList(key, item) { //添加到userList item.emit('open', { result: 1, msg: '你已加入聊天', userIds, token: key }); userList[key] = item userIds[key] = key }function delFormList(key) { //断开时，删除用户 delete userList[key]; delete userIds[key] }function broadCast(target, token, type) { //广播功能 let msg = '加入聊天' if (type !== 'enter') { msg = '离开聊天' } target.broadcast.emit('dataChange', { result: 1, msg: token + msg, userIds }); }function inviteVideoHandler(data) { //邀请方法 let { myId, otherId, type, allow } = data, msg = '邀请你进入聊天室', event = 'inviteVideoHandler', roomNo = otherId //默认房间号为邀请方id if (type == 'askVideo') { event = 'askVideoHandler' if (allow == 1) { addRoom(myId, otherId) roomNo = myId //保存房间号 msg = '接受了你的邀请' } else if (allow == -1) { msg = '正在通话' } else { msg = '拒绝了你的邀请' } } userList[otherId].emit(event, { msg: myId + msg, token: myId, allow, roomNo }); }async function addRoom(myId, otherId) { //用户同意后添加到视频聊天室，只做1对1聊天功能 roomList[myId] = [userList[myId], userList[otherId]] startVideoChat(roomList[myId]) }function startVideoChat(roomItem) { //视频聊天初始化 for (let i = 0; i < roomItem.length; i++) { roomItem[i].room = roomItem roomItem[i].id = i roomItem[i].on('_ice', _iceHandler) roomItem[i].on('_offer', _offerHandler) roomItem[i].on('_answer', _answerHandler) roomItem[i].on('_break', _breakRoom)} }function _iceHandler(data) { //用户发送ice到服务端，服务端转发给另一个用户 let id = this.id == 0 ? 1 : 0 //判断用户二者其一 this.room[id].emit('ice', data); }function _offerHandler(data) { //用户发送offer到服务端，服务端转发给另一个用户 let id = this.id == 0 ? 1 : 0 this.room[id].emit('offer', data); }function _answerHandler(data) { //用户发送answer到服务端，服务端转发给另一个用户 let id = this.id == 0 ? 1 : 0 this.room[id].emit('answer', data); }function _breakRoom(data) { //挂断聊天 for (let i = 0; i < roomList[data.roomNo].length || 0; i++) { roomList[data.roomNo][i].emit('break', { msg: '聊天挂断' }); } } server.listen(1024, function () { console.log('Socket Open') });

实现效果
分别在我方发送stream之前打印stream，收到对方stream后打印stream，我们会发现，双方的stream互换了位置，也就是说整个媒体对象进行了交换

文章图片

文章图片

和同事在两台电脑上测试效果

注意：
前端项目必须运行在本地或者https服务下，因为navigator.mediaDevices.getUserMedia需要运行在安全模式下，用户第一次使用需要授权摄像头或音频权限，所以双方电脑需要有相关功能
看到这里，希望留下你宝贵的建议
【JavaScript|使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天】

推荐阅读

• 

  长期用盐水泡脚行不行，听说可以杀菌！
• 

  邯郸市科技馆参观注意事项是什么 邯郸市科技馆参观注意事项
• 

  环球影城|联想1月21日包场环球影城，耗资或超800万元
• 

  医保|打一针要70万，这种药为什么没入医保？
• 

  给特别的学术会议 学术会议邀请函
• 

  北京交通大学2021-2022校历 北京交通大学2022-2023学年校历一览
• 

  西藏下雪会封山吗 十月份西藏会下雪吗
• 

  生姜贴脚底能去湿气吗
• 

  如何激活保德服务器的网卡？ 保德服务器网卡怎么激活
• 

  深圳直播教程培训，深圳直播教程培训机构
• 

  初中生用手机能提高学习成绩吗？
• 

  国际高中学校里,校风和教学好的有哪些？
• 

  留给国美的时间不多了
• 

  平常的书法08
• 

  小客厅装修效果图欣赏
• 

  在游戏中以下不属于超新星势力的是 航海王燃烧意志微信每日一题11月30日答案
• 

  本图文详细教程教你如何安装一款好用的windows10
• 

  前列腺炎吃三七粉效果好吗
• 

  栗子烧白菜 栗子烧白菜的烹调方法
• 

  回归分析中rmse与R

• vue.js|Vue路由&nodejs环境搭建
• Node.js工程师养成计划某课含源码ppt
• python|某音jsvmp下参数分析笔记
• python|【JS逆向系列】某乎x96参数与jsvmp初体验
• wasm|某网站视频加密的wasm略谈（二）
• python|思古解析js静态逆向分析
• Node.js|Mac如何彻底卸载Node含brew---kalrry
• #|vue3下watch的使用
• 前端|2、React中的JSX使用