@gjsify/video 0.1.15

package/lib/esm/gst-init.js

@@ -0,0 +1,28 @@
+import Gst from "gi://Gst?version=1.0";
+let initialized = false;
+function ensureGstInit() {
+  if (initialized) return;
+  Gst.init(null);
+  initialized = true;
+}
+function ensurePaintableSinkAvailable() {
+  ensureGstInit();
+  const factory = Gst.ElementFactory.find("gtk4paintablesink");
+  if (!factory) {
+    throwNotSupported(
+      'GStreamer element "gtk4paintablesink" not available. Install gst-plugins-rs:\n  Fedora:        dnf install gstreamer1-plugin-gtk4\n  Ubuntu/Debian: apt install gstreamer1.0-gtk4\n  Verify with:   gst-inspect-1.0 gtk4paintablesink'
+    );
+  }
+}
+function throwNotSupported(message) {
+  const DOMExceptionCtor = globalThis.DOMException;
+  if (DOMExceptionCtor) {
+    throw new DOMExceptionCtor(message, "NotSupportedError");
+  }
+  throw new Error(message);
+}
+export {
+  Gst,
+  ensureGstInit,
+  ensurePaintableSinkAvailable
+};

package/lib/esm/index.js

@@ -0,0 +1,14 @@
+import { VideoBridge } from "./video-bridge.js";
+import { buildMediaStreamPipeline, buildUriPipeline, createPaintableSink } from "./pipeline-builder.js";
+import { HTMLVideoElement } from "@gjsify/dom-elements";
+Object.defineProperty(globalThis, "HTMLVideoElement", {
+  value: HTMLVideoElement,
+  writable: true,
+  configurable: true
+});
+export {
+  VideoBridge,
+  buildMediaStreamPipeline,
+  buildUriPipeline,
+  createPaintableSink
+};

package/lib/esm/pipeline-builder.js

@@ -0,0 +1,87 @@
+import { ensureGstInit, ensurePaintableSinkAvailable, Gst } from "./gst-init.js";
+function createPaintableSink() {
+  ensurePaintableSinkAvailable();
+  const paintableSink = Gst.ElementFactory.make("gtk4paintablesink", "videosink");
+  if (!paintableSink) {
+    throw new Error("Failed to create gtk4paintablesink element");
+  }
+  const paintable = paintableSink.paintable;
+  if (!paintable) {
+    throw new Error("gtk4paintablesink has no paintable property");
+  }
+  let glSink = null;
+  const glContext = paintable.gl_context;
+  if (glContext) {
+    glSink = Gst.ElementFactory.make("glsinkbin", "glsink");
+    if (glSink) {
+      glSink.sink = paintableSink;
+    }
+  }
+  return {
+    sink: glSink ?? paintableSink,
+    paintable,
+    glSink
+  };
+}
+function buildMediaStreamPipeline(gstSource, gstPipeline) {
+  ensureGstInit();
+  const { sink, paintable } = createPaintableSink();
+  if (gstPipeline) {
+    gstPipeline.set_state(Gst.State.NULL);
+    gstPipeline.remove(gstSource);
+  }
+  const pipeline = new Gst.Pipeline({ name: "video-bridge-pipeline" });
+  const tee = Gst.ElementFactory.make("tee", "source-tee");
+  if (!tee) {
+    throw new Error("Failed to create tee element");
+  }
+  tee.allow_not_linked = true;
+  const queue = Gst.ElementFactory.make("queue", "preview-queue");
+  if (!queue) {
+    throw new Error("Failed to create queue element");
+  }
+  const videoconvert = Gst.ElementFactory.make("videoconvert", "convert");
+  if (!videoconvert) {
+    throw new Error("Failed to create videoconvert element");
+  }
+  pipeline.add(gstSource);
+  pipeline.add(tee);
+  pipeline.add(queue);
+  pipeline.add(videoconvert);
+  pipeline.add(sink);
+  if (!gstSource.link(tee)) {
+    throw new Error("Failed to link source \u2192 tee");
+  }
+  const teeSrcPad = tee.request_pad_simple ? tee.request_pad_simple("src_%u") : tee.get_request_pad("src_%u");
+  const queueSinkPad = queue.get_static_pad("sink");
+  if (teeSrcPad && queueSinkPad) {
+    teeSrcPad.link(queueSinkPad);
+  } else {
+    throw new Error("Failed to link tee \u2192 queue");
+  }
+  if (!queue.link(videoconvert)) {
+    throw new Error("Failed to link queue \u2192 videoconvert");
+  }
+  if (!videoconvert.link(sink)) {
+    throw new Error("Failed to link videoconvert \u2192 sink");
+  }
+  return { pipeline, paintable, tee };
+}
+function buildUriPipeline(uri) {
+  ensureGstInit();
+  const { sink, paintable } = createPaintableSink();
+  const playbin = Gst.ElementFactory.make("playbin", "playbin");
+  if (!playbin) {
+    throw new Error("Failed to create playbin element");
+  }
+  playbin.uri = uri;
+  playbin.video_sink = sink;
+  const pipeline = new Gst.Pipeline({ name: "video-bridge-uri-pipeline" });
+  pipeline.add(playbin);
+  return { pipeline, paintable };
+}
+export {
+  buildMediaStreamPipeline,
+  buildUriPipeline,
+  createPaintableSink
+};

