webRTC:流程和socket搭建信令服务器

上一篇文章 webRTC初探:如何实现音视频的录制 实现了电脑上的摄像头、麦克风、屏幕分享桌面的操控,本文更进一步介绍流程。

简单提一句PeerConnection

既然是两个浏览器(端)之间通信,那自然需要一个"用于维护双方关系的载体",PeerConnection就是WebRTC中的这个载体,也是webrtc的核心。

复制代码
let PeerConnection = window.RTCPeerConnection ||
        window.mozRTCPeerConnection ||
        window.webkitRTCPeerConnection;

PeerConnection是一个对象,它里面有一些核心方法,后面实现完整流程的时候会解释,这里为了下面的流程图不至于难懂先提一嘴:

  • addTrack() :添加音频或者视频轨道
  • addIceCandidate(): 保存 ICE 候选信息,即双方协商信息,持续整个建立通信过程,直到没有更多候选信息
  • createAnswer() :创建应答信令
  • createDataChannel(): 创建消息通道,建立WebRTC通信之后,就可以 p2p 的直接发送文本消息,无需中转服务器
  • createOffer(): 创建初始信令
  • setLocalDescription() :保存自己端创建的信令
  • setLocalDescription() :保存自己端创建的信令

WebRTC的会话流程

下图就是通过载体的核心方法和事件完成两个浏览器的关联的过程:

其中"圈1"是websocket通道的搭建和双方初始化PeerConnection,紧跟着有关信令(SDP)的交换和监听就是通过socket完成的。

信令服务器的搭建

所谓信令服务器,其实完全可以说是通过websocket交换信令的即时通讯服务器。

在实现之前,需要思考一下所需的数据和数据结构:既然是会议,那就需要"用户userId"和"房间roomId",存储的话就通过Redis就好了,Redis中有一种数据结构Hash,大概结构是这样的:

具体代码如下:

javascript 复制代码
const httpServer = require('http').createServer();
const io = require('socket.io')(httpServer);
 
var redis = require('redis')
const roomKey = "meeting-room::"
var redisClient = redis.createClient(6379, '127.0.0.1')
redisClient.on('error', function (err) {
  console.log('redisClient connect Error ' ,err);
});
 
const userMap = new Map()
io.on('connection', async (socket) => {
  await onListener(socket)
});
 
httpServer.listen(18080, async() => {
  console.log('服务器启动成功:18080');
  await redisClient.connect();
});
 
function getMsg(type,msg,status=200,data=null){
  return {"type":type,"msg":msg,"status":status,"data":data}
}
 
function getParams(url,queryName){
  let query = decodeURI(url.split('?')[1]);
  let vars = query.split("&");
  for (var i = 0; i <= vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] === queryName) {
      return pair[1];
    }
  }
  return null;
}
 
/**
 * DB data
 * @param {Object} userId
 * @param {Object} roomId
 */
async function getUserDetailByUid(userId,roomId){
  let res = JSON.stringify(({"userId":userId,"roomId":roomId}))
  return res
}
 
/**
 * 监听
 */
async function onListener(s){
  let url = s.client.request.url
  let userId = getParams(url,'userId')
  let roomId = getParams(url,'roomId')
  console.log("client uid:"+userId+" roomId: "+roomId+" online ")
  //user map
  userMap.set(userId,s)
  //room cache
  if(roomId){
    await redisClient.hSet(roomKey+roomId,userId, await getUserDetailByUid(userId,roomId))
    oneToRoomMany(roomId,getMsg('join',userId+ ' join then room'))
  }
  s.on('msg', async (data) => {
    console.log("msg",data)
    await oneToRoomMany(roomId,data)
  });
  s.on('disconnect', () => { 
    console.log("client uid:"+userId+" roomId: "+roomId+" offline ")
    userMap.delete(userId)
    if(roomId){
      redisClient.hDel(roomKey+roomId,userId)
      oneToRoomMany(roomId,getMsg('leave',userId+' leave the room '))
    }
  });    
  s.on('roomUserList', async (data) => {
    // console.log("roomUserList msg",data)
    s.emit('roomUserList',await getRoomUser(data['roomId']))
  })
  s.on('call',(data) => {
    let targetUid = data['targetUid']
    if(userMap.get(targetUid)){
      oneToOne(targetUid,getMsg('call',"远程呼叫",200,data))
    }else{
      console.log(targetUid+ "不在线")
    }
  })
  s.on('candidate',(data) => {
    let targetUid = data['targetUid']
    if(userMap.get(targetUid)){
      oneToOne(targetUid,getMsg('candidate',"ice candidate",200,data))
    }else{
      console.log(targetUid+ "不在线")
    }
  })
  s.on('offer',(data) => {
    let targetUid = data['targetUid']
    if(userMap.get(targetUid)){
      oneToOne(targetUid,getMsg('offer',"rtc offer",200,data))
    }else{
      console.log(targetUid+ "不在线")
    }
  })
  s.on('answer',(data) => {
    let targetUid = data['targetUid']
    if(userMap.get(targetUid)){
      oneToOne(targetUid,getMsg('answer',"rtc answer",200,data))
    }else{
      console.log(targetUid+ "不在线")
    }
  })
}
 
/**
 * 单独用户提示
 * @param {Object} uid
 * @param {Object} msg
 */
function oneToOne(uid,msg){
  let s = userMap.get(uid)
  if(s){
    s.emit('msg',msg)
  }else{
    console.log(uid+"用户不在线")
  }
}
 
/**
 * 获取房间用户列表
 * @param {Object} roomId
 */
async function getRoomUser(roomId){
  return await redisClient.hGetAll(roomKey+roomId)
}
 
/**
 * 广播
 * @param {Object} roomId
 * @param {Object} msg
 */
async function oneToRoomMany(roomId,msg){
  let ulist = await redisClient.hGetAll(roomKey+roomId)
  for(const uid in ulist){
    oneToOne(uid,msg)
  }
}
相关推荐
香煎三文鱼9 小时前
数据库查询超时,并发问题处理
服务器·数据库
2501_915921439 小时前
Bundle Id 创建与管理的工程化方法,一次团队多项目协作中的流程重构
服务器·ios·小程序·重构·https·uni-app·iphone
ZKNOW甄知科技9 小时前
AI-ITSM的时代正在到来:深度解读Gartner最新报告
大数据·运维·人工智能·低代码·网络安全·微服务·重构
qqssss121dfd10 小时前
计算机网络(第8版,谢希仁)第二章习题解答
服务器·网络·计算机网络
4t4run10 小时前
21、Linux常用命令-进程内存CPU相关命令
linux·运维·服务器
weixin_3077791310 小时前
Jenkins Ioncions API 插件:现代化图标库在持续集成中的应用
java·运维·开发语言·前端·jenkins
行初心10 小时前
uos基础 systemd-resolve 命令执行报错与参考处理方法
运维
小陈phd10 小时前
langgraph从入门到精通(一)——langgraph概念解析
linux·运维·数据库
阿巴~阿巴~10 小时前
解锁HTTP方法奥秘:GET与POST的深度探索与实战演示
服务器·网络·网络协议·http·get·post·请求方法