从0搭建一个WebRTC，实现多房间多对多通话，并实

从0搭建一个WebRTC，实现多房间多对多通话，并实现屏幕录制

篇文章开始会实现一个一对一WebRTC和多对多的WebRTC，以及基于屏幕共享的录制。本篇会实现信令和前端部分，信令使用fastity来搭建，前端部分使用Vue3来实现。

为什么要使用WebRTC

WebRTC全称Web Real-Time Communication，是一种实时音视频的技术，它的优势是低延时。

本文章食用者要求

了解音视频基础
能搭建简单的node服务，docker配置
vue框架的使用

环境搭建及要求

废话不多说，现在开始搭建环境，首先是需要开启socket服务，采用的是fastify来进行搭建。详情可以见文档地址，本例使用的是3.x来启动的。接下来安装fastify-socket.io3.0.0插件，详细配置可以见文档，此处不做详细解释。接下来是搭建Vue3，使用 vite 脚手架搭建简单的demo。

要求：前端服务运行在localhost或者https下。node需要redis进行数据缓存

C++音视频开发WebRTC学习资料：点击领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

获取音视频

要实现实时音视频第一步当然是要能获取到视频流，在这里我们使用浏览器提供的API,MediaDevices来进行摄像头流的捕获

enumerateDevices

第一个要介绍的API是enumerateDevices，是请求一个可用的媒体输入和输出设备的列表，例如麦克风，摄像机，耳机设备等。直接在控制台执行API，获取的设备如图

我们注意到里面返回的设备ID和label是空的，这是由于浏览器的安全策略限制，必须授权摄像头或麦克风才能允许返回设备ID和设备标签，接下来我们介绍如何请求摄像头和麦克风

getUserMedia

这个API顾名思义，就是去获取用户的Meida的，那我们直接执行这个API来看看效果

ps: 由于掘金的代码片段的iframe没有配置allow="display-capture *;microphone *; camera *"属性，需要手动打开详情查看效果

通过上述例子我们可以获取到本机的音视频画面，并且可以播放在video标签里，那么我们可以在获取了用户的流之后，重新再获取一次设备列表看看发生了什么变化

在获取了音视频之后，获取的设备列表的详细信息已经出现，我们就可以获取指定设备的音视频数据，

这里介绍一下getUserMedia的参数constraints，

视频参数配置

interface MediaTrackConstraintSet {
    // 画面比例
    aspectRatio?: ConstrainDouble;
    // 设备ID，可以从enumerateDevices中获取
    deviceId?: ConstrainDOMString;
    // 摄像头前后置模式，一般适用于手机
    facingMode?: ConstrainDOMString;
    // 帧率，采集视频的目标帧率
    frameRate?: ConstrainDouble;
    // 组ID，用一个设备的输入输出的组ID是同一个
    groupId?: ConstrainDOMString;
    // 视频高度
    height?: ConstrainULong
    // 视频宽度
    width?: ConstrainULong;
}

音频参数配置

interface MediaTrackConstraintSet {
    // 是否开启AGC自动增益，可以在原有音量上增加额外的音量
    autoGainControl?: ConstrainBoolean;
    // 声道配置
    channelCount?: ConstrainULong;
    // 设备ID，可以从enumerateDevices中获取
    deviceId?: ConstrainDOMString;
    // 是否开启回声消除
    echoCancellation?: ConstrainBoolean;
    // 组ID，用一个设备的输入输出的组ID是同一个
    groupId?: ConstrainDOMString;
    // 延迟大小
    latency?: ConstrainDouble;
    // 是否开启降噪
    noiseSuppression?: ConstrainBoolean;
    // 采样率单位Hz
    sampleRate?: ConstrainULong;
    // 采样大小，单位位
    sampleSize?: ConstrainULong;
    // 本地音频在本地扬声器播放
    suppressLocalAudioPlayback?: ConstrainBoolean;
}

C++音视频开发WebRTC学习资料：点击领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