package/lib/esm/video-bridge.js

@@ -0,0 +1,174 @@
+import GObject from "gi://GObject";
+import GLib from "gi://GLib?version=2.0";
+import Gtk from "gi://Gtk?version=4.0";
+import { HTMLVideoElement } from "@gjsify/dom-elements";
+import { attachEventControllers } from "@gjsify/event-bridge";
+import { Event } from "@gjsify/dom-events";
+import { BridgeEnvironment } from "@gjsify/bridge-types";
+import { buildMediaStreamPipeline, buildUriPipeline } from "./pipeline-builder.js";
+import { Gst } from "./gst-init.js";
+const VideoBridge = GObject.registerClass(
+  { GTypeName: "GjsifyVideoBridge" },
+  class VideoBridge2 extends Gtk.Box {
+    constructor(params) {
+      super({
+        ...params,
+        orientation: Gtk.Orientation.VERTICAL
+      });
+      this._pipeline = null;
+      // Gst.Pipeline
+      this._readyCallbacks = [];
+      this._resizeCallbacks = [];
+      this._timeOrigin = GLib.get_monotonic_time();
+      this._ready = false;
+      this._picture = new Gtk.Picture();
+      this._picture.set_hexpand(true);
+      this._picture.set_vexpand(true);
+      this.append(this._picture);
+      this._video = new HTMLVideoElement();
+      const host = {
+        performanceNow: () => (GLib.get_monotonic_time() - this._timeOrigin) / 1e3,
+        getWidth: () => this.get_allocated_width(),
+        getHeight: () => this.get_allocated_height(),
+        getDevicePixelRatio: () => {
+          const display = this.get_display();
+          const surface = this.get_native()?.get_surface();
+          if (surface) return surface.get_scale_factor();
+          if (display) return display.get_scale?.() ?? 1;
+          return 1;
+        }
+      };
+      this._environment = new BridgeEnvironment(host);
+      this._environment.document.body.appendChild(this._video);
+      attachEventControllers(this, () => this._video);
+      this._video.addEventListener("srcobjectchange", () => this._onSrcObjectChange());
+      this._video.addEventListener("srcchange", () => this._onSrcChange());
+      this.connect("realize", () => {
+        if (this._ready) return;
+        this._ready = true;
+        for (const cb of this._readyCallbacks) {
+          cb(this._video);
+        }
+        this._readyCallbacks = [];
+      });
+      let lastWidth = 0;
+      let lastHeight = 0;
+      const checkResize = () => {
+        const width = this.get_allocated_width();
+        const height = this.get_allocated_height();
+        if (width !== lastWidth || height !== lastHeight) {
+          lastWidth = width;
+          lastHeight = height;
+          this._video.dispatchEvent(new Event("resize"));
+          for (const cb of this._resizeCallbacks) {
+            cb(width, height);
+          }
+        }
+      };
+      this.connect("notify::width-request", checkResize);
+      this.connect("notify::height-request", checkResize);
+      this.connect("map", checkResize);
+      this.connect("unrealize", () => {
+        this._destroyPipeline();
+      });
+    }
+    /** The HTMLVideoElement backing this bridge. */
+    get element() {
+      return this._video;
+    }
+    /** Alias for element — matches browser naming. */
+    get videoElement() {
+      return this._video;
+    }
+    /** The isolated browser environment for this bridge. */
+    get environment() {
+      return this._environment;
+    }
+    /**
+     * Register a callback to be invoked once the video element is ready.
+     * If already ready, the callback fires synchronously.
+     */
+    onReady(cb) {
+      if (this._ready) {
+        cb(this._video);
+        return;
+      }
+      this._readyCallbacks.push(cb);
+    }
+    /** Register a callback invoked whenever the widget is resized. */
+    onResize(cb) {
+      this._resizeCallbacks.push(cb);
+    }
+    /** Sets browser globals for video support. */
+    installGlobals() {
+      globalThis.HTMLVideoElement = HTMLVideoElement;
+      const timeOrigin = this._timeOrigin;
+      if (typeof globalThis.performance === "undefined") {
+        globalThis.performance = {
+          now: () => (GLib.get_monotonic_time() - timeOrigin) / 1e3,
+          timeOrigin: Date.now()
+        };
+      }
+    }
+    /** @internal Handle srcObject change (MediaStream) */
+    _onSrcObjectChange() {
+      this._destroyPipeline();
+      const stream = this._video.srcObject;
+      if (!stream) return;
+      const videoTracks = stream.getVideoTracks?.() ?? [];
+      const track = videoTracks.find((t) => t._gstSource != null);
+      if (!track?._gstSource) {
+        console.warn("VideoBridge: MediaStream has no video track with GStreamer source");
+        return;
+      }
+      try {
+        const { pipeline, paintable, tee } = buildMediaStreamPipeline(track._gstSource, track._gstPipeline);
+        this._pipeline = pipeline;
+        this._picture.set_paintable(paintable);
+        track._gstPipeline = pipeline;
+        track._gstTee = tee;
+        pipeline.set_state(Gst.State.PLAYING);
+        this._video.readyState = 4;
+        this._video.paused = false;
+        this._video.dispatchEvent(new Event("loadedmetadata"));
+        this._video.dispatchEvent(new Event("canplay"));
+        this._video.dispatchEvent(new Event("playing"));
+      } catch (err) {
+        console.error("VideoBridge: Failed to build MediaStream pipeline:", err);
+      }
+    }
+    /** @internal Handle src change (URI) */
+    _onSrcChange() {
+      this._destroyPipeline();
+      const src = this._video.src;
+      if (!src) return;
+      try {
+        const { pipeline, paintable } = buildUriPipeline(src);
+        this._pipeline = pipeline;
+        this._picture.set_paintable(paintable);
+        pipeline.set_state(Gst.State.PLAYING);
+        this._video.readyState = 4;
+        this._video.paused = false;
+        this._video.dispatchEvent(new Event("loadedmetadata"));
+        this._video.dispatchEvent(new Event("canplay"));
+        this._video.dispatchEvent(new Event("playing"));
+      } catch (err) {
+        console.error("VideoBridge: Failed to build URI pipeline:", err);
+      }
+    }
+    /** @internal Tear down the GStreamer pipeline */
+    _destroyPipeline() {
+      if (this._pipeline) {
+        try {
+          this._pipeline.set_state(Gst.State.NULL);
+        } catch {
+        }
+        this._pipeline = null;
+      }
+      this._picture.set_paintable(null);
+    }
+  }
+);
+export {
+  VideoBridge
+};

