Rename PacketTrailer to FrameMetadata (#1982)

Author: lukasIO

.changeset/plenty-snails-tell.md

@@ -0,0 +1,5 @@
+---
+"livekit-client": minor
+---
+
+Rename PacketTrailer to FrameMetadata

examples/demo/demo.ts

@@ -1,5 +1,7 @@
 //@ts-ignore
 import E2EEWorker from '../../src/e2ee/worker/e2ee.worker?worker';
+//@ts-ignore
+import FrameMetadataWorker from '../../src/frameMetadata/worker/frameMetadata.worker?worker';
 import type {
   ChatMessage,
   LocalDataTrack,
@@ -44,8 +46,6 @@ import {
   supportsAV1,
   supportsVP9,
 } from '../../src/index';
-//@ts-ignore
-import PTWorker from '../../src/packetTrailer/worker/packetTrailer.worker?worker';
 import type { DataTrackFrame } from '../../src/room/data-track/frame';
 import { TrackEvent } from '../../src/room/events';
 import { isSVCCodec, sleep, supportsH265 } from '../../src/room/utils';
@@ -102,38 +102,38 @@ function updateSearchParams(url: string, token: string, key: string) {
   window.history.replaceState(null, '', `${window.location.pathname}?${params.toString()}`);
 }
 
-function getPacketTrailerPublishOptions() {
-  const enabled = (<HTMLInputElement>$('packet-trailer')).checked;
-  const timestamp = enabled && (<HTMLInputElement>$('packet-trailer-timestamp')).checked;
-  const frameId = enabled && (<HTMLInputElement>$('packet-trailer-frame-id')).checked;
+function getFrameMetadataPublishOptions() {
+  const enabled = (<HTMLInputElement>$('frame-metadata')).checked;
+  const timestamp = enabled && (<HTMLInputElement>$('frame-metadata-timestamp')).checked;
+  const frameId = enabled && (<HTMLInputElement>$('frame-metadata-frame-id')).checked;
 
   return timestamp || frameId ? { timestamp, frameId } : undefined;
 }
 
-function syncPacketTrailerPublishOptions(room = currentRoom) {
-  const packetTrailer = getPacketTrailerPublishOptions();
+function syncFrameMetadataPublishOptions(room = currentRoom) {
+  const frameMetadata = getFrameMetadataPublishOptions();
   if (!room) {
-    return packetTrailer;
+    return frameMetadata;
   }
 
-  room.options.publishDefaults.packetTrailer = packetTrailer;
+  room.options.publishDefaults.frameMetadata = frameMetadata;
   room.localParticipant.trackPublications.forEach((pub) => {
     if (pub.kind !== Track.Kind.Video) {
       return;
     }
-    pub.options = { ...pub.options, packetTrailer };
+    pub.options = { ...pub.options, frameMetadata };
     if (pub.track && isVideoTrack(pub.track)) {
-      pub.track.publishOptions = { ...pub.track.publishOptions, packetTrailer };
+      pub.track.publishOptions = { ...pub.track.publishOptions, frameMetadata };
     }
   });
-  return packetTrailer;
+  return frameMetadata;
 }
 
-function syncPacketTrailerFeatureControls() {
-  const enabled = (<HTMLInputElement>$('packet-trailer')).checked;
-  const featureControls = $('packet-trailer-features');
-  const timestamp = <HTMLInputElement>$('packet-trailer-timestamp');
-  const frameId = <HTMLInputElement>$('packet-trailer-frame-id');
+function syncFrameMetadataFeatureControls() {
+  const enabled = (<HTMLInputElement>$('frame-metadata')).checked;
+  const featureControls = $('frame-metadata-features');
+  const timestamp = <HTMLInputElement>$('frame-metadata-timestamp');
+  const frameId = <HTMLInputElement>$('frame-metadata-frame-id');
 
   featureControls.style.display = enabled ? 'block' : 'none';
   timestamp.disabled = !enabled;
@@ -142,20 +142,20 @@ function syncPacketTrailerFeatureControls() {
     timestamp.checked = false;
     frameId.checked = false;
   }
-  syncPacketTrailerPublishOptions();
+  syncFrameMetadataPublishOptions();
 }
 
-(<HTMLInputElement>$('packet-trailer')).addEventListener(
+(<HTMLInputElement>$('frame-metadata')).addEventListener(
   'change',
-  syncPacketTrailerFeatureControls,
+  syncFrameMetadataFeatureControls,
 );
-(<HTMLInputElement>$('packet-trailer-timestamp')).addEventListener('change', () =>
-  syncPacketTrailerPublishOptions(),
+(<HTMLInputElement>$('frame-metadata-timestamp')).addEventListener('change', () =>
+  syncFrameMetadataPublishOptions(),
 );
-(<HTMLInputElement>$('packet-trailer-frame-id')).addEventListener('change', () =>
-  syncPacketTrailerPublishOptions(),
+(<HTMLInputElement>$('frame-metadata-frame-id')).addEventListener('change', () =>
+  syncFrameMetadataPublishOptions(),
 );
-syncPacketTrailerFeatureControls();
+syncFrameMetadataFeatureControls();
 
 // handles actions from the HTML
 const appActions = {
@@ -181,8 +181,8 @@ const appActions = {
     const cryptoKey = (<HTMLSelectElement>$('crypto-key')).value;
     const autoSubscribe = (<HTMLInputElement>$('auto-subscribe')).checked;
     const e2eeEnabled = (<HTMLInputElement>$('e2ee')).checked;
-    const packetTrailerEnabled = (<HTMLInputElement>$('packet-trailer')).checked;
-    const packetTrailer = getPacketTrailerPublishOptions();
+    const frameMetadataEnabled = (<HTMLInputElement>$('frame-metadata')).checked;
+    const frameMetadata = getFrameMetadataPublishOptions();
     const audioOutputId = (<HTMLSelectElement>$('audio-output')).value;
     let backupCodecPolicy: BackupCodecPolicy | undefined;
     if ((<HTMLInputElement>$('multicodec-simulcast')).checked) {
@@ -207,15 +207,15 @@ const appActions = {
         screenShareEncoding: ScreenSharePresets.h1080fps30.encoding,
         scalabilityMode: 'L3T3_KEY',
         backupCodecPolicy: backupCodecPolicy,
-        packetTrailer,
+        frameMetadata,
       },
       videoCaptureDefaults: {
         resolution: VideoPresets.h720.resolution,
       },
       encryption: e2eeEnabled
         ? { keyProvider: state.e2eeKeyProvider, worker: new E2EEWorker() }
         : undefined,
-      packetTrailer: packetTrailerEnabled ? { worker: new PTWorker() } : undefined,
+      frameMetadata: frameMetadataEnabled ? { worker: new FrameMetadataWorker() } : undefined,
     };
     if (
       roomOpts.publishDefaults?.videoCodec === 'av1' ||
@@ -571,7 +571,7 @@ const appActions = {
     // read and set current key from input
     const cryptoKey = (<HTMLSelectElement>$('crypto-key')).value;
     state.e2eeKeyProvider.setKey(cryptoKey);
-    syncPacketTrailerPublishOptions(currentRoom);
+    syncFrameMetadataPublishOptions(currentRoom);
 
     await currentRoom.setE2EEEnabled(!currentRoom.isE2EEEnabled);
   },
@@ -649,9 +649,9 @@ const appActions = {
     } else {
       appendLog('enabling video');
     }
-    const publishOptions = syncPacketTrailerPublishOptions(currentRoom);
+    const publishOptions = syncFrameMetadataPublishOptions(currentRoom);
     await currentRoom.localParticipant.setCameraEnabled(!enabled, undefined, {
-      packetTrailer: publishOptions,
+      frameMetadata: publishOptions,
     });
     setButtonDisabled('toggle-video-button', false);
     renderParticipant(currentRoom.localParticipant);

examples/demo/index.html

@@ -76,19 +76,19 @@ <h2>Livekit Sample App</h2>
               <label for="e2ee" class="form-check-label"> E2E Encryption </label>
             </div>
             <div>
-              <input type="checkbox" class="form-check-input" id="packet-trailer" />
-              <label for="packet-trailer" class="form-check-label"> Packet Trailer </label>
+              <input type="checkbox" class="form-check-input" id="frame-metadata" />
+              <label for="frame-metadata" class="form-check-label"> Frame Metadata </label>
             </div>
-            <div id="packet-trailer-features" style="display: none">
+            <div id="frame-metadata-features" style="display: none">
               <div class="ml-3">
-                <input type="checkbox" class="form-check-input" id="packet-trailer-timestamp" />
-                <label for="packet-trailer-timestamp" class="form-check-label">
+                <input type="checkbox" class="form-check-input" id="frame-metadata-timestamp" />
+                <label for="frame-metadata-timestamp" class="form-check-label">
                   Attach Timestamp
                 </label>
               </div>
               <div class="ml-3">
-                <input type="checkbox" class="form-check-input" id="packet-trailer-frame-id" />
-                <label for="packet-trailer-frame-id" class="form-check-label">
+                <input type="checkbox" class="form-check-input" id="frame-metadata-frame-id" />
+                <label for="frame-metadata-frame-id" class="form-check-label">
                   Attach Frame ID
                 </label>
               </div>
@@ -370,10 +370,7 @@ <h3>Data Tracks</h3>
           <h3 class="mt-4">RPC</h3>
 
           <div class="input-group input-group-sm">
-            <select
-              class="form-control text-monospace"
-              id="rpc-send-destination"
-            >
+            <select class="form-control text-monospace" id="rpc-send-destination">
               <option value="">(no remote participants)</option>
             </select>
           </div>
@@ -396,14 +393,14 @@ <h3 class="mt-4">RPC</h3>
               <button
                 class="btn btn-outline-secondary"
                 type="button"
-                onclick="appActions.fillRpcPreset('rpc-send-payload','hello')"
+                onclick="appActions.fillRpcPreset('rpc-send-payload', 'hello')"
               >
                 Hello
               </button>
               <button
                 class="btn btn-outline-secondary"
                 type="button"
-                onclick="appActions.fillRpcPreset('rpc-send-payload','20k')"
+                onclick="appActions.fillRpcPreset('rpc-send-payload', '20k')"
               >
                 20k
               </button>
@@ -417,11 +414,7 @@ <h3 class="mt-4">RPC</h3>
               </button>
             </div>
           </div>
-          <div
-            id="rpc-send-result"
-            class="text-monospace mt-1"
-            style="font-size: 0.75rem;"
-          ></div>
+          <div id="rpc-send-result" class="text-monospace mt-1" style="font-size: 0.75rem"></div>
 
           <div class="input-group input-group-sm mt-3">
             <input

package.json

@@ -17,9 +17,14 @@
       "require": "./dist/livekit-client.e2ee.worker.js"
     },
     "./packet-trailer-worker": {
-      "types": "./dist/src/packetTrailer/worker/packetTrailer.worker.d.ts",
-      "import": "./dist/livekit-client.pt.worker.mjs",
-      "require": "./dist/livekit-client.pt.worker.js"
+      "types": "./dist/src/frameMetadata/worker/frameMetadata.worker.d.ts",
+      "import": "./dist/livekit-client.fm.worker.mjs",
+      "require": "./dist/livekit-client.fm.worker.js"
+    },
+    "./frame-metadata-worker": {
+      "types": "./dist/src/frameMetadata/worker/frameMetadata.worker.d.ts",
+      "import": "./dist/livekit-client.fm.worker.mjs",
+      "require": "./dist/livekit-client.fm.worker.js"
     }
   },
   "files": [
@@ -35,16 +40,16 @@
       "./dist/src/e2ee/worker/e2ee.worker.d.ts": [
         "./dist/ts4.2/e2ee/worker/e2ee.worker.d.ts"
       ],
-      "./dist/src/packetTrailer/worker/packetTrailer.worker.d.ts": [
-        "./dist/ts4.2/packetTrailer/worker/packetTrailer.worker.d.ts"
+      "./dist/src/frameMetadata/worker/frameMetadata.worker.d.ts": [
+        "./dist/ts4.2/frameMetadata/worker/frameMetadata.worker.d.ts"
       ]
     }
   },
   "repository": "git@github.com:livekit/client-sdk-js.git",
   "author": "LiveKit <hello@livekit.io>",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "rollup --config --bundleConfigAsCjs && rollup --config rollup.config.worker.js --bundleConfigAsCjs && rollup --config rollup.config.pt-worker.js --bundleConfigAsCjs && pnpm downlevel-dts",
+    "build": "rollup --config --bundleConfigAsCjs && rollup --config rollup.config.worker.js --bundleConfigAsCjs && rollup --config rollup.config.fm-worker.js --bundleConfigAsCjs && pnpm downlevel-dts",
     "build:clean": "rm -rf ./dist && pnpm build",
     "build:watch": "rollup --watch --config --bundleConfigAsCjs",
     "build:worker:watch": "rollup --watch --config rollup.config.worker.js --bundleConfigAsCjs",

rollup.config.pt-worker.js rollup.config.fm-worker.jsrollup.config.pt-worker.js renamed to rollup.config.fm-worker.js

@@ -4,22 +4,22 @@ import packageJson from './package.json';
 import { commonPlugins, kebabCaseToPascalCase } from './rollup.config';
 
 export default {
-  input: 'src/packetTrailer/worker/packetTrailer.worker.ts',
+  input: 'src/frameMetadata/worker/frameMetadata.worker.ts',
   output: [
     {
-      file: `dist/${packageJson.name}.pt.worker.mjs`,
+      file: `dist/${packageJson.name}.fm.worker.mjs`,
       format: 'es',
       strict: true,
       sourcemap: true,
     },
     {
-      file: `dist/${packageJson.name}.pt.worker.js`,
+      file: `dist/${packageJson.name}.fm.worker.js`,
       format: 'umd',
       strict: true,
       sourcemap: true,
-      name: kebabCaseToPascalCase(packageJson.name) + '.pt.worker',
+      name: kebabCaseToPascalCase(packageJson.name) + '.fm.worker',
       plugins: [terser()],
     },
   ],
-  plugins: [typescript({ tsconfig: './src/packetTrailer/worker/tsconfig.json' }), ...commonPlugins],
+  plugins: [typescript({ tsconfig: './src/frameMetadata/worker/tsconfig.json' }), ...commonPlugins],
 };

src/e2ee/E2eeManager.ts

@@ -1,8 +1,8 @@
 import { Encryption_Type, TrackInfo } from '@livekit/protocol';
 import { EventEmitter } from 'events';
 import type TypedEventEmitter from 'typed-emitter';
+import { hasFrameMetadataPublishOptions } from '../frameMetadata/utils';
 import log, { LogLevel, workerLogger } from '../logger';
-import { hasPacketTrailerPublishOptions } from '../packetTrailer/utils';
 import type RTCEngine from '../room/RTCEngine';
 import type Room from '../room/Room';
 import { ConnectionState } from '../room/Room';
@@ -230,7 +230,7 @@ export class E2EEManager
         }
         break;
       case 'packetTrailerMetadata':
-        this.handlePacketTrailerMetadata(data.trackId, data.rtpTimestamp, data.ssrc, data.metadata);
+        this.handleFrameMetadata(data.trackId, data.rtpTimestamp, data.ssrc, data.metadata);
         break;
       default:
         break;
@@ -242,7 +242,7 @@ export class E2EEManager
     this.emit(EncryptionEvent.EncryptionError, ev.error, undefined);
   };
 
-  private handlePacketTrailerMetadata(
+  private handleFrameMetadata(
     trackId: string,
     rtpTimestamp: number,
     ssrc: number,
@@ -260,9 +260,9 @@ export class E2EEManager
           pub.track &&
           pub.track.mediaStreamID === trackId &&
           pub.track instanceof RemoteVideoTrack &&
-          pub.track.packetTrailerExtractor
+          pub.track.frameMetadataExtractor
         ) {
-          pub.track.packetTrailerExtractor.storeMetadata(rtpTimestamp, ssrc, metadata);
+          pub.track.frameMetadataExtractor.storeMetadata(rtpTimestamp, ssrc, metadata);
           return;
         }
       }
@@ -509,7 +509,9 @@ export class E2EEManager
       sender,
       track.mediaStreamID,
       undefined,
-      isVideoTrack(track) ? track.publishOptions?.packetTrailer : undefined,
+      isVideoTrack(track)
+        ? (track.publishOptions?.frameMetadata ?? track.publishOptions?.packetTrailer)
+        : undefined,
     );
   }
 
@@ -598,7 +600,7 @@ export class E2EEManager
     sender: RTCRtpSender,
     trackId: string,
     codec?: VideoCodec,
-    packetTrailer?: TrackPublishOptions['packetTrailer'],
+    frameMetadata?: TrackPublishOptions['frameMetadata'],
   ) {
     if (E2EE_FLAG in sender || !this.worker) {
       return;
@@ -615,8 +617,8 @@ export class E2EEManager
         participantIdentity: this.room.localParticipant.identity,
         trackId,
         codec,
-        hasPacketTrailer: hasPacketTrailerPublishOptions(packetTrailer),
-        packetTrailer,
+        hasPacketTrailer: hasFrameMetadataPublishOptions(frameMetadata),
+        packetTrailer: frameMetadata,
       };
       // @ts-ignore
       sender.transform = new RTCRtpScriptTransform(this.worker, options);
@@ -633,8 +635,8 @@ export class E2EEManager
           trackId,
           participantIdentity: this.room.localParticipant.identity,
           isReuse: false,
-          hasPacketTrailer: hasPacketTrailerPublishOptions(packetTrailer),
-          packetTrailer,
+          hasPacketTrailer: hasFrameMetadataPublishOptions(frameMetadata),
+          packetTrailer: frameMetadata,
         },
       };
       this.worker.postMessage(msg, [senderStreams.readable, senderStreams.writable]);