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.club.tw/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

瀏覽器相容性

另見