RTCRtpScriptTransform

基準線 2025

新推出

自 2025 年 10 月起，此功能已在最新的裝置和瀏覽器版本中可用。此功能可能不適用於較舊的裝置或瀏覽器。

RTCRtpScriptTransform 介面是 WebRTC API 的一部分，用於將 WebRTC 編碼轉換（在 worker 執行緒中執行的 TransformStream）插入到 WebRTC 傳送器和接收器管道中。

建構函式

RTCRtpScriptTransform(): 建立一個新的 RTCRtpScriptTransform 物件例項。

RTCRtpScriptTransform 例項是透過一個 Worker 來構造的，轉換流程式碼將在該 Worker 中執行，同時還會提供一個（可選的）options 物件和要傳遞給 Worker 的可轉移物件陣列。然後，透過分別將它們分配給 RTCRtpReceiver.transform 和 RTCRtpSender.transform，將它們新增到傳入和傳出的 RTC 管道中。

在建立此物件時，以及每當到達一個編碼幀時，都會在 worker 的全域性物件上觸發 rtctransform 事件。該事件的 transformer 屬性是一個 RTCRtpScriptTransformer，它是主執行緒 RTCRtpScriptTransform 的 worker 端對應物。它具有從主執行緒 RTCRtpScriptTransform 共享的 readable（ReadableStream）和 writable（WritableStream）屬性——這些屬性在主執行緒中不是公開的。如果相應的 RTCRtpScriptTransform 與 RTCRtpReceiver 一起使用，則 readable 會從打包器中對傳入的編碼音訊或影片幀進行排隊。如果與 RTCRtpSender 一起使用，則 readable 包含來自編解碼器的幀。

Worker 執行緒的 rtctransform 事件處理程式定義了一個管道鏈。這會將編碼幀從 event.transformer.readable 透過定義轉換函式的 TransformStream 管道傳輸到 event.transformer.writable。event.transformer 還具有從 RTCRtpScriptTransform 建構函式（如果已定義）傳遞的 options 物件，可用於確定事件的來源，從而確定要新增到管道的特定 TransformStream。

示例

請注意，這些示例展示了 RTCRtpScriptTransform 的定義和用法。Worker 執行緒的轉換程式碼包含在使用 WebRTC 編碼轉換中更完整的示例裡。

為傳出幀新增轉換

此示例演示瞭如何透過 WebRTC 流式傳輸使用者攝像頭的影片，並新增 WebRTC 編碼轉換來修改傳出流。程式碼假定存在一個名為 peerConnection 的 RTCPeerConnection，它已連線到遠端對等方。

首先，我們獲取一個 MediaStreamTrack，使用 getUserMedia() 從媒體裝置獲取影片 MediaStream，然後使用 MediaStream.getTracks() 方法獲取流中的第一個 MediaStreamTrack。

使用 addTrack() 將軌道新增到對等連線併發送。addTrack() 方法返回正在用於傳送軌道的 RTCRtpSender。

// Get Video stream and MediaTrack
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const [track] = stream.getTracks();
const videoSender = peerConnection.addTrack(track, stream);

然後，構造一個 RTCRtpScriptTransform，它接受一個定義了轉換的 worker 指令碼，以及一個可選物件，可用於將任意訊息傳遞給 worker（在本例中，我們使用了一個值為 "senderTransform" 的 name 屬性，以告知 worker 該轉換將新增到出站流）。然後，透過將轉換分配給 RTCRtpSender.transform 屬性來將其新增到傳送器。

// Create a worker containing a TransformStream
const worker = new Worker("worker.js");
videoSender.transform = new RTCRtpScriptTransform(worker, {
  name: "senderTransform",
});

請注意，您可以在任何時候新增轉換。但是，在呼叫 addTrack() 後立即新增它，轉換將獲得傳送的第一個編碼幀。

為傳入幀新增轉換

此示例演示瞭如何新增 WebRTC 編碼轉換來修改傳入流。程式碼假定存在一個名為 peerConnection 的 RTCPeerConnection，它已連線到遠端對等方。

首先，我們新增一個 RTCPeerConnection track 事件處理程式，以便在流式傳輸新軌道時捕獲該事件。在該處理程式中，我們構造一個 RTCRtpScriptTransform 並將其新增到 event.receiver.transform（event.receiver 是一個 RTCRtpReceiver）。與前一個示例一樣，建構函式接受一個帶有 name 屬性的物件：但在這裡，我們使用 receiverTransform 作為值，以告知 worker 幀是從打包器傳入的。

peerConnection.ontrack = (event) => {
  const worker = new Worker("worker.js");
  event.receiver.transform = new RTCRtpScriptTransform(worker, {
    name: "receiverTransform",
  });
  received_video.srcObject = event.streams[0];
};

再次請注意，您可以隨時新增轉換流。但是，在 track 事件處理程式中新增它可確保轉換流將獲得軌道的第一個編碼幀。