WebRTC 3种方式添加流各显神通、快来解锁

2023-03-03 19:04:07

在 WebRTC 中管理媒体流：掌握 addStream、addTrack 和 addTransceiver

简介

在实时通信的领域，WebRTC（Web 实时通信）扮演着至关重要的角色。为了在 WebRTC 中进行 P2P 通信，我们需要将采集到的媒体流添加到 PeerConnection 中。WebRTC 提供了三个强大的 API 来完成这项任务：addStream、addTrack 和 addTransceiver。本文将深入探讨这三个 API，帮助你了解它们的异同，并通过实际案例来巩固你的理解。

1. 流添加之“三剑客”：addStream、addTrack、addTransceiver

当我们完成音视频采集后，为了进行 P2P 通信，我们需要将采集到的媒体流添加到 PeerConnection 中。WebRTC 提供了 3 个 API 来帮助我们完成此任务：

addStream ：添加整个媒体流，包括音视频轨道。
addTrack ：添加单个媒体轨道，可以是音频轨道或视频轨道。
addTransceiver ：添加一个完整的媒体通道，包括发送端和接收端。

2. 横向对比各显身手：了解他们的异同

为了更好地理解这三个 API，让我们逐个分析它们的异同：

addStream ：
- 特点：添加整个媒体流，使用简单，兼容性强。
- 适用场景 ：当我们需要同时添加多个媒体轨道时，使用 addStream 更为便捷。
addTrack ：
- 特点：添加单个媒体轨道，可以精细控制媒体流的内容。
- 适用场景 ：当我们需要单独添加或移除媒体轨道时，使用 addTrack 更为灵活。
addTransceiver ：
- 特点：添加一个完整的媒体通道，包含发送端和接收端。
- 适用场景 ：当我们需要对媒体流进行更细粒度的控制时，使用 addTransceiver 更为合适。

3. 案例解析：深入实践，巩固所学

为了进一步理解这三个 API 的使用方法，我们准备了两个实际案例来进行演示：

案例 1：添加整个媒体流

// 获取媒体流
navigator.mediaDevices.getUserMedia({audio: true, video: true})
  .then((stream) => {
    // 将媒体流添加到 PeerConnection 中
    peerConnection.addStream(stream);
  });

案例 2：添加单个媒体轨道

// 获取媒体流
navigator.mediaDevices.getUserMedia({audio: true, video: true})
  .then((stream) => {
    // 从媒体流中提取音频轨道
    const audioTrack = stream.getAudioTracks()[0];

    // 将音频轨道添加到 PeerConnection 中
    peerConnection.addTrack(audioTrack);
  });