package/lib/types/gst-init.d.ts

@@ -0,0 +1,5 @@
+import Gst from 'gi://Gst?version=1.0';
+export declare function ensureGstInit(): void;
+/** Throws if the gtk4paintablesink element is not registered. */
+export declare function ensurePaintableSinkAvailable(): void;
+export { Gst };

package/lib/types/index.d.ts

@@ -0,0 +1,2 @@
+export { VideoBridge } from './video-bridge.js';
+export { buildMediaStreamPipeline, buildUriPipeline, createPaintableSink } from './pipeline-builder.js';

package/lib/types/pipeline-builder.d.ts

@@ -0,0 +1,37 @@
+import Gdk from 'gi://Gdk?version=4.0';
+import { Gst } from './gst-init.js';
+export interface PaintableSinkResult {
+    sink: Gst.Element;
+    paintable: Gdk.Paintable;
+    glSink: Gst.Element | null;
+}
+/**
+ * Create a gtk4paintablesink and extract its Gdk.Paintable.
+ * Optionally wraps in glsinkbin for GL-accelerated rendering
+ * (following the showtime pattern).
+ */
+export declare function createPaintableSink(): PaintableSinkResult;
+export interface MediaStreamPipelineResult {
+    pipeline: Gst.Pipeline;
+    paintable: Gdk.Paintable;
+    /** The tee element inserted after the source for fan-out to other consumers (e.g. WebRTC). Only present for MediaStream pipelines. */
+    tee?: Gst.Element;
+}
+/**
+ * Build a pipeline for rendering a MediaStream video track.
+ *
+ * Expects the track's _gstSource element (from getUserMedia) and the
+ * track's _gstPipeline. The source is removed from its original pipeline
+ * (created by getUserMedia) and re-parented into a new pipeline with:
+ *   source → tee → queue → videoconvert → gtk4paintablesink
+ *
+ * The tee element allows other consumers (e.g. RTCPeerConnection.addTrack)
+ * to request additional branches without moving the source across pipelines.
+ */
+export declare function buildMediaStreamPipeline(gstSource: any, gstPipeline: any): MediaStreamPipelineResult;
+/**
+ * Build a pipeline for playing a URI (video.src = "file:///..." or URL).
+ *
+ * Uses GStreamer playbin with gtk4paintablesink as video-sink.
+ */
+export declare function buildUriPipeline(uri: string): MediaStreamPipelineResult;