socket实现视频通话-WebRTC

最近喜欢研究视频流，所以思考了双向通信socket，接下来我们就一起来看看本地如何实现双向视频通讯的功能吧~

客户端获取视频流

首先思考如何获取视频流呢？

其实跟录音的功能差不多，都是查询电脑上是否有媒体设备，如果有录音和录像的设备，首先就需要授权，然后将视频流通过socket传输给服务端。

获取媒体设备
 

const stream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
})

因为是打视频的功能，那A客户端本身也希望看到A的摄像头，所以我们直接将其赋值给一个video标签，就能看到图像了.

<p>这是A页面</p>

<div class="local-stream-page">
  <video autoplay controls muted id="elA"></video>
  <button onclick="onStart()">打视频给B页面</button>
</div>

<script>

  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    })
    if (videoElA) {
      videoElA.srcObject = stream // 在 video 标签上播放媒体流
    }
    peerInit(stream) // 初始化连接
  } catch (error) {
    console.log('error：', error)
  }

</script>

然后就是重要部分了，我们需要用到WebRTC的API

RTCPeerConnection

RTCPeerConnection是WebRTC API中的一个对象，用于建立和管理两个或多个用户之间的实时通信。它允许通过互联网进行音频和视频通话，以及共享数据流。

RTCPeerConnection对象提供了一系列的方法和事件，用于配置、管理和控制媒体流的传输。它支持使用不同的技术，如ICE（Interactive Connectivity Establishment）和STUN（Session Traversal Utilities for NAT）来解决网络地址转换（NAT）问题，以便在防火墙后面的不同设备之间建立连接。

使用RTCPeerConnection对象，您可以创建媒体流并将其发送到其他设备，也可以接收来自其他设备的媒体流。它还支持使用SDP（Session Description Protocol）描述媒体会话的配置，以及通过ICE和STUN协议协商和转发媒体数据包的路由。
 

const peerInit = stream => {
  // 1. 创建连接实例
  peerA = new RTCPeerConnection()
  // 2. 添加视频流轨道
  stream.getTracks().forEach(track