使用Web RTC实现微信一对一视频通话竟如此简单

随着前端之路的不断探索，当今的前端时代可谓是大前端时代。当今的前端能做的事情太多太多了，这也有弊端就是前端开发人员们需要不断的学习不断的探索。希望大家可以在前端的道路上越走越远。

回到正题，今天想和大家聊一聊Web RTC相关的知识，Web RTC可以干什么？它主要是做通信相关的业务比如：视频聊天、语音聊天、直播等。

结果展示

移动端

pc端

Web RTC API

这里的API有很多，我这里就只介绍一下实现一对一视频通话所需要使用到的API。

SDP

SDP 全称 Session Description Protocol，即会话描述协议。SDP 是一份具有特殊约定格式的纯文本描述文档（类似 JSON / XML），其中包含了 WebRTC 建立连接所需的 ICE 服务器信息、音视频编码信息等。

RTCPeerConnection

它是一个构造函数，用来创建一个Web RTC链接。

js
 代码解读
复制代码
const rtc = new RTCPeerconnection();

createOffer（方法）

生成一个发起方的SDP Offer

js
 代码解读
复制代码
const session = await rtc.createOffer()

createAnswer（方法）

生成一个应答方的SDP Answer

js
 代码解读
复制代码
const session = await rtc.createAnswer()

setLocalDescription（方法）

设置本地的SDP Local

js
 代码解读
复制代码
await rtc.setLocalDescription(session)

setRemoteDescription

设置对端的SDP Remote

js
 代码解读
复制代码
await rtc.setRemoteDescription(session)

addTrack

addTrack方法将媒体轨道添加到将传输给其他对等端的轨道集合中。

js
 代码解读
复制代码
localStream.getTracks().forEach((track) => rtc.addTrack(track, localStream));

addIceCandidate

addIceCandidate方法将新的远程候选者添加到连接的远程描述中，该远程描述描述了连接的远程端的状态。

js
 代码解读
复制代码
rtc.addIceCandidate(candidate);

onicecandidate（事件）

当完成媒体协商步骤时会执行icecandidate事件，该事件的监听器需要将更改后的描述信息传送给远端RTCPeerConnection，以更新远端的备选源。

js
 代码解读
复制代码
rtc.addEventlistern(''icecandidate'',(event)=>{
    console.log(event.candidate)
})

ontrack（事件）

执行addTrack方法会调用onTrack事件，会返回一个event对象，其中包含了对端的媒体流。

js
 代码解读
复制代码
rtc.addEventlistern(''track'',(event)=>{
    console.log(event.streams[0])
})

通信流程

我们需要获取不同客户端的相同的编解码方式，这个步骤我我们称之为媒体协商。

具体步骤如下：

完成了媒体协商之后就到了媒体流的发送了，这里具体步骤如下：

至此整个流程就完成了，接下来用代码的方式来实现一下整个的流程。

实现

这里html+css的部分很简单就不做过多介绍了，主要介绍一些js关键部分的逻辑，下面我会附带github地址有兴趣的可以下载查看具体代码。

获取摄像头

获取用户摄像头媒体流使用navigator.mediaDevices.getUserMedia方法

js
 代码解读
复制代码
// 获取用户摄像头
async function getUserMedia() {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true,
  });
  console.log(stream);
  localVideo.srcObject = stream;
  localStream = stream;
  // 初始化Web RTC
  createRTCPeerConnection();
}

浏览器加载完成创建Web Socket链接。

js
 代码解读
复制代码
window.addEventListener("load", () => {
  // 创建WebSocket链接
  createWebSocket();
  // 点击视频通话按钮
  callBtn.addEventListener("click", async (e) => {
   ....
  });
  // 点击挂断
  closeEl.addEventListener("click", () => {
   ....
  });
  // 点击接听
  connectionEl.addEventListener("click", async () => {
    .....
    socket.send(JSON.stringify({ cmd: "connection", userId }));
  });
});

上方代码可以看到，当我们点击接听电话时，会发送一个connection指令发送到服务端，服务端会接收到这条信息并发送给远端用户提示该用户需要获取摄像头了。具体代码如下：

server端代码具体如下：

js
 代码解读
复制代码
// 对方接听电话
function connection(message, conn) {
  const user = getRemoteUser(message.userId, conn); // 获取远端用户

  user && user.conn.sendText(JSON.stringify({ cmd: "connection" }));
}

客户端代码具体如下：

js
 代码解读
复制代码
// 接听电话,显示视频
async function connection() {
  ....
  await getUserMedia();
  await createOffer();
}

接下来到了最主要的步骤就是媒体协商。上方在接听电话时会创建offer。

媒体协商

创建offer

js
 代码解读
复制代码
// 获取offer设置本地并发送给服务端
async function createOffer() {
  const session = await rtc.createOffer();

  await rtc.setLocalDescription(session);

  socket.send(JSON.stringify({ cmd: "offer", content: session, userId }));
}

创建answer

js
 代码解读
复制代码
// 从服务端获取offer,设置远端,获取answer设置本地并发送给服务端
async function createAnswer(message) {
  await rtc.setRemoteDescription(message.content);

  const session = await rtc.createAnswer();

  await rtc.setLocalDescription(session);

  socket.send(JSON.stringify({ cmd: "answer", content: session, userId }));
}

服务端收到offer和answer的处理

js
 代码解读
复制代码
// 处理offer
function offer(message, conn) {
  const user = getRemoteUser(message.userId, conn);

  user &&
    user.conn.sendText(
      JSON.stringify({ cmd: "offer", content: message.content })
    );
}

// 处理anwser
function answer(message, conn) {
  const user = getRemoteUser(message.userId, conn);

  user &&
    user.conn.sendText(
      JSON.stringify({ cmd: "answer", content: message.content })
    );
}

当媒体协商完成后会执行Web RTC的onicecandidate事件，这是我需要获取candidate来互换对方的candidate。

客户端监听icecandidate事件，发送candidate指令给服务端。

js
 代码解读
复制代码
  rtc.addEventListener("icecandidate", (event) => {
    // 发送candidate
    socket.send(
      JSON.stringify({ cmd: "candidate", candidate: event.candidate, userId })
    );
    console.log(event);
  });

服务端获取candidate，并发送给远端的用户。

js
 代码解读
复制代码
// 处理candidate
function candidate(message, conn) {
  const user = getRemoteUser(message.userId, conn);
  user &&
    user.conn.sendText(
      JSON.stringify({ cmd: "candidate", candidate: message.candidate })
    );
}

远端用户获取candidate调用setCandidate发送来设置。

js
 代码解读
复制代码
// 设置candidate
function candidate(message) {
  rtc.addIceCandidate(message.candidate);
}

调用ontrack事件将远端的流设置到video标签中显示。

js
 代码解读
复制代码
  rtc.addEventListener("track", (event) => {
    remoteVideo.srcObject = event.streams[0];
    console.log(event);
  });

当我们通过局域网IP访问时，浏览器会拒绝我们的摄像头权限，我们需要更改浏览器配置来允许访问摄像头。

我们在Edge浏览器输入edge://flags/这个地址，找到Insecure origins，将IP地址加端口号写在输入框内并更改为已启用状态，点击重启即可。

移动端我们下载Edge浏览器修改配置也是和pc端一样的流程，这样就可以移动端和pc端之间进行通话了。

如果是Chrome的话输入chrome://flags/即可

到这里主要的逻辑就已经完成了，这里我建议对照源代码来看会更容易理解。其实逻辑不是很复杂，只要把媒体协商这一部分搞懂那么这个一对一的视频通话就会非常简单。

github地址：github.com/Yi-Wo-Zuo/W…