一对一连接

当我们采集到了音视频数据，接下来就是要建立链接，在开始之前需要科普一下WebRTC的工作方式，我们常见有三种WebRTC的网络结构

Mesh
MCU
SFU 关于这三种模式的区别可以查看文章来了解

在这里由于设备的限制，我们采用Mesh的方案来进行开发

一对一的流程

我们建立一对一的链接需要知道后流程是怎么流转的，接下来上一张图，便可以清晰的了解

这里是由ClientA发起B来接受A的视频数据。上图总结可以为A创建本地视频流，把视频流添加到PeerConnection里面创建一个Offer给B，B收到Offer以后，保存这个offer，并响应这个Offer给A，A收到B的响应后保存A的远端响应，进行NAT穿透，完成链接建立。

话已经讲了这么多，我们该怎么建立呢，光说不做假把式，接下来，用我们的项目创建一个来试试

初始化

首先启动fastify服务，接下来在Vue项目安装socket.io-client@4然后连接服务端的socket

import { v4 as uuid } from 'uuid';
import { io, Socket } from 'socket.io-client';
const myUserId=ref(uuid());
let socket: Socket;
socket=io('http://127.0.0.1:7070', {
  query: {
    // 房间号，由输入框输入获得
    room: room.value,
    // userId通过uuid获取
    userId: myUserId.value,
    // 昵称，由输入框输入获得
    nick: nick.value
  }
});

可以查看chrome的控制台，检查ws的链接情况，如果出现跨域，请查看socket.io的server配置并开启cors配置。

创建offer

开始创建RTCPeerConnection，这里采用google的公共stun服务

const peerConnect=new RTCPeerConnection({
  iceServers: [
    {
      urls: "stun:stun.l.google.com:19302"
    }
  ]
})

根据上面的流程图我们下一步要做的事情是用上面的方式获取视频流，并将获取到的流添加到RTCPeerConnection中,并创建offer，把这个offer设置到这个rtcPeer中，并把offer发送给socket服务

let localStream: MediaStream;

stream.getTracks().forEach((track)=> {
  peerConnect.addTrack(track, stream)
})

const offer=await peerConnect.createOffer();
await peerConnect.setLocalDescription(offer);
socket.emit('offer', { creatorUserId: myUserId.value, sdp: offer }, (res: any)=> {
  console.log(res);
});

socket 服务收到了这份offer后需要给B发送A的offer

fastify.io.on('connection', async (socket)=> {
    socket.on('offer', async (offer, callback)=> {
      socket.emit('offer', offer);
      callback({
        status: "ok"
      })
    })
})

处理offer

B需要监听socket里面的offer事件并创建RTCPeerConnection，将这个offer设置到远端，接下来来创建响应。并且将这个响应设置到本地，发送answer事件回复给A

socket.on('offer', async (offer: { sdp: RTCSessionDescriptionInit, creatorUserId: string })=> {
    const peerConnect=new RTCPeerConnection({
      iceServers: [
        {
          urls: "stun:stun.l.google.com:19302"
        }
      ]
    })

    await peerConnect.setRemoteDescription(offer.sdp);
    const answer=await peerConnect.createAnswer();
    await peerConnect.setLocalDescription(answer);
    socket.emit('answer', { sdp: answer }, (res: any)=> {
      console.log(res);
    }) 
})

处理answer

服务端广播answer

socket.on('offer', async (offer, callback)=> {
      socket.emit('offer', offer);
      callback({
        status: "ok"
      })
    })

A监听到socket里面的answer事件，需要将刚才的自己的RTCpeer添加远端描述

socket.on('answer', async (data: { sdp: RTCSessionDescriptionInit })=> {
    await peerConnect.setRemoteDescription(data.sdp)
})

处理ICE-candidate

接下来A会获取到ICE候选信息，需要发送给B

