@vidtreo/recorder 0.9.4 → 0.9.8

package/dist/index.js

@@ -152,7 +152,12 @@ class AudioLevelAnalyzer {
   }
 }
 // src/core/config/config-constants.ts
-import { QUALITY_HIGH } from "mediabunny";
+import {
+  QUALITY_HIGH,
+  QUALITY_LOW,
+  QUALITY_MEDIUM,
+  QUALITY_VERY_HIGH
+} from "mediabunny";
 
 // src/core/processor/format-codec-mapper.ts
 var FORMAT_DEFAULT_CODECS = {
@@ -172,15 +177,32 @@ function getAudioCodecForFormat(format, overrideCodec) {
 }
 
 // src/core/config/config-constants.ts
+var QUALITY_MAP = {
+  sd: QUALITY_LOW,
+  hd: QUALITY_MEDIUM,
+  fhd: QUALITY_HIGH,
+  "4k": QUALITY_VERY_HIGH
+};
+var RESOLUTION_MAP = {
+  sd: { width: 854, height: 480 },
+  hd: { width: 1280, height: 720 },
+  fhd: { width: 1920, height: 1080 },
+  "4k": { width: 3840, height: 2160 }
+};
 var DEFAULT_BACKEND_URL = "https://api.vidtreo.com";
 var DEFAULT_TRANSCODE_CONFIG = Object.freeze({
   format: "mp4",
   fps: 30,
-  width: 1920,
-  height: 1080,
-  bitrate: QUALITY_HIGH,
+  width: RESOLUTION_MAP.fhd.width,
+  height: RESOLUTION_MAP.fhd.height,
+  bitrate: QUALITY_MAP.fhd,
   audioCodec: "aac",
-  audioBitrate: 96000
+  audioBitrate: 96000,
+  watermark: {
+    url: "https://avatars.githubusercontent.com/u/244247750?s=200&v=4",
+    opacity: 1,
+    position: "bottom-right"
+  }
 });
 function getDefaultConfigForFormat(format) {
   return {
@@ -190,39 +212,31 @@ function getDefaultConfigForFormat(format) {
   };
 }
 // src/core/config/preset-mapper.ts
-import {
-  QUALITY_HIGH as QUALITY_HIGH2,
-  QUALITY_LOW,
-  QUALITY_MEDIUM,
-  QUALITY_VERY_HIGH
-} from "mediabunny";
-var QUALITY_MAP = {
-  sd: QUALITY_LOW,
-  hd: QUALITY_MEDIUM,
-  fhd: QUALITY_HIGH2,
-  "4k": QUALITY_VERY_HIGH
-};
 var AUDIO_BITRATE = 128000;
-function mapPresetToConfig(preset, maxWidth, maxHeight, outputFormat) {
+function mapPresetToConfig(options) {
+  const { preset, outputFormat, watermark } = options;
   if (!(preset in QUALITY_MAP)) {
     throw new Error(`Invalid preset: ${preset}`);
   }
-  if (typeof maxWidth !== "number" || maxWidth <= 0) {
-    throw new Error("maxWidth must be a positive number");
-  }
-  if (typeof maxHeight !== "number" || maxHeight <= 0) {
-    throw new Error("maxHeight must be a positive number");
-  }
+  const { width, height } = RESOLUTION_MAP[preset];
   const format = outputFormat || "mp4";
   const audioCodec = getDefaultAudioCodecForFormat(format);
-  return {
+  const config = {
     format,
-    width: maxWidth,
-    height: maxHeight,
+    width,
+    height,
     bitrate: QUALITY_MAP[preset],
     audioCodec,
     audioBitrate: AUDIO_BITRATE
   };
+  if (watermark) {
+    config.watermark = {
+      url: watermark.url,
+      opacity: watermark.opacity,
+      position: watermark.position
+    };
+  }
+  return config;
 }
 
 // src/core/config/config-service.ts
@@ -308,10 +322,14 @@ class ConfigService {
       throw new Error(`Failed to fetch config: ${response.status} ${response.statusText}`);
     }
     const data = await response.json();
-    if (!data.presetEncoding || typeof data.max_width !== "number" || typeof data.max_height !== "number") {
-      throw new Error("Invalid config response from backend");
+    if (!data.presetEncoding) {
+      throw new Error("Invalid config response from backend: missing presetEncoding");
     }
-    return mapPresetToConfig(data.presetEncoding, data.max_width, data.max_height, data.outputFormat);
+    return mapPresetToConfig({
+      preset: data.presetEncoding,
+      outputFormat: data.outputFormat,
+      watermark: data.watermark
+    });
   }
 }
 
@@ -3029,7 +3047,7 @@ function isScreenCaptureStream(stream) {
 
 // src/core/processor/bitrate-utils.ts
 import {
-  QUALITY_HIGH as QUALITY_HIGH3,
+  QUALITY_HIGH as QUALITY_HIGH2,
   QUALITY_LOW as QUALITY_LOW2,
   QUALITY_MEDIUM as QUALITY_MEDIUM2,
   QUALITY_VERY_HIGH as QUALITY_VERY_HIGH2
@@ -3047,7 +3065,7 @@ function serializeBitrate(bitrate) {
   if (bitrate === QUALITY_MEDIUM2) {
     return "medium";
   }
-  if (bitrate === QUALITY_HIGH3) {
+  if (bitrate === QUALITY_HIGH2) {
     return "high";
   }
   if (bitrate === QUALITY_VERY_HIGH2) {
@@ -4148,27 +4166,32 @@ var removeEmulationPreventionBytes = (data) => {
   }
   return new Uint8Array(result);
 };
-var transformAnnexBToLengthPrefixed = (packetData) => {
-  const NAL_UNIT_LENGTH_SIZE = 4;
-  const nalUnits = findNalUnitsInAnnexB(packetData);
-  if (nalUnits.length === 0) {
-    return null;
-  }
-  let totalSize = 0;
-  for (const nalUnit of nalUnits) {
-    totalSize += NAL_UNIT_LENGTH_SIZE + nalUnit.byteLength;
-  }
-  const avccData = new Uint8Array(totalSize);
-  const dataView = new DataView(avccData.buffer);
+var ANNEX_B_START_CODE = new Uint8Array([0, 0, 0, 1]);
+var concatNalUnitsInLengthPrefixed = (nalUnits, lengthSize) => {
+  const totalLength = nalUnits.reduce((a, b) => a + lengthSize + b.byteLength, 0);
+  const result = new Uint8Array(totalLength);
   let offset = 0;
   for (const nalUnit of nalUnits) {
-    const length = nalUnit.byteLength;
-    dataView.setUint32(offset, length, false);
-    offset += 4;
-    avccData.set(nalUnit, offset);
+    const dataView = new DataView(result.buffer, result.byteOffset, result.byteLength);
+    switch (lengthSize) {
+      case 1:
+        dataView.setUint8(offset, nalUnit.byteLength);
+        break;
+      case 2:
+        dataView.setUint16(offset, nalUnit.byteLength, false);
+        break;
+      case 3:
+        setUint24(dataView, offset, nalUnit.byteLength, false);
+        break;
+      case 4:
+        dataView.setUint32(offset, nalUnit.byteLength, false);
+        break;
+    }
+    offset += lengthSize;
+    result.set(nalUnit, offset);
     offset += nalUnit.byteLength;
   }
-  return avccData;
+  return result;
 };
 var extractNalUnitTypeForAvc = (data) => {
   return data[0] & 31;
@@ -5006,6 +5029,32 @@ if (typeof FinalizationRegistry !== "undefined") {
     }
   });
 }
+var VIDEO_SAMPLE_PIXEL_FORMATS = [
+  "I420",
+  "I420P10",
+  "I420P12",
+  "I420A",
+  "I420AP10",
+  "I420AP12",
+  "I422",
+  "I422P10",
+  "I422P12",
+  "I422A",
+  "I422AP10",
+  "I422AP12",
+  "I444",
+  "I444P10",
+  "I444P12",
+  "I444A",
+  "I444AP10",
+  "I444AP12",
+  "NV12",
+  "RGBA",
+  "RGBX",
+  "BGRA",
+  "BGRX"
+];
+var VIDEO_SAMPLE_PIXEL_FORMATS_SET = new Set(VIDEO_SAMPLE_PIXEL_FORMATS);
 
 class VideoSample {
   get displayWidth() {
@@ -5029,8 +5078,8 @@ class VideoSample {
       if (!init || typeof init !== "object") {
         throw new TypeError("init must be an object.");
       }
-      if (!("format" in init) || typeof init.format !== "string") {
-        throw new TypeError("init.format must be a string.");
+      if (init.format === undefined || !VIDEO_SAMPLE_PIXEL_FORMATS_SET.has(init.format)) {
+        throw new TypeError("init.format must be one of: " + VIDEO_SAMPLE_PIXEL_FORMATS.join(", "));
       }
       if (!Number.isInteger(init.codedWidth) || init.codedWidth <= 0) {
         throw new TypeError("init.codedWidth must be a positive integer.");
@@ -5048,13 +5097,14 @@ class VideoSample {
         throw new TypeError("init.duration, when provided, must be a non-negative number.");
       }
       this._data = toUint8Array(data).slice();
+      this._layout = init.layout ?? createDefaultPlaneLayout(init.format, init.codedWidth, init.codedHeight);
       this.format = init.format;
       this.codedWidth = init.codedWidth;
       this.codedHeight = init.codedHeight;
       this.rotation = init.rotation ?? 0;
       this.timestamp = init.timestamp;
       this.duration = init.duration ?? 0;
-      this.colorSpace = new VideoColorSpace(init.colorSpace);
+      this.colorSpace = new VideoSampleColorSpace(init.colorSpace);
     } else if (typeof VideoFrame !== "undefined" && data instanceof VideoFrame) {
       if (init?.rotation !== undefined && ![0, 90, 180, 270].includes(init.rotation)) {
         throw new TypeError("init.rotation, when provided, must be 0, 90, 180, or 270.");
@@ -5066,13 +5116,14 @@ class VideoSample {
         throw new TypeError("init.duration, when provided, must be a non-negative number.");
       }
       this._data = data;
+      this._layout = null;
       this.format = data.format;
       this.codedWidth = data.displayWidth;
       this.codedHeight = data.displayHeight;
       this.rotation = init?.rotation ?? 0;
       this.timestamp = init?.timestamp ?? data.timestamp / 1e6;
       this.duration = init?.duration ?? (data.duration ?? 0) / 1e6;
-      this.colorSpace = data.colorSpace;
+      this.colorSpace = new VideoSampleColorSpace(data.colorSpace);
     } else if (typeof HTMLImageElement !== "undefined" && data instanceof HTMLImageElement || typeof SVGImageElement !== "undefined" && data instanceof SVGImageElement || typeof ImageBitmap !== "undefined" && data instanceof ImageBitmap || typeof HTMLVideoElement !== "undefined" && data instanceof HTMLVideoElement || typeof HTMLCanvasElement !== "undefined" && data instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && data instanceof OffscreenCanvas) {
       if (!init || typeof init !== "object") {
         throw new TypeError("init must be an object.");
@@ -5115,13 +5166,14 @@ class VideoSample {
       assert(context);
       context.drawImage(data, 0, 0);
       this._data = canvas;
+      this._layout = null;
       this.format = "RGBX";
       this.codedWidth = width;
       this.codedHeight = height;
       this.rotation = init.rotation ?? 0;
       this.timestamp = init.timestamp;
       this.duration = init.duration ?? 0;
-      this.colorSpace = new VideoColorSpace({
+      this.colorSpace = new VideoSampleColorSpace({
         matrix: "rgb",
         primaries: "bt709",
         transfer: "iec61966-2-1",
@@ -5144,8 +5196,10 @@ class VideoSample {
         rotation: this.rotation
       });
     } else if (this._data instanceof Uint8Array) {
-      return new VideoSample(this._data.slice(), {
+      assert(this._layout);
+      return new VideoSample(this._data, {
         format: this.format,
+        layout: this._layout,
         codedWidth: this.codedWidth,
         codedHeight: this.codedHeight,
         timestamp: this.timestamp,
@@ -5177,32 +5231,58 @@ class VideoSample {
     }
     this._closed = true;
   }
-  allocationSize() {
+  allocationSize(options = {}) {
+    validateVideoFrameCopyToOptions(options);
     if (this._closed) {
       throw new Error("VideoSample is closed.");
     }
+    if ((options.format ?? this.format) === null) {
+      throw new Error("Cannot get allocation size when format is null. Please manually provide an RGB pixel format in the" + " options instead.");
+    }
     assert(this._data !== null);
+    if (!isVideoFrame(this._data)) {
+      if (options.colorSpace || options.format && options.format !== this.format || options.layout || options.rect) {
+        const videoFrame = this.toVideoFrame();
+        const size = videoFrame.allocationSize(options);
+        videoFrame.close();
+        return size;
+      }
+    }
     if (isVideoFrame(this._data)) {
-      return this._data.allocationSize();
+      return this._data.allocationSize(options);
     } else if (this._data instanceof Uint8Array) {
       return this._data.byteLength;
     } else {
       return this.codedWidth * this.codedHeight * 4;
     }
   }
-  async copyTo(destination) {
+  async copyTo(destination, options = {}) {
     if (!isAllowSharedBufferSource(destination)) {
       throw new TypeError("destination must be an ArrayBuffer or an ArrayBuffer view.");
     }
+    validateVideoFrameCopyToOptions(options);
     if (this._closed) {
       throw new Error("VideoSample is closed.");
     }
+    if ((options.format ?? this.format) === null) {
+      throw new Error("Cannot copy video sample data when format is null. Please manually provide an RGB pixel format in the" + " options instead.");
+    }
     assert(this._data !== null);
+    if (!isVideoFrame(this._data)) {
+      if (options.colorSpace || options.format && options.format !== this.format || options.layout || options.rect) {
+        const videoFrame = this.toVideoFrame();
+        const layout = await videoFrame.copyTo(destination, options);
+        videoFrame.close();
+        return layout;
+      }
+    }
     if (isVideoFrame(this._data)) {
-      await this._data.copyTo(destination);
+      return this._data.copyTo(destination, options);
     } else if (this._data instanceof Uint8Array) {
+      assert(this._layout);
       const dest = toUint8Array(destination);
       dest.set(this._data);
+      return this._layout;
     } else {
       const canvas = this._data;
       const context = canvas.getContext("2d");
@@ -5210,6 +5290,10 @@ class VideoSample {
       const imageData = context.getImageData(0, 0, this.codedWidth, this.codedHeight);
       const dest = toUint8Array(destination);
       dest.set(imageData.data);
+      return [{
+        offset: 0,
+        stride: 4 * this.codedWidth
+      }];
     }
   }
   toVideoFrame() {
@@ -5419,6 +5503,23 @@ class VideoSample {
     this.close();
   }
 }
+
+class VideoSampleColorSpace {
+  constructor(init) {
+    this.primaries = init?.primaries ?? null;
+    this.transfer = init?.transfer ?? null;
+    this.matrix = init?.matrix ?? null;
+    this.fullRange = init?.fullRange ?? null;
+  }
+  toJSON() {
+    return {
+      primaries: this.primaries,
+      transfer: this.transfer,
+      matrix: this.matrix,
+      fullRange: this.fullRange
+    };
+  }
+}
 var isVideoFrame = (x) => {
   return typeof VideoFrame !== "undefined" && x instanceof VideoFrame;
 };
@@ -5447,6 +5548,127 @@ var validateCropRectangle = (crop, prefix) => {
     throw new TypeError(prefix + "crop.height must be a non-negative integer.");
   }
 };
+var validateVideoFrameCopyToOptions = (options) => {
+  if (!options || typeof options !== "object") {
+    throw new TypeError("options must be an object.");
+  }
+  if (options.colorSpace !== undefined && !["display-p3", "srgb"].includes(options.colorSpace)) {
+    throw new TypeError("options.colorSpace, when provided, must be 'display-p3' or 'srgb'.");
+  }
+  if (options.format !== undefined && typeof options.format !== "string") {
+    throw new TypeError("options.format, when provided, must be a string.");
+  }
+  if (options.layout !== undefined) {
+    if (!Array.isArray(options.layout)) {
+      throw new TypeError("options.layout, when provided, must be an array.");
+    }
+    for (const plane of options.layout) {
+      if (!plane || typeof plane !== "object") {
+        throw new TypeError("Each entry in options.layout must be an object.");
+      }
+      if (!Number.isInteger(plane.offset) || plane.offset < 0) {
+        throw new TypeError("plane.offset must be a non-negative integer.");
+      }
+      if (!Number.isInteger(plane.stride) || plane.stride < 0) {
+        throw new TypeError("plane.stride must be a non-negative integer.");
+      }
+    }
+  }
+  if (options.rect !== undefined) {
+    if (!options.rect || typeof options.rect !== "object") {
+      throw new TypeError("options.rect, when provided, must be an object.");
+    }
+    if (options.rect.x !== undefined && (!Number.isInteger(options.rect.x) || options.rect.x < 0)) {
+      throw new TypeError("options.rect.x, when provided, must be a non-negative integer.");
+    }
+    if (options.rect.y !== undefined && (!Number.isInteger(options.rect.y) || options.rect.y < 0)) {
+      throw new TypeError("options.rect.y, when provided, must be a non-negative integer.");
+    }
+    if (options.rect.width !== undefined && (!Number.isInteger(options.rect.width) || options.rect.width < 0)) {
+      throw new TypeError("options.rect.width, when provided, must be a non-negative integer.");
+    }
+    if (options.rect.height !== undefined && (!Number.isInteger(options.rect.height) || options.rect.height < 0)) {
+      throw new TypeError("options.rect.height, when provided, must be a non-negative integer.");
+    }
+  }
+};
+var createDefaultPlaneLayout = (format, codedWidth, codedHeight) => {
+  const planes = getPlaneConfigs(format);
+  const layouts = [];
+  let currentOffset = 0;
+  for (const plane of planes) {
+    const planeWidth = Math.ceil(codedWidth / plane.widthDivisor);
+    const planeHeight = Math.ceil(codedHeight / plane.heightDivisor);
+    const stride = planeWidth * plane.sampleBytes;
+    const planeSize = stride * planeHeight;
+    layouts.push({
+      offset: currentOffset,
+      stride
+    });
+    currentOffset += planeSize;
+  }
+  return layouts;
+};
+var getPlaneConfigs = (format) => {
+  const yuv = (yBytes, uvBytes, subX, subY, hasAlpha) => {
+    const configs = [
+      { sampleBytes: yBytes, widthDivisor: 1, heightDivisor: 1 },
+      { sampleBytes: uvBytes, widthDivisor: subX, heightDivisor: subY },
+      { sampleBytes: uvBytes, widthDivisor: subX, heightDivisor: subY }
+    ];
+    if (hasAlpha) {
+      configs.push({ sampleBytes: yBytes, widthDivisor: 1, heightDivisor: 1 });
+    }
+    return configs;
+  };
+  switch (format) {
+    case "I420":
+      return yuv(1, 1, 2, 2, false);
+    case "I420P10":
+    case "I420P12":
+      return yuv(2, 2, 2, 2, false);
+    case "I420A":
+      return yuv(1, 1, 2, 2, true);
+    case "I420AP10":
+    case "I420AP12":
+      return yuv(2, 2, 2, 2, true);
+    case "I422":
+      return yuv(1, 1, 2, 1, false);
+    case "I422P10":
+    case "I422P12":
+      return yuv(2, 2, 2, 1, false);
+    case "I422A":
+      return yuv(1, 1, 2, 1, true);
+    case "I422AP10":
+    case "I422AP12":
+      return yuv(2, 2, 2, 1, true);
+    case "I444":
+      return yuv(1, 1, 1, 1, false);
+    case "I444P10":
+    case "I444P12":
+      return yuv(2, 2, 1, 1, false);
+    case "I444A":
+      return yuv(1, 1, 1, 1, true);
+    case "I444AP10":
+    case "I444AP12":
+      return yuv(2, 2, 1, 1, true);
+    case "NV12":
+      return [
+        { sampleBytes: 1, widthDivisor: 1, heightDivisor: 1 },
+        { sampleBytes: 2, widthDivisor: 2, heightDivisor: 2 }
+      ];
+    case "RGBA":
+    case "RGBX":
+    case "BGRA":
+    case "BGRX":
+      return [
+        { sampleBytes: 4, widthDivisor: 1, heightDivisor: 1 }
+      ];
+    default:
+      assertNever(format);
+      assert(false);
+  }
+};
 var AUDIO_SAMPLE_FORMATS = new Set(["f32", "f32-planar", "s16", "s16-planar", "s32", "s32-planar", "u8", "u8-planar"]);
 
 class AudioSample {
@@ -7898,11 +8120,11 @@ class IsobmffMuxer extends Muxer {
       const trackData = this.getVideoTrackData(track, packet, meta);
       let packetData = packet.data;
       if (trackData.info.requiresAnnexBTransformation) {
-        const transformedData = transformAnnexBToLengthPrefixed(packetData);
-        if (!transformedData) {
+        const nalUnits = findNalUnitsInAnnexB(packetData);
+        if (nalUnits.length === 0) {
           throw new Error("Failed to transform packet data. Make sure all packets are provided in Annex B format, as" + " specified in ITU-T-REC-H.264 and ITU-T-REC-H.265.");
         }
-        packetData = transformedData;
+        packetData = concatNalUnitsInLengthPrefixed(nalUnits, 4);
       }
       const timestamp = this.validateAndNormalizeTimestamp(trackData.track, packet.timestamp, packet.type === "key");
       const internalSample = this.createSampleForTrack(trackData, packetData, timestamp, packet.duration, packet.type);
@@ -10144,6 +10366,41 @@ function requireInitialized(value, componentName) {
   return value;
 }
 
+// src/core/processor/worker/watermark-utils.ts
+function calculateWatermarkTargetSize(videoWidth, imageWidth, imageHeight) {
+  const targetWidth = Math.round(videoWidth * 0.07);
+  const scaleFactor = targetWidth / imageWidth;
+  const targetHeight = Math.round(imageHeight * scaleFactor);
+  return { width: targetWidth, height: targetHeight };
+}
+function getWatermarkPosition(options) {
+  const { watermarkWidth, watermarkHeight, videoWidth, videoHeight, position } = options;
+  const padding = 20;
+  switch (position) {
+    case "top-left":
+      return { x: padding, y: padding };
+    case "top-right":
+      return { x: videoWidth - watermarkWidth - padding, y: padding };
+    case "bottom-left":
+      return { x: padding, y: videoHeight - watermarkHeight - padding };
+    case "bottom-right":
+      return {
+        x: videoWidth - watermarkWidth - padding,
+        y: videoHeight - watermarkHeight - padding
+      };
+    case "center":
+      return {
+        x: (videoWidth - watermarkWidth) / 2,
+        y: (videoHeight - watermarkHeight) / 2
+      };
+    default:
+      return {
+        x: videoWidth - watermarkWidth - padding,
+        y: videoHeight - watermarkHeight - padding
+      };
+  }
+}
+
 // src/core/processor/worker/recorder-worker.ts
 var CHUNK_SIZE = 16 * 1024 * 1024;
 var OVERLAY_BACKGROUND_OPACITY = 0.6;
@@ -10181,6 +10438,7 @@ class RecorderWorker {
   overlayCanvas = null;
   compositionCanvas = null;
   compositionCtx = null;
+  watermarkCanvas = null;
   hiddenIntervals = [];
   currentHiddenIntervalStart = null;
   recordingStartTime = 0;
@@ -10298,6 +10556,7 @@ class RecorderWorker {
     this.hiddenIntervals = [];
     this.currentHiddenIntervalStart = null;
     this.pendingVisibilityUpdates = [];
+    this.watermarkCanvas = null;
   }
   setupOverlayConfig(overlayConfig) {
     this.overlayConfig = overlayConfig ? { enabled: overlayConfig.enabled, text: overlayConfig.text } : null;
@@ -10331,7 +10590,9 @@ class RecorderWorker {
     const keyFrameIntervalSeconds = config.keyFrameInterval / fps;
     const videoSourceOptions = {
       codec: config.codec,
-      sizeChangeBehavior: "passThrough",
+      width: config.width,
+      height: config.height,
+      sizeChangeBehavior: "contain",
       bitrateMode: "variable",
       latencyMode: "quality",
       contentHint: "detail",
@@ -10393,6 +10654,9 @@ class RecorderWorker {
     }
     this.setupAudioSource(audioStream, config);
     const output = requireNonNull(this.output, "Output must be initialized before starting");
+    if (this.config?.watermark) {
+      this.prepareWatermark();
+    }
     await output.start();
     this.startBufferUpdates();
     this.sendReady();
@@ -10536,6 +10800,79 @@ class RecorderWorker {
       y: padding
     };
   }
+  async prepareWatermark() {
+    if (!this.config?.watermark || this.watermarkCanvas) {
+      return;
+    }
+    const { url: url2, opacity = 1 } = this.config.watermark;
+    try {
+      const response = await fetch(url2, { mode: "cors" });
+      if (!response.ok) {
+        throw new Error(\`HTTP error! status: \${response.status}\`);
+      }
+      const blob = await response.blob();
+      const isSvg = url2.toLowerCase().endsWith(".svg") || blob.type === "image/svg+xml";
+      if (isSvg) {
+        logger.warn("[RecorderWorker] Loading SVG watermark. Note: Some environments may not support SVG in createImageBitmap inside workers. If the watermark doesn't appear, consider using a PNG or a Data URL.");
+      }
+      const bitmap = await createImageBitmap(blob).catch((err) => {
+        throw new Error(\`Failed to create ImageBitmap from blob (\${blob.type}). Errors can happen with SVGs in workers or invalid formats: \${err.message}\`);
+      });
+      const videoWidth = this.config?.width || 1280;
+      const { width: targetWidth, height: targetHeight } = calculateWatermarkTargetSize(videoWidth, bitmap.width, bitmap.height);
+      const scaleFactor = targetWidth / bitmap.width;
+      const canvas = new OffscreenCanvas(targetWidth, targetHeight);
+      const ctx = canvas.getContext("2d", { willReadFrequently: false });
+      if (!ctx) {
+        bitmap.close();
+        throw new Error("Failed to get watermark canvas context");
+      }
+      ctx.globalAlpha = opacity;
+      ctx.drawImage(bitmap, 0, 0, targetWidth, targetHeight);
+      ctx.globalAlpha = 1;
+      bitmap.close();
+      this.watermarkCanvas = canvas;
+      logger.debug("[RecorderWorker] Watermark prepared with pre-applied opacity", {
+        width: canvas.width,
+        height: canvas.height,
+        opacity,
+        scaleFactor
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      logger.error("[RecorderWorker] Failed to load watermark. This is often caused by CORS if the image is on another domain. Try using a Data URL (base64) or ensure the server has Access-Control-Allow-Origin: *.", {
+        url: url2,
+        error: errorMessage
+      });
+    }
+  }
+  ensureCompositionCanvas(width, height) {
+    if (!this.compositionCanvas) {
+      this.compositionCanvas = new OffscreenCanvas(width, height);
+      this.compositionCtx = requireNonNull(this.compositionCanvas.getContext("2d", { willReadFrequently: false }), "Failed to get composition canvas context");
+      logger.debug("[RecorderWorker] Composition canvas created", {
+        width,
+        height
+      });
+      return this.compositionCtx;
+    }
+    if (!this.compositionCtx) {
+      this.compositionCtx = requireNonNull(this.compositionCanvas.getContext("2d", { willReadFrequently: false }), "Failed to get composition canvas context");
+      return this.compositionCtx;
+    }
+    const widthChanged = this.compositionCanvas.width !== width;
+    const heightChanged = this.compositionCanvas.height !== height;
+    if (widthChanged || heightChanged) {
+      this.compositionCanvas = new OffscreenCanvas(width, height);
+      this.compositionCtx = requireNonNull(this.compositionCanvas.getContext("2d", { willReadFrequently: false }), "Failed to get composition canvas context");
+      logger.debug("[RecorderWorker] Composition canvas resized", {
+        width,
+        height
+      });
+      return this.compositionCtx;
+    }
+    return this.compositionCtx;
+  }
   shouldApplyOverlay(timestamp) {
     if (!this.overlayConfig?.enabled) {
       return false;
@@ -10603,39 +10940,49 @@ class RecorderWorker {
     const frameDuration = 1 / this.frameRate;
     let frameToProcess = videoFrame;
     let imageBitmap = null;
-    if (this.shouldApplyOverlay(frameTimestamp)) {
+    const needsOverlay = this.shouldApplyOverlay(frameTimestamp);
+    const needsWatermark = !!(this.config?.watermark && this.watermarkCanvas);
+    const needsComposition = needsOverlay || needsWatermark;
+    if (needsComposition) {
       const width = videoFrame.displayWidth;
       const height = videoFrame.displayHeight;
       if (width <= 0 || height <= 0) {
-        logger.warn("[RecorderWorker] Invalid video frame dimensions, skipping overlay", { width, height });
-      } else if (this.overlayConfig) {
-        if (!this.overlayCanvas) {
-          this.overlayCanvas = this.createOverlayCanvas(this.overlayConfig.text);
-          logger.debug("[RecorderWorker] Overlay canvas created", {
-            overlayWidth: this.overlayCanvas.width,
-            overlayHeight: this.overlayCanvas.height
+        logger.warn("[RecorderWorker] Invalid video frame dimensions, skipping composition", { width, height });
+      } else {
+        const ctx = this.ensureCompositionCanvas(width, height);
+        ctx.clearRect(0, 0, width, height);
+        ctx.drawImage(videoFrame, 0, 0, width, height);
+        if (needsOverlay && this.overlayConfig) {
+          if (!this.overlayCanvas) {
+            this.overlayCanvas = this.createOverlayCanvas(this.overlayConfig.text);
+            logger.debug("[RecorderWorker] Overlay canvas created", {
+              overlayWidth: this.overlayCanvas.width,
+              overlayHeight: this.overlayCanvas.height
+            });
+          }
+          const overlayPosition = this.getOverlayPosition(this.overlayCanvas.width, width);
+          ctx.drawImage(this.overlayCanvas, overlayPosition.x, overlayPosition.y);
+        }
+        if (needsWatermark && this.config?.watermark && this.watermarkCanvas) {
+          const watermarkPosition = getWatermarkPosition({
+            watermarkWidth: this.watermarkCanvas.width,
+            watermarkHeight: this.watermarkCanvas.height,
+            videoWidth: width,
+            videoHeight: height,
+            position: this.config.watermark.position
           });
+          ctx.drawImage(this.watermarkCanvas, watermarkPosition.x, watermarkPosition.y);
         }
-        if (this.overlayCanvas) {
-          if (!(this.compositionCanvas && this.compositionCtx) || this.compositionCanvas.width !== width || this.compositionCanvas.height !== height) {
-            this.compositionCanvas = new OffscreenCanvas(width, height);
-            this.compositionCtx = requireNonNull(this.compositionCanvas.getContext("2d"), "Failed to get composition canvas context");
-          }
-          requireNonNull(this.compositionCtx, "Composition context must be available");
-          this.compositionCtx.clearRect(0, 0, width, height);
-          this.compositionCtx.drawImage(videoFrame, 0, 0, width, height);
-          const position = this.getOverlayPosition(this.overlayCanvas.width, width);
-          this.compositionCtx.drawImage(this.overlayCanvas, position.x, position.y);
-          imageBitmap = this.compositionCanvas.transferToImageBitmap();
-          const frameInit = {};
-          if (typeof videoFrame.timestamp === "number" && videoFrame.timestamp !== null) {
-            frameInit.timestamp = videoFrame.timestamp;
-          }
-          if (typeof videoFrame.duration === "number" && videoFrame.duration !== null) {
-            frameInit.duration = videoFrame.duration;
-          }
-          frameToProcess = new VideoFrame(imageBitmap, frameInit);
+        const compositionCanvas = requireNonNull(this.compositionCanvas, "Composition canvas must exist after ensureCompositionCanvas");
+        imageBitmap = compositionCanvas.transferToImageBitmap();
+        const frameInit = {};
+        if (typeof videoFrame.timestamp === "number") {
+          frameInit.timestamp = videoFrame.timestamp;
+        }
+        if (typeof videoFrame.duration === "number") {
+          frameInit.duration = videoFrame.duration;
         }
+        frameToProcess = new VideoFrame(imageBitmap, frameInit);
       }
     }
     const maxLead = 0.05;
@@ -11006,6 +11353,7 @@ class RecorderWorker {
     this.pausedDuration = 0;
     this.pauseStartedAt = null;
     this.overlayCanvas = null;
+    this.watermarkCanvas = null;
     this.overlayConfig = null;
     this.hiddenIntervals = [];
     this.currentHiddenIntervalStart = null;
@@ -11210,7 +11558,8 @@ class WorkerProcessor {
       audioBitrate: config.audioBitrate,
       codec,
       keyFrameInterval: KEY_FRAME_INTERVAL,
-      format
+      format,
+      watermark: config.watermark
     };
     const videoTracks = stream.getVideoTracks();
     const audioTracks = stream.getAudioTracks();