阿里云服务器异地登录使用WebSocket WebRTC nodejs搭建多人视频会议在线直播

云服务器可以挂机吗

几个月来疫情持续蔓延，大家使用视频会议应用的次数也水涨船高。无论身处何地，只要有视频应用我们就能与朋友见面。那我们为什么不试着定制一款自己的会议应用，让会话变得更加真实呢? 话不多说，我们直接开始吧！

实现这个目标不需要我们从头开始。在之前的文章中，我已经介绍过构建具有一对一私人视频功能的应用所需的各个步骤。那么我们就以此为基础对其进行完善，最后添加多对多视频的功能就大功告成了。

（因为下文我们会提到一些在上一篇文章中解释过的概念，如果你之前没有读过，我建议你先移步上一篇文章。）

基于需求，视频会议应具备以下功能：

创建会议的用户自动成为管理员，只有他/她能邀请其他人进入会议；

管理员只能邀请同一公共房间的用户进入会议；

无论是启动会议还是加入会议，用户都不能与其他用户私下交谈；

已经进入某个会议的用户不能进行私聊，也就是说没有人可以和他/她对话；

如果管理员结束会议，所有用户会自动退出会议；

在深入探讨实现细节之前，我们先来了解一下webRTC多方架构的主要方法。

网状结构（Mesh）

Mesh是最简单的一种架构。所有端之间都是相互连接的，会直接把自己的媒体发送到其他所有端上。

Mesh webRTC架构

优点：

. 基本和简单的webRTC实现

. 不需要多媒体中心服务器

缺点：

. 加载和带宽消耗（N-1上行和下行链路）过多；

. 不能扩展容纳过多端（最多4-6个端）。

混合和MCU(Multipoint Conference Unit)

每个端将其媒体发送到中心服务器，并从中心服务器接收媒体。MCU作为一个混合点，接收、解码和混合来自所有端的媒体，最后以单一流的形式发送给所有用户。

优点：

. 在客户端基本实现webRTC

. 每个端都有1个上行和下行链路

缺点：

. 需要具备强大处理能力的服务器端（解码和编码每个端的媒体）。

比如Kurento提供MCU媒体服务器来实现视频应用（下文提到的SFU拓扑结构除外）。

路由和SFU(Selective Forward Unit)

每个端将自己的媒体发送到中心服务器，并从它那里接收所有其他的媒体流。SFU就像一个媒体的路由器，接收所有用户的媒体流，然后决定将哪些流发送给哪些用户。

优点：

. 服务器端计算成本较低(比MCU低)

. 非对称带宽（1个上行链路和N-1个下行链路）即可，适合ADSL连接。

缺点：

. 服务器端设计和实现较复杂。

SFU有三种不同的方法路由媒体：多单播、同播和SVC（可扩展视频编码）。像OpenVidu和Mediasoup等供应商都提供了这几种拓扑。

给予我们的需求，我们决定实现第一种方法——最多支持3个端口的网状拓扑（但还是能扩展到更多用户的）。接下来我们来讨论下实现的细节。

完善措施

在开始讨论构建app的细节前，我们先进一步改进之前的架构，以期获取更简洁、架构更合理的代码。

WebRTC通信机制

如前所述，在mesh架构中，所有的端与端之间都是直接连接的，之前私聊中两端间建立连接的机制和配置都没变。因此，我们在WebRTC.js文件中把这些相关项当作一个mixin单拎出来了：

exportconstvideoConfiguration = { data() {return{constraints: {},// Media constraintsconfiguration: servers,// TURN/STUN ice servers// Offer configofferOptions: {offerToReceiveAudio:1,offerToReceiveVideo:1},// Local videomyVideo:undefined,localStream:undefined,username:""} }, created() {this.username =this.$store.state.username },// Method implementationsmethods: {asyncgetUserMedia() { ... }, getAudioVideo() { ... },asyncsetRemoteDescription(remoteDesc, pc) {try{ log(`${this.username}setRemoteDescription: start`)awaitpc.setRemoteDescription(remoteDesc) log(`${this.username}setRemoteDescription: finished`) }catch(error) { log(`Error setting the RemoteDescription in${this.username}. Error:${error}`) } },asynccreateOffer(pc, to, room, conference =false) { ... },asynccreateAnswer(pc, to, room, conference) { ... },asynchandleAnswer(desc, pc,from, room, conference =false) { ... }, sendSignalingMessage(desc, offer, to, room, conference) { ... }, addLocalStream(pc) { ... }, addCandidate(pc, candidate) { ... }, onIceCandidates(pc, to, room, conference =false) { ... }, }, }

现在，我们已经找到创建所有RTCPeerConnection之外步骤的通用方法了，接下来就需要适当的组件提供和处理PeerConnection对象和过程中所需信息（远程描述、候选人、请求、回复等等）了。

详见使用 mixins 是所有的合并策略

视频通话和相关控制

考虑到视频相关的情况，我们创建了一个通用的Video.vue组件让视频变得更简单。

<template><divclass="video"><divclass="video__spinner"><md-progress-spinnerv-if="!videoStream"class="md-accent"md-mode="indeterminate">