peerConnect.onicecandidate=(candidateInfo: RTCPeerConnectionIceEvent)=> {
  if (candidateInfo.candidate) {
    socket.emit('ICE-candidate', { sdp: candidateInfo.candidate }, (res: any)=> {
      console.log(res);
    })
  }
}

广播消息是同理这里就不再赘述了，B获取到了A的ICE，需要设置候选

socket.on('ICE-candidate', async (data: { sdp: RTCIceCandidate })=> {
   await peerConnect.addIceCandidate(data.sdp)
})

接下来B也会获取到ICE候选信息，同理需要发送给A，待A设置完成之后便可以建立链接,代码同上，B接下来会收到流添加的事件，这个事件会有两次，分别是音频和视频的数据

C++音视频开发WebRTC学习资料：点击领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

处理音视频数据

peerConnect.ontrack=(track: RTCTrackEvent)=> {
    if (track.track.kind==='video') {
      const video=document.createElement('video');
      video.srcObject=track.streams[0];
      video.autoplay=true;
      video.style.setProperty('width', '400px');
      video.style.setProperty('aspect-ratio', '16 / 9');
      video.setAttribute('id', track.track.id)
      document.body.appendChild(video)
    }
    if (track.track.kind==='audio') {
      const audio=document.createElement('audio');
      audio.srcObject=track.streams[0];
      audio.autoplay=true;
      audio.setAttribute('id', track.track.id)
      document.body.appendChild(audio)
    }
}

到这里你就可以见到两个视频建立的P2P链接了。到这里为止只是建立了视频的一对一链接，但是我们可以通过这些操作进行复制，就能进行多对多的连接了。

多对多连接

在开始我们需要知道，一个人和另一个人建立连接双方都需要创建自己的peerConnection。对于多人的情况，首先我们需要知道进入的房间里面当前的人数，给每个人都创建一个RtcPeer，同时收到的人也回复这个offer给发起的人。对于后进入的人，需要让已经创建音视频的人给后进入的人创建新的offer。

基于上面的流程，我们现在先实现一个成员列表的接口

成员列表的接口

在我们登录socket服务的时候我们在query参数里面有房间号，userId和昵称，我们可以通过redis记录对应的房间号的登录和登出，从而实现成员列表。

可以在某一个人登录的时候获取一下redis对应房间的成员列表，如果没有这个房间，就把这个人丢进新的房间，并且存储到redis中，方便其他人登录这个房间的时候知道现在有多少人。

fastify.io.on('connection', async (socket)=> {
  const room=socket.handshake.query.room;
  const redis=fastify.redis;
  let userList;
  // 获取当前房间的数据
  await getUserList()

    async function getUserList() {
      const roomUser=await redis.get(room);
      if (roomUser) {
        userList=new Map(JSON.parse(roomUser))
      } else {
        userList=new Map();
      }
    }
    
    async function setRedisRoom() {
      await redis.set(room, JSON.stringify([...userList]))
    }
    
    function rmUser(userId) {
      userList.delete(userId);
    }
    
    
    if (room) {
      // 将这人加入到对应的socket房间
      socket.join(room);
      await setRedisRoom();
      // 广播有人加入了
      socket.to(room).emit('join', userId);
    }
    // 这个人断开了链接需要将这个人从redis中删除
    socket.on('disconnect', async (socket)=> {
      await getUserList();
      rmUser(userId);
      await setRedisRoom();
    })

})

到上面为止，我们实现了成员的记录、广播和删除。接下来是需要实现一个成员列表的接口，提供给前端项目调用。

fastify.get('/userlist', async function (request, reply) {
  const redis=fastify.redis;
  return await redis.get(request.query.room);
})

多对多初始化

由于需要给每个人发送offer，需要对上面的初始化函数进行封装。

/**
 * 创建RTCPeerConnection
 * @param creatorUserId 创建者id，本人
 * @param recUserId 接收者id
 */
