RTCRtpSender:replaceTrack() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

RTCRtpSender 方法 replaceTrack() 会将当前用作发送者源的轨道替换为新的 MediaStreamTrack

新轨道必须具有相同的媒体类型(音频、视频等),并且切换轨道不需要重新协商。

replaceTrack() 的用例之一是手机上前后摄像头之间切换的常见需求。使用 replaceTrack(),您可以为每个摄像头创建一个轨道对象,并在需要时在这两个对象之间切换。请参阅下面的 切换视频摄像头 示例。

语法

js
replaceTrack(newTrack)

参数

newTrack 可选

一个 MediaStreamTrack,指定用于替换 RTCRtpSender 当前源轨道的轨道。新轨道的 kind 必须与当前轨道的 kind 相同,否则替换轨道请求将失败。

返回值

一个 Promise,在轨道成功替换后兑现。如果由于任何原因无法替换轨道,该 Promise 将被拒绝;这通常是因为更改需要重新协商编解码器,而这是不允许的(请参阅 需要重新协商的事项)。

如果省略了 newTrack 或将其设置为 null,则 replaceTrack() 会停止发送者。在这种情况下不需要重新协商。

当 Promise 兑现时,兑现处理程序将收到一个 undefined 值。

异常

如果返回的 Promise 被拒绝,则以下异常之一将提供给拒绝处理程序:

InvalidModificationError DOMException

如果用新轨道替换 RTCRtpSender 的当前轨道需要重新协商,则返回此异常。

InvalidStateError DOMException

如果调用此方法的轨道已停止而不是正在运行,则返回此异常。

TypeError

如果新轨道的 kind 与原始轨道不匹配,则返回此异常。

用法说明

需要重新协商的事项

大多数轨道替换都可以无需重新协商完成。事实上,即使是看起来很大的更改也可以在不要求重新协商的情况下完成。但是,一些更改可能需要重新协商,因此会导致 replaceTrack() 失败。

  • 新轨道的解析度超出了与对端协商的尺寸范围;但是,大多数浏览器端点都允许更改解析度。
  • 新轨道的帧率太高,导致超出编解码器的块速率。
  • 新轨道是视频轨道,并且其原始或预编码状态与原始轨道的不同。
  • 新轨道是音频轨道,其通道数与原始轨道不同。
  • 具有内置编码器的媒体源(如硬件编码器)可能无法提供协商的编解码器。软件源可能未实现协商的编解码器。

示例

切换视频摄像头

js
const localConnection = new RTCPeerConnection();
const remoteConnection = new RTCPeerConnection();
// Configuring these to use the WebRTC API can be explored at
// https://mdn.org.cn/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample
const connections = [localConnection, remoteConnection];
function setCamera(selectedCamera) {
  navigator.mediaDevices
    .getUserMedia({
      video: {
        deviceId: {
          exact: selectedCamera,
        },
      },
    })
    .then((stream) => {
      const [videoTrack] = stream.getVideoTracks();
      connections.forEach((pc) => {
        const sender = pc
          .getSenders()
          .find((s) => s.track.kind === videoTrack.kind);
        console.log("Found sender:", sender);
        sender.replaceTrack(videoTrack);
      });
    })
    .catch((err) => {
      console.error(`Error happened: ${err}`);
    });
}

规范

规范
WebRTC:浏览器中的实时通信
# dom-rtcrtpsender-replacetrack

浏览器兼容性

另见