RTCRtpScriptTransformer: options 屬性

基準線 2025
新推出

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

optionsRTCRtpScriptTransformer 介面的一個只讀屬性,它返回在 構造 相應的 RTCRtpScriptTransform 物件時(可選地)作為第二個引數傳遞的物件。

一個物件。

描述

options 最簡單的用途是讓主執行緒指示是否將相應的 RTCRtpScriptTransform 新增到 WebRTC 傳送者或接收者管道。如果同一個 worker 用於處理傳入和傳出的編碼幀,這一點很重要,因為它允許程式碼確定應該將哪個轉換應用於這些幀。

options 還可以用於將 訊息通道 的第二個埠傳送/傳輸到 worker 端轉換。然後,該通道可用於向轉換流傳送動態資訊,例如在加密金鑰更改或新增時。請注意,您也可以使用 Worker.postMessage() 向轉換髮送訊息,但如果 worker 在不同上下文中使用了,您則必須適當地重定向訊息(而訊息埠選項為特定轉換提供了一個直接通道)。

示例

如何指示當前 WebRTC 管道

RTCRtpScriptTransform 使用特定的 Worker 和 options 進行構造,然後透過將其分配給 RTCRtpSender.transformRTCRtpReceiver.transform,分別插入到 WebRTC 的傳出或傳入管道中。如果傳入和傳出管道的轉換使用了同一個 worker,那麼您需要在建構函式中提供 options 來指示要轉換的編碼幀是傳入的還是傳出的。

下面的示例展示了在將 track 新增到 peer connection(RTCPeerConnection)後,將其新增到傳送者管道,然後在新 track 接收時,再將另一個轉換新增到接收者管道的實現方式。

js
// videoSender is an RTCRtpSender.
const videoSender = peerConnection.addTrack(track, mediaStream);
videoSender.transform = new RTCRtpScriptTransform(worker, {
  name: "senderTransform",
});
js
peerConnection.ontrack = (event) => {
  // event.receiver is an RTCRtpReceiver
  event.receiver.transform = new RTCRtpScriptTransform(worker, {
    someOption: "receiverTransform",
  });
};

在上面的每種情況下,我們都提供了一個物件,其 options 物件的 name 屬性具有不同的值,這表明轉換被新增到的管道。請注意,options 中的屬性名稱和值是任意的:重要的是主執行緒和 worker 執行緒都知道使用了哪些屬性和值。

以下程式碼展示了在 worker 中如何使用傳遞的 options。首先,我們實現一個 rtctransform 事件的處理器,該事件在構造相應的 RTCRtpScriptTransform 時,以及在將新幀排隊處理時,在全域性 worker 物件上觸發。event.transformer 是一個 RTCRtpScriptTransformer,它具有 readablewritableoptions 屬性。

js
addEventListener("rtctransform", (event) => {
  let transform;
  // Select a transform based on passed options
  if (event.transformer.options.name === "senderTransform")
    transform = createSenderTransform(); // A TransformStream
  else if (event.transformer.options.name === "receiverTransform")
    transform = createReceiverTransform(); // A TransformStream
  else return;

  // Pipe frames from the readable to writeable through TransformStream
  event.transformer.readable
    .pipeThrough(transform)
    .pipeTo(event.transformer.writable);
});

該程式碼建立一個不同的 TransformStream 來處理傳出和傳入的幀,根據傳遞的 options 使用 createSenderTransform()createReceiverTransform()(然後它會將幀從 readable 透過選定的 TransformStream 管道傳輸到 writable)。

將訊息埠傳遞給轉換

此示例展示瞭如何建立一個 訊息通道,並將其中一個埠傳輸到 worker 中執行的 WebRTC 編碼轉換。然後,主執行緒可以在構造後將物件和訊息傳送/傳輸到 worker 中執行的轉換器,反之亦然。

下面的程式碼首先建立一個 MessageChannel,然後構造一個 RTCRtpScriptTransform,將 port2 值作為 options 引數中的一個屬性傳遞。該埠也包含在作為第三個建構函式引數傳遞的陣列中,以便將其傳輸到 worker 上下文中。

js
const channel = new MessageChannel();

const transform = new RTCRtpScriptTransform(
  worker,
  { purpose: "encrypter", port: channel.port2 },
  [channel.port2],
);

然後,worker 可以從在全域性 worker 物件上觸發的 rtctransform 事件中獲取該埠。

js
let messagePort;
addEventListener("rtctransform", (event) => {
  messagePort = event.transformer.options.port;
  // … other transformer code
});

通道兩端的程式碼可以使用 MessagePort.postMessage() 傳送和傳輸物件到另一端,並使用其 message 事件偵聽傳入的訊息。

例如,假設我們在一個名為 encryptionKeyUint8Array 型別陣列中有一個加密金鑰,我們可以像這樣將其從主執行緒傳輸到 worker:

js
const encryptionKeyBuffer = encryptionKey.buffer;
channel.port1.postMessage(encryptionKeyBuffer, [encryptionKeyBuffer]);

worker 將偵聽 message 事件以獲取金鑰:

js
messagePort.addEventListener("message", (event) => {
  const encryptionKeyBuffer = event.data;
  // … Use the encryptionKeyBuffer for encryption or any other purpose
});

有關更多資訊和示例,請參閱 訊息通道

規範

規範
WebRTC Encoded Transform
# dom-rtcrtpscripttransformer-options

瀏覽器相容性

另見