const initPeer=async (creatorUserId: string, recUserId: string)=> {
  const peerConnect=new RTCPeerConnection({
    iceServers: [
      {
        urls: "stun:stun.l.google.com:19302"
      }
    ]
  })
  return peerConnect;
})

由于存在多份rtc的映射关系，我们这里可以用Map来实现映射的保存

const peerConnectList=new Map();

const initPeer=()=> {
   // ice，track，new Peer等其他代码
   ......
   peerConnectList.set(`${creatorUserId}_${recUserId}`, peerConnect);
}

获取成员列表

上面实现了成员列表。接下来进入了对应的房间后需要轮询获取对应的成员列表

let userList=ref([]);
const intoRoom=()=> {
    //其他代码
    ......
    
    setInterval(()=>{
      axios.get('/userlist', { params: { room: room.value }}).then((res)=>{
        userList.value=res.data
      })
    }, 1000)
}

创建多对多的Offer和Answer

在我们获取到视频流的时候，可以对在线列表里除了自己的人都创建一个RTCpeer，来进行一对一连接，从而达到多对多连接的效果。

// 过滤自己
const emitList=userList.value.filter((item)=> item[0] !==myUserId.value);
for (const item of emitList) {
  // item[0]就是目标人的userId
  const peer=await initPeer(myUserId.value, item[0]);
  await createOffer(item[0], peer);
}

const createOffer=async (recUserId: string, peerConnect: RTCPeerConnection, stream: MediaStream=localStream)=> {
  if (!localStream) return;
  stream.getTracks().forEach((track)=> {
    peerConnect.addTrack(track, stream)
  })
  const offer=await peerConnect.createOffer();
  await peerConnect.setLocalDescription(offer);
  socket.emit('offer', { creatorUserId: myUserId.value, sdp: offer, recUserId }, (res: any)=> {
    console.log(res);
  });
}

那么在socket服务中我们怎么只给对应的人进行事件广播，不对其他人进行广播，我们可以用找到这个人userId对应的socketId，进而只给这一个人广播事件。

// 首先获取IO对应的nameSpace
const IONameSpace=fastify.io.of('/');

// 发送Offer给对应的人
socket.on('offer', async (offer, callback)=> {
  // 重新从reids获取用户列表
  await getUserList();
  // 找到目标的UserId的数据
  const user=userList.get(offer.recUserId);
  if (user) {
    // 找到对应的socketId
    const io=IONameSpace.sockets.get(user.sockId);
    if (!io) return;
    io.emit('offer', offer);
    callback({
      status: "ok"
    })
  }
})

其他人需要监听socket的事件，每个人都需要处理对应自己的offer。

socket.on('offer', handleOffer);
const handleOffer=async (offer: { sdp: RTCSessionDescriptionInit, creatorUserId: string, recUserId: string })=> {
  const peer=await initPeer(offer.creatorUserId, offer.recUserId);
  await peer.setRemoteDescription(offer.sdp);
  const answer=await peer.createAnswer();
  await peer.setLocalDescription(answer);
  socket.emit('answer', { recUserId: myUserId.value, sdp: answer, creatorUserId: offer.creatorUserId }, (res: any)=> {
    console.log(res);
  })
}

接下来的步骤其实就是和一对一是一样的了，后面还需要发起offer的人处理对应peer的offer、以及ICE候选，还有流进行挂载播放。

socket.on('answer', handleAnswer)
// 应答方回复
const handleAnswer=async (data: { sdp: RTCSessionDescriptionInit, recUserId: string, creatorUserId: string })=> {
  const peer=peerConnectList.get(`${data.creatorUserId}_${data.recUserId}`);
  if (!peer) {
    console.warn('handleAnswer peer 获取失败')
    return;
  }
  await peer.setRemoteDescription(data.sdp)
}
......处理播放，处理ICE候选

到目前为止，就实现了一个基于mesh的WebRTC的多对多通信

C++音视频开发WebRTC学习资料：点击领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

基于WebRTC的屏幕录制

getDisplayMedia

