webRTC 实现两端通信

1.介绍

整个 webRTC 在 web 上的结构如下图

2.MediaStream

在实现整个通信的过程中，至少需要两个角色，一个是本地角色，一个是远程的角色。

在 webRTC 的实现过程中，可以简单理解为两端通过 RTCPeerconnection 实现两端的 MediaStream 的交互。所以整个通信的主体除了两端 web 设备外，主要就是RTCPeerconnection 和获取 MediaStream 的 getUserMedia 这两个 webRTC 相关的 API 了。

同时保证通信的体现，即视频流的呈现，还需要通过 <video> 或者 <audio> 组件对 MediaStream 进行展示，目前可以通过 srcObject (兼容性) 中传入对应的 MediaStream 进行实现。

从每端的用户角度来看，其实都拥有以下部分内容，不论是 local 还是 remote 的用户都拥有用于展示本地 MediaStream 的 local video 以及展示对方 MediaStream 的 remote video。local 和 remote 的用户本地的 MediaStream 都可通过 getUserMedia 获取到。（当然 <video> 也并不是一定必须的，通信的时候也可以只需要看远程的媒体流展示）

简单的 case

<template>
  <video id="localVideo" :srcObject="localStream"></video>
  <video id="remoteVideo" :srcObject="remoteStream"></video>
</template>
​
<script>
export default {
  data() {
    return