摘要

本文主要介绍了 WebRTC 的基本概念、与 WebSocket 的区别、浏览器兼容性、适用场景、优缺点，还阐述了 web 端基础常用相关 API，并对后续探索方向做了简要介绍。

1. WebRTC 的基础概念

• 1.1 WebRTC 介绍

  • WebRTC 是 Web 实时通信的缩写，是可用于视频、音频聊天或 P2P 文件分享等 Web 应用中的 API。它能让浏览器直接建立连接进行实时语音和视频对话，实现点对点通信。
  • 例如在一些视频通话或文件分享的 Web 应用场景中，WebRTC 就能发挥作用。

• 1.2 WebRTC 与 WebSocket 的区别

  • WebSocket 是基于单个 TCP 连接的全双工通信协议，允许服务器主动向客户端推送数据，主要用于文本和二进制数据的实时交换，连接建立在 TCP 上。
  • 而 WebRTC 专注于媒体流的实时传输，如视频和音频通话，有更复杂的媒体处理能力，利用 NAT 穿透技术在浏览器间建立点对点连接，还内置了视频、音频流的编解码和传输功能。
  • 例如，在聊天应用中 WebSocket 比较适用，而 WebRTC 更适合视频通话场景。

• 1.3 WebRTC 的浏览器兼容性

  • 主流浏览器对 WebRTC 有一定的支持情况，移动端大多支持，但 iOS 设备上 Safari 浏览器版本需大于 10.1。
  • 老旧浏览器或 WebView 组件可能不支持，且不同浏览器对摄像头、麦克风等隐私权限处理不同，影响用户授权和连接稳定性。
  • 例如，开发者在开发应用时，要根据目标用户使用的浏览器情况，考虑 WebRTC 的兼容性。

• 1.4 WebRTC 的适用场景

  • 在线教育、社交媒体、视频会议、直播平台、物联网等领域都有 WebRTC 的应用，如新东方云教室、Soul、腾讯会议、抖音、小米智能家居等。
  • 这些不同的场景利用 WebRTC 实现实时互动教学、视频聊天、视频会议、低延迟直播、设备间实时视频监控等功能。

• 1.5 WebRTC 的优缺点

  • 优点：支持浏览器间实时通信且无需插件或第三方软件；采用先进编解码器提供高质量通信；通信端到端加密保护隐私；支持 P2P 连接减少延迟和带宽消耗；跨平台和跨浏览器。
  • 缺点：信令过程需开发者自己实现；在某些网络环境下建立 P2P 连接受防火墙和 NAT 限制；可能泄露用户 IP 地址引发隐私问题；消耗大量 CPU 和带宽资源。

2. WebRTC 的 web 端基础常用相关 API

• 2.1 getUserMedia

  • 这是用于访问用户音视频设备（摄像头和麦克风）的接口。
  • 在简单场景下可直接调用默认参数获取默认设备，复杂场景下要先列出所有可用设备，选择所需设备后配置并传递设备信息。
  • 代码示例如下：

// 1. 列出所有可用的媒体设备
navigator.mediaDevices.enumerateDevices()
 .then(devices => {
    devices.forEach(device => {
      console.log(device.kind, device.label, device.deviceId);
    });
    // 2. 根据用户选择的 deviceId 请求媒体流
    const constraints = {
      audio: { deviceId: { exact: selectedAudioDeviceId } },
      video: { deviceId: { exact: selectedVideoDeviceId } }
    };
    // 3. 请求用户媒体流
    return navigator.mediaDevices.getUserMedia(constraints);
  })
 .then(stream => {
    // 将媒体流绑定到视频或音频元素上
    const videoElement.srcObject = stream;
  })
 .catch(error => {
    console.error('媒体设备访问失败:', error);
  });

- 还介绍了 media constraints 的不同配置，如同时获取音视频输入、指定设备、指定分辨率、指定摄像头方向、指定帧速率等不同场景下的配置。

• 2.2 getDisplayMedia

  • 用于在浏览器中实现屏幕分享功能，可选择分享整个屏幕或特定应用窗口。
  • 调用该 API 会返回一个 Promise，解析值为包含屏幕视频流的 MediaStream 对象。
  • 示例代码：

async function getShareMedia() {
  const constraints = { video: { width: 1920, height: 1080 }, audio: false };
  // 停止之前的媒体流
  if (window.stream) {
    window.stream.getTracks().forEach(track => track.stop());
  }
  try {
    return await navigator.mediaDevices.getDisplayMedia(constraints);
  } catch (error) {
    console.error('屏幕分享失败:', error);
  }
}

- 也介绍了其 media constraints 的基本配置、指定分辨率、音频设置等内容。

• 2.3 RTCPeerConnection

  • 用于管理音视频连接，可创建和维护与其他用户的实时通信，处理媒体流和网络连接等问题。
  • 创建时需提供配置对象（如包含 STUN 服务器信息），有创建连接请求、设置描述信息、处理媒体流、事件处理等主要功能。
  • 代码示例：

const configuration = {
    iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
};
const peerConnection = new RTCPeerConnection(configuration);

peerConnection.createOffer()
   .then(offer => peerConnection.setLocalDescription(offer))
   .then(() => {
        // 发送 offer 给对端
    });

• 2.4 RTCDataChannel

  • 用于在对等端之间传输任意数据，支持低延迟、可靠性可选的数据传输方式。
  • 通过 RTCPeerConnection 创建数据通道，有发送和接收数据、事件处理等功能。
  • 示例代码：

const dataChannel = peerConnection.createDataChannel("myDataChannel");
dataChannel.send("Hello, WebRTC!");
dataChannel.onmessage = (event) => {
    console.log("Received message:", event.data);
};

• 2.5 API 协同工作

  • 通过 getUserMedia 获取用户设备媒体流，结合 getDisplayMedia 进行屏幕分享，利用 RTCPeerConnection 管理音视频连接，最后通过 RTCDataChannel 实现数据传输，协同工作可构建视频通话应用。

3. 小结

• 本文是 WebRTC 探索之旅的第一步，介绍了 WebRTC 的核心定义和基础 API，为构建实时通信应用奠定了基础，后续还将深入挖掘 WebRTC 的更多核心技术。