这个API是在MediaDevices里面的一个方法，是用来获取屏幕共享的。

这个 MediaDevices 接口的 getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）在一个 MediaStream 里. 然后，这个媒体流可以通过使用 MediaStream Recording API 被记录或者作为WebRTC 会话的一部分被传输。

await navigator.mediaDevices.getDisplayMedia()

MediaRecorder

获取到屏幕共享流后，需要使用 MediaRecorder这个api来对流进行录制，接下来我们先获取屏幕流,同时创建一个MeidaRecord类

let screenStream: MediaStream;
let mediaRecord: MediaRecorder;
let blobMedia: (Blob)[]=[];
const startLocalRecord=async  ()=> {
  blobMedia=[];
  try {
      screenStream=await navigator.mediaDevices.getDisplayMedia();
      screenStream.getVideoTracks()[0].addEventListener('ended', ()=> {
        console.log('用户中断了屏幕共享');
        endLocalRecord()
      })

      mediaRecord=new MediaRecorder(screenStream, { mimeType: 'video/webm' });

      mediaRecord.ondataavailable=(e)=> {
        if (e.data && e.data.size > 0) {
          blobMedia.push(e.data);
        }
      };

      // 500是每隔500ms进行一个保存数据
      mediaRecord.start(500)
  } catch(e) {
      console.log(`屏幕共享失败->${e}`);
  }
}

获取到了之后可以使用 Blob 进行处理

const replayLocalRecord=async ()=> {
  if (blobMedia.length) {
    const scVideo=document.querySelector('#screenVideo') as HTMLVideoElement;
    const blob=new Blob(blobMedia, { type:'video/webm' })
    if(scVideo) {
       scVideo.src=URL.createObjectURL(blob);
    }
  } else {
    console.log('没有录制文件');
  }
}

const downloadLocalRecord=async ()=> {
  if (!blobMedia.length) {
    console.log('没有录制文件');
    return;
  }
  const blob=new Blob(blobMedia, { type: 'video/webm' });
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url;
  a.download=`录屏_${Date.now()}.webm`;
  a.click();
}

这里有一个基于Vue2的完整例子

ps: 由于掘金的代码片段的iframe没有配置allow="display-capture *;microphone *; camera *"属性，需要手动打开详情查看效果

后续将会更新，WebRTC的自动化测试，视频画中画，视频截图等功能

续分享wordpress建站教程。做wordpress外贸建站的用户都喜欢在网站中插入youtube视频，所以今天就分享如何给网站插入YouTube视频。

（此处已添加小程序，请到客户端查看）

wordpress中其实默认都是可以插入YouTube视频，但是大家在使用时可能还是会遇到一些问题，有可能插入不成功，所以接下来悦然wordpress建站给大家分享几种方法。

作者：悦然WordPress建站

准备工作

首先，我们需要打开YouTube视频，然后点【SHARE】，它会提示多种分享方式，插入网站中我们主要会用到短链接或Embed代码这两种方式。

方法1：使用YouTube区块

在wordpress古腾堡编辑器中已经包含了YouTube区块，所以我们可以直接添加一个YouTube区块，然后填写YouTube视频分享的短链接（视频页面的完整链接也可以），点【嵌入】即可。

这个方法很简单的，但是该方法可能会受到主题、插件、网络、服务器等影响，导致嵌入不成功。

方法2：使用HTML插入

如果方法1不能用，那么也不用纠结，我们可以使用HTML代码插入YouTube视频。复制前面准备工作中提到的Embed代码。

古腾堡编辑器使用HTML插入YouTube视频

如果你使用的是古腾堡编辑器，可以添加一个HTML区块，把Embed代码粘贴进去。

然后我们点预览就可以看到嵌入的YouTube视频了。不过这里要注意的是你的网络需要能连接到YouTube才行。

经典编辑器使用HTML插入YouTube视频

HMTL插入YouTube视频的方法基本是通用的，所以在经典编辑器中，这个方法也适用。

如果你使用woocommerce插件制作网站，在添加产品时想加上YouTube区块该怎么办呢？woocommerce的产品编辑页面默认是经典编辑器样式的，所以不能直接添加HTML区块。

此时我们可以在编辑器页面点【文本】，这里可以直接插入HTML代码，我们把前面复制的Embed代码粘贴进去，如上图所示。粘贴完成后我们再点【可视化】

如上图，这样YouTube视频就嵌入成功了。

还有一些编辑器可能没有【文本】那个选项，比如在一些多供应商系统的编辑器中，此时我们就没办法直接插入HTML代码了。但是这些编辑器实际上是支持HMTL的，所以我们可以从其它地方把视频复制进来。

比如我们可以在有HTML功能的编辑器中先添加好YouTube视频，如上图，悦然wordpress建站先在古腾堡区块编辑器中添加好视频（使用HTML或短链接方式插入都行），添加成功后，我们选中整个视频，按CTRL+C，然后在不支持HTML的编辑器按CTRL+V粘贴，此时你会发现整个视频都粘贴进来了。

方法3：使用插件

可以实现嵌入YouTube视频的wordpress插件有很多，比如Embed Plus for YouTube、EmbedPress等等。插件的使用就不讲了，安装就可以使用。

总结

以上就是今天分享的wordpress建站教程，分享了几种插入YouTube视频的方法，希望对您有所帮助。

给视频加边框，可以使用Vue的样式绑定功能来实现。

首先，在Vue组件的模板中，可以使用`<video>`标签来嵌入视频，然后通过设置样式来给视频加边框。例如：

```html

</div>

</template>

<style>

.video-container {

width: 400px; /* 设置视频容器的宽度 */

height: 300px; /* 设置视频容器的高度 */

border: 1px solid #ccc; /* 设置边框样式 */

}

.video {

width: 100%; /* 设置视频的宽度为容器的宽度 */

height: 100%; /* 设置视频的高度为容器的高度 */

}

</style>

```

上述代码中，`video-container`类定义了视频容器的样式，包括宽度、高度和边框样式。`video`类定义了视频的样式，包括宽度和高度，设置为100%表示与容器的宽度和高度一致。

然后，在Vue组件的JavaScript代码中，可以将视频的URL绑定到`src`属性上，例如：

```javascript

data() {

return {

videoUrl: 'your-video-url'

}

```

然后，在模板中使用`v-bind`指令将`videoUrl`绑定到`src`属性上，例如：

```html

```

这样，当`videoUrl`的值发生变化时，视频的URL也会跟着变化，从而播放不同的视频。

完整的示例代码如下：

```html

</div>

</template>

export default {

data() {

return {

videoUrl: 'your-video-url'

}

</script>

<style>

.video-container {

width: 400px;

height: 300px;

border: 1px solid #ccc;

}

.video {

width: 100%;

height: 100%;

}

</style>

```

注意，上述代码中的`your-video-url`需要替换为实际的视频URL。

在线咨询

上一篇：「华为鸿蒙应用程序开发 13」JavaScript
下一篇：Wordpress实现调用一篇文章的第一张图片

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

从0搭建一个WebRTC，实现多房间多对多通话，并实

为什么要使用WebRTC

本文章食用者要求

环境搭建及要求

获取音视频

enumerateDevices

getUserMedia

视频参数配置

音频参数配置

一对一连接

一对一的流程

初始化

创建offer

处理offer

处理answer

处理ICE-candidate

处理音视频数据

多对多连接

成员列表的接口

多对多初始化

获取成员列表

创建多对多的Offer和Answer

基于WebRTC的屏幕录制

getDisplayMedia

准备工作

方法1：使用YouTube区块

方法2：使用HTML插入

古腾堡编辑器使用HTML插入YouTube视频

经典编辑器使用HTML插入YouTube视频

方法3：使用插件

总结

您的项目需求