@gjsify/video 0.3.12 → 0.3.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/esm/gst-init.js +15 -16
- package/lib/esm/index.js +3 -8
- package/lib/esm/pipeline-builder.js +109 -81
- package/lib/esm/video-bridge.js +334 -310
- package/package.json +13 -13
package/lib/esm/gst-init.js
CHANGED
|
@@ -1,25 +1,24 @@
|
|
|
1
1
|
import Gst from "gi://Gst?version=1.0";
|
|
2
2
|
import { DOMException } from "@gjsify/dom-exception";
|
|
3
|
+
|
|
4
|
+
//#region src/gst-init.ts
|
|
3
5
|
let initialized = false;
|
|
4
6
|
function ensureGstInit() {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
if (initialized) return;
|
|
8
|
+
Gst.init(null);
|
|
9
|
+
initialized = true;
|
|
8
10
|
}
|
|
11
|
+
/** Throws if the gtk4paintablesink element is not registered. */
|
|
9
12
|
function ensurePaintableSinkAvailable() {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
);
|
|
16
|
-
}
|
|
13
|
+
ensureGstInit();
|
|
14
|
+
const factory = Gst.ElementFactory.find("gtk4paintablesink");
|
|
15
|
+
if (!factory) {
|
|
16
|
+
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");
|
|
17
|
+
}
|
|
17
18
|
}
|
|
18
19
|
function throwNotSupported(message) {
|
|
19
|
-
|
|
20
|
+
throw new DOMException(message, "NotSupportedError");
|
|
20
21
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
ensurePaintableSinkAvailable
|
|
25
|
-
};
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
export { Gst, ensureGstInit, ensurePaintableSinkAvailable };
|
package/lib/esm/index.js
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
import { VideoBridge } from "./video-bridge.js";
|
|
2
1
|
import { buildMediaStreamPipeline, buildUriPipeline, createPaintableSink } from "./pipeline-builder.js";
|
|
2
|
+
import { VideoBridge } from "./video-bridge.js";
|
|
3
3
|
import { HTMLVideoElement } from "@gjsify/dom-elements";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
VideoBridge,
|
|
7
|
-
buildMediaStreamPipeline,
|
|
8
|
-
buildUriPipeline,
|
|
9
|
-
createPaintableSink
|
|
10
|
-
};
|
|
4
|
+
|
|
5
|
+
export { HTMLVideoElement, VideoBridge, buildMediaStreamPipeline, buildUriPipeline, createPaintableSink };
|
|
@@ -1,87 +1,115 @@
|
|
|
1
|
-
import { ensureGstInit, ensurePaintableSinkAvailable
|
|
1
|
+
import { Gst, ensureGstInit, ensurePaintableSinkAvailable } from "./gst-init.js";
|
|
2
|
+
|
|
3
|
+
//#region src/pipeline-builder.ts
|
|
4
|
+
/**
|
|
5
|
+
* Create a gtk4paintablesink and extract its Gdk.Paintable.
|
|
6
|
+
* Optionally wraps in glsinkbin for GL-accelerated rendering
|
|
7
|
+
* (following the showtime pattern).
|
|
8
|
+
*/
|
|
2
9
|
function createPaintableSink() {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
10
|
+
ensurePaintableSinkAvailable();
|
|
11
|
+
const paintableSink = Gst.ElementFactory.make("gtk4paintablesink", "videosink");
|
|
12
|
+
if (!paintableSink) {
|
|
13
|
+
throw new Error("Failed to create gtk4paintablesink element");
|
|
14
|
+
}
|
|
15
|
+
const paintable = paintableSink.paintable;
|
|
16
|
+
if (!paintable) {
|
|
17
|
+
throw new Error("gtk4paintablesink has no paintable property");
|
|
18
|
+
}
|
|
19
|
+
let glSink = null;
|
|
20
|
+
const glContext = paintable.gl_context;
|
|
21
|
+
if (glContext) {
|
|
22
|
+
glSink = Gst.ElementFactory.make("glsinkbin", "glsink");
|
|
23
|
+
if (glSink) {
|
|
24
|
+
glSink.sink = paintableSink;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return {
|
|
28
|
+
sink: glSink ?? paintableSink,
|
|
29
|
+
paintable,
|
|
30
|
+
glSink
|
|
31
|
+
};
|
|
25
32
|
}
|
|
33
|
+
/**
|
|
34
|
+
* Build a pipeline for rendering a MediaStream video track.
|
|
35
|
+
*
|
|
36
|
+
* Expects the track's _gstSource element (from getUserMedia) and the
|
|
37
|
+
* track's _gstPipeline. The source is removed from its original pipeline
|
|
38
|
+
* (created by getUserMedia) and re-parented into a new pipeline with:
|
|
39
|
+
* source → tee → queue → videoconvert → gtk4paintablesink
|
|
40
|
+
*
|
|
41
|
+
* The tee element allows other consumers (e.g. RTCPeerConnection.addTrack)
|
|
42
|
+
* to request additional branches without moving the source across pipelines.
|
|
43
|
+
*/
|
|
26
44
|
function buildMediaStreamPipeline(gstSource, gstPipeline) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
45
|
+
ensureGstInit();
|
|
46
|
+
const { sink, paintable } = createPaintableSink();
|
|
47
|
+
if (gstPipeline) {
|
|
48
|
+
gstPipeline.set_state(Gst.State.NULL);
|
|
49
|
+
gstPipeline.remove(gstSource);
|
|
50
|
+
}
|
|
51
|
+
const pipeline = new Gst.Pipeline({ name: "video-bridge-pipeline" });
|
|
52
|
+
const tee = Gst.ElementFactory.make("tee", "source-tee");
|
|
53
|
+
if (!tee) {
|
|
54
|
+
throw new Error("Failed to create tee element");
|
|
55
|
+
}
|
|
56
|
+
tee.allow_not_linked = true;
|
|
57
|
+
const queue = Gst.ElementFactory.make("queue", "preview-queue");
|
|
58
|
+
if (!queue) {
|
|
59
|
+
throw new Error("Failed to create queue element");
|
|
60
|
+
}
|
|
61
|
+
const videoconvert = Gst.ElementFactory.make("videoconvert", "convert");
|
|
62
|
+
if (!videoconvert) {
|
|
63
|
+
throw new Error("Failed to create videoconvert element");
|
|
64
|
+
}
|
|
65
|
+
pipeline.add(gstSource);
|
|
66
|
+
pipeline.add(tee);
|
|
67
|
+
pipeline.add(queue);
|
|
68
|
+
pipeline.add(videoconvert);
|
|
69
|
+
pipeline.add(sink);
|
|
70
|
+
if (!gstSource.link(tee)) {
|
|
71
|
+
throw new Error("Failed to link source → tee");
|
|
72
|
+
}
|
|
73
|
+
const teeSrcPad = tee.request_pad_simple ? tee.request_pad_simple("src_%u") : tee.get_request_pad("src_%u");
|
|
74
|
+
const queueSinkPad = queue.get_static_pad("sink");
|
|
75
|
+
if (teeSrcPad && queueSinkPad) {
|
|
76
|
+
teeSrcPad.link(queueSinkPad);
|
|
77
|
+
} else {
|
|
78
|
+
throw new Error("Failed to link tee → queue");
|
|
79
|
+
}
|
|
80
|
+
if (!queue.link(videoconvert)) {
|
|
81
|
+
throw new Error("Failed to link queue → videoconvert");
|
|
82
|
+
}
|
|
83
|
+
if (!videoconvert.link(sink)) {
|
|
84
|
+
throw new Error("Failed to link videoconvert → sink");
|
|
85
|
+
}
|
|
86
|
+
return {
|
|
87
|
+
pipeline,
|
|
88
|
+
paintable,
|
|
89
|
+
tee
|
|
90
|
+
};
|
|
69
91
|
}
|
|
92
|
+
/**
|
|
93
|
+
* Build a pipeline for playing a URI (video.src = "file:///..." or URL).
|
|
94
|
+
*
|
|
95
|
+
* Uses GStreamer playbin with gtk4paintablesink as video-sink.
|
|
96
|
+
*/
|
|
70
97
|
function buildUriPipeline(uri) {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
98
|
+
ensureGstInit();
|
|
99
|
+
const { sink, paintable } = createPaintableSink();
|
|
100
|
+
const playbin = Gst.ElementFactory.make("playbin", "playbin");
|
|
101
|
+
if (!playbin) {
|
|
102
|
+
throw new Error("Failed to create playbin element");
|
|
103
|
+
}
|
|
104
|
+
playbin.uri = uri;
|
|
105
|
+
playbin.video_sink = sink;
|
|
106
|
+
const pipeline = new Gst.Pipeline({ name: "video-bridge-uri-pipeline" });
|
|
107
|
+
pipeline.add(playbin);
|
|
108
|
+
return {
|
|
109
|
+
pipeline,
|
|
110
|
+
paintable
|
|
111
|
+
};
|
|
82
112
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
createPaintableSink
|
|
87
|
-
};
|
|
113
|
+
|
|
114
|
+
//#endregion
|
|
115
|
+
export { buildMediaStreamPipeline, buildUriPipeline, createPaintableSink };
|
package/lib/esm/video-bridge.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { Gst } from "./gst-init.js";
|
|
2
|
+
import { buildMediaStreamPipeline, buildUriPipeline } from "./pipeline-builder.js";
|
|
1
3
|
import GObject from "gi://GObject";
|
|
2
4
|
import GLib from "gi://GLib?version=2.0";
|
|
3
5
|
import Gtk from "gi://Gtk?version=4.0";
|
|
@@ -5,319 +7,341 @@ import { attachEventControllers } from "@gjsify/event-bridge";
|
|
|
5
7
|
import { Event } from "@gjsify/dom-events";
|
|
6
8
|
import { BridgeEnvironment } from "@gjsify/bridge-types";
|
|
7
9
|
import { HTMLVideoElement } from "@gjsify/dom-elements";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
+
|
|
11
|
+
//#region src/video-bridge.ts
|
|
10
12
|
const PLAY_ICON = "media-playback-start-symbolic";
|
|
11
13
|
const PAUSE_ICON = "media-playback-pause-symbolic";
|
|
12
14
|
const AUTO_HIDE_SECONDS = 2;
|
|
13
15
|
const POSITION_TICK_MS = 200;
|
|
14
16
|
function formatTime(seconds) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
if (!isFinite(seconds) || isNaN(seconds)) return "--:--";
|
|
18
|
+
const m = Math.floor(seconds / 60);
|
|
19
|
+
const s = Math.floor(seconds % 60);
|
|
20
|
+
return `${m}:${s.toString().padStart(2, "0")}`;
|
|
19
21
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
)
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
22
|
+
/**
|
|
23
|
+
* A `Gtk.Box` subclass that hosts a `Gtk.Picture` for video rendering.
|
|
24
|
+
*
|
|
25
|
+
* - Owns an `HTMLVideoElement` whose DOM API is wired to GStreamer
|
|
26
|
+
* - Renders video via `gtk4paintablesink` → `Gdk.Paintable` → `Gtk.Picture`
|
|
27
|
+
* - Supports `video.srcObject = mediaStream` (getUserMedia / WebRTC)
|
|
28
|
+
* - Supports `video.src = 'file://…'` or HTTP URL (URI playback via playbin)
|
|
29
|
+
* - `onReady(cb)` fires with the HTMLVideoElement when the widget realizes
|
|
30
|
+
* - `showControls(true)` appends a play/pause + seek + time + volume bar
|
|
31
|
+
*
|
|
32
|
+
* ```ts
|
|
33
|
+
* const bridge = new VideoBridge();
|
|
34
|
+
* bridge.showControls(true);
|
|
35
|
+
* bridge.onReady((video) => { video.src = 'https://example.com/video.mp4'; });
|
|
36
|
+
* window.set_child(bridge);
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
const VideoBridge = GObject.registerClass({ GTypeName: "GjsifyVideoBridge" }, class VideoBridge extends Gtk.Box {
|
|
40
|
+
constructor(params) {
|
|
41
|
+
super({
|
|
42
|
+
...params,
|
|
43
|
+
orientation: Gtk.Orientation.VERTICAL
|
|
44
|
+
});
|
|
45
|
+
this._timeOrigin = GLib.get_monotonic_time();
|
|
46
|
+
this._pipeline = null;
|
|
47
|
+
this._pipelineBus = null;
|
|
48
|
+
this._pipelineBusHandlers = [];
|
|
49
|
+
this._readyCallbacks = [];
|
|
50
|
+
this._resizeCallbacks = [];
|
|
51
|
+
this._ready = false;
|
|
52
|
+
this._controls = null;
|
|
53
|
+
this._positionTimerId = null;
|
|
54
|
+
this._updatingFromTimer = false;
|
|
55
|
+
this._hideTimerId = null;
|
|
56
|
+
this._overlay = new Gtk.Overlay({
|
|
57
|
+
hexpand: true,
|
|
58
|
+
vexpand: true
|
|
59
|
+
});
|
|
60
|
+
this.append(this._overlay);
|
|
61
|
+
this._picture = new Gtk.Picture({
|
|
62
|
+
hexpand: true,
|
|
63
|
+
vexpand: true
|
|
64
|
+
});
|
|
65
|
+
this._overlay.set_child(this._picture);
|
|
66
|
+
this._video = new HTMLVideoElement();
|
|
67
|
+
const host = {
|
|
68
|
+
performanceNow: () => (GLib.get_monotonic_time() - this._timeOrigin) / 1e3,
|
|
69
|
+
getWidth: () => this.get_allocated_width(),
|
|
70
|
+
getHeight: () => this.get_allocated_height(),
|
|
71
|
+
getDevicePixelRatio: () => this.get_native()?.get_surface()?.get_scale_factor() ?? 1
|
|
72
|
+
};
|
|
73
|
+
this._environment = new BridgeEnvironment(host);
|
|
74
|
+
this._environment.document.body.appendChild(this._video);
|
|
75
|
+
attachEventControllers(this, () => this._video);
|
|
76
|
+
this._video.addEventListener("srcobjectchange", () => this._onSrcObjectChange());
|
|
77
|
+
this._video.addEventListener("srcchange", () => this._onSrcChange());
|
|
78
|
+
this.connect("realize", () => {
|
|
79
|
+
if (this._ready) return;
|
|
80
|
+
this._ready = true;
|
|
81
|
+
for (const cb of this._readyCallbacks) {
|
|
82
|
+
cb(this._video);
|
|
83
|
+
}
|
|
84
|
+
this._readyCallbacks = [];
|
|
85
|
+
});
|
|
86
|
+
let lastWidth = 0;
|
|
87
|
+
let lastHeight = 0;
|
|
88
|
+
const checkResize = () => {
|
|
89
|
+
const width = this.get_allocated_width();
|
|
90
|
+
const height = this.get_allocated_height();
|
|
91
|
+
if (width === lastWidth && height === lastHeight) return;
|
|
92
|
+
lastWidth = width;
|
|
93
|
+
lastHeight = height;
|
|
94
|
+
this._video.dispatchEvent(new Event("resize"));
|
|
95
|
+
for (const cb of this._resizeCallbacks) cb(width, height);
|
|
96
|
+
};
|
|
97
|
+
this.connect("notify::width-request", checkResize);
|
|
98
|
+
this.connect("notify::height-request", checkResize);
|
|
99
|
+
this.connect("map", checkResize);
|
|
100
|
+
this.connect("unrealize", () => {
|
|
101
|
+
this._destroyPipeline();
|
|
102
|
+
this._stopPositionTimer();
|
|
103
|
+
this._resizeCallbacks = [];
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
get element() {
|
|
107
|
+
return this._video;
|
|
108
|
+
}
|
|
109
|
+
get videoElement() {
|
|
110
|
+
return this._video;
|
|
111
|
+
}
|
|
112
|
+
get environment() {
|
|
113
|
+
return this._environment;
|
|
114
|
+
}
|
|
115
|
+
onReady(cb) {
|
|
116
|
+
if (this._ready) {
|
|
117
|
+
cb(this._video);
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
this._readyCallbacks.push(cb);
|
|
121
|
+
}
|
|
122
|
+
onResize(cb) {
|
|
123
|
+
this._resizeCallbacks.push(cb);
|
|
124
|
+
}
|
|
125
|
+
installGlobals() {
|
|
126
|
+
globalThis.HTMLVideoElement = HTMLVideoElement;
|
|
127
|
+
if (typeof globalThis.performance === "undefined") {
|
|
128
|
+
const timeOrigin = this._timeOrigin;
|
|
129
|
+
globalThis.performance = {
|
|
130
|
+
now: () => (GLib.get_monotonic_time() - timeOrigin) / 1e3,
|
|
131
|
+
timeOrigin: Date.now()
|
|
132
|
+
};
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* Show or hide the built-in play/pause + seek + time + volume control bar.
|
|
137
|
+
* Controls auto-hide after 2 seconds of mouse inactivity.
|
|
138
|
+
*/
|
|
139
|
+
showControls(show = true) {
|
|
140
|
+
if (show && !this._controls) {
|
|
141
|
+
this._controls = this._buildControlBar();
|
|
142
|
+
const { bar } = this._controls;
|
|
143
|
+
bar.set_halign(Gtk.Align.FILL);
|
|
144
|
+
bar.set_valign(Gtk.Align.END);
|
|
145
|
+
bar.set_visible(false);
|
|
146
|
+
this._overlay.add_overlay(bar);
|
|
147
|
+
this._startPositionTimer();
|
|
148
|
+
this._setupAutoHideMotion(bar);
|
|
149
|
+
} else if (!show && this._controls) {
|
|
150
|
+
this._overlay.remove_overlay(this._controls.bar);
|
|
151
|
+
this._controls = null;
|
|
152
|
+
this._stopPositionTimer();
|
|
153
|
+
if (this._hideTimerId !== null) {
|
|
154
|
+
GLib.Source.remove(this._hideTimerId);
|
|
155
|
+
this._hideTimerId = null;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
_setupAutoHideMotion(controlBar) {
|
|
160
|
+
for (const widget of [this, controlBar]) {
|
|
161
|
+
const motion = new Gtk.EventControllerMotion();
|
|
162
|
+
motion.connect("motion", () => this._revealControls());
|
|
163
|
+
motion.connect("enter", () => this._revealControls());
|
|
164
|
+
widget.add_controller(motion);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
_revealControls() {
|
|
168
|
+
if (!this._controls) return;
|
|
169
|
+
this._controls.bar.set_visible(true);
|
|
170
|
+
if (this._hideTimerId !== null) GLib.Source.remove(this._hideTimerId);
|
|
171
|
+
this._hideTimerId = GLib.timeout_add_seconds(GLib.PRIORITY_DEFAULT, AUTO_HIDE_SECONDS, () => {
|
|
172
|
+
this._hideTimerId = null;
|
|
173
|
+
this._controls?.bar.set_visible(false);
|
|
174
|
+
return GLib.SOURCE_REMOVE;
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
_buildControlBar() {
|
|
178
|
+
const bar = new Gtk.Box({
|
|
179
|
+
orientation: Gtk.Orientation.HORIZONTAL,
|
|
180
|
+
spacing: 6,
|
|
181
|
+
margin_start: 6,
|
|
182
|
+
margin_end: 6,
|
|
183
|
+
margin_top: 4,
|
|
184
|
+
margin_bottom: 4
|
|
185
|
+
});
|
|
186
|
+
bar.add_css_class("osd");
|
|
187
|
+
const playBtn = new Gtk.Button({ icon_name: PAUSE_ICON });
|
|
188
|
+
playBtn.connect("clicked", () => {
|
|
189
|
+
if (this._video.paused) {
|
|
190
|
+
this._video.play();
|
|
191
|
+
playBtn.set_icon_name(PAUSE_ICON);
|
|
192
|
+
} else {
|
|
193
|
+
this._video.pause();
|
|
194
|
+
playBtn.set_icon_name(PLAY_ICON);
|
|
195
|
+
}
|
|
196
|
+
});
|
|
197
|
+
bar.append(playBtn);
|
|
198
|
+
const seekAdj = new Gtk.Adjustment({
|
|
199
|
+
lower: 0,
|
|
200
|
+
upper: 1,
|
|
201
|
+
step_increment: 1,
|
|
202
|
+
page_increment: 10
|
|
203
|
+
});
|
|
204
|
+
const seekScale = Gtk.Scale.new(Gtk.Orientation.HORIZONTAL, seekAdj);
|
|
205
|
+
seekScale.set_hexpand(true);
|
|
206
|
+
seekScale.set_draw_value(false);
|
|
207
|
+
seekScale.connect("change-value", (_scale, _scroll, value) => {
|
|
208
|
+
if (!this._updatingFromTimer && isFinite(value)) {
|
|
209
|
+
this._video.currentTime = value;
|
|
210
|
+
}
|
|
211
|
+
return false;
|
|
212
|
+
});
|
|
213
|
+
bar.append(seekScale);
|
|
214
|
+
const timeLabel = new Gtk.Label({
|
|
215
|
+
label: "--:-- / --:--",
|
|
216
|
+
use_markup: false
|
|
217
|
+
});
|
|
218
|
+
bar.append(timeLabel);
|
|
219
|
+
const volumeBtn = new Gtk.VolumeButton({ value: 1 });
|
|
220
|
+
volumeBtn.connect("value-changed", (_btn, value) => {
|
|
221
|
+
this._video.volume = value;
|
|
222
|
+
});
|
|
223
|
+
bar.append(volumeBtn);
|
|
224
|
+
return {
|
|
225
|
+
bar,
|
|
226
|
+
playBtn,
|
|
227
|
+
seekAdj,
|
|
228
|
+
seekScale,
|
|
229
|
+
timeLabel,
|
|
230
|
+
volumeBtn,
|
|
231
|
+
lastSeekValue: NaN,
|
|
232
|
+
lastTimeText: ""
|
|
233
|
+
};
|
|
234
|
+
}
|
|
235
|
+
_startPositionTimer() {
|
|
236
|
+
if (this._positionTimerId !== null) return;
|
|
237
|
+
this._positionTimerId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, POSITION_TICK_MS, () => {
|
|
238
|
+
const controls = this._controls;
|
|
239
|
+
if (!controls) return GLib.SOURCE_REMOVE;
|
|
240
|
+
const cur = this._video.currentTime;
|
|
241
|
+
const dur = this._video.duration;
|
|
242
|
+
if (isFinite(dur) && dur > 0) {
|
|
243
|
+
if (controls.seekAdj.upper !== dur) controls.seekAdj.upper = dur;
|
|
244
|
+
if (cur !== controls.lastSeekValue) {
|
|
245
|
+
this._updatingFromTimer = true;
|
|
246
|
+
controls.seekAdj.set_value(cur);
|
|
247
|
+
this._updatingFromTimer = false;
|
|
248
|
+
controls.lastSeekValue = cur;
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
const text = `${formatTime(cur)} / ${formatTime(dur)}`;
|
|
252
|
+
if (text !== controls.lastTimeText) {
|
|
253
|
+
controls.timeLabel.set_label(text);
|
|
254
|
+
controls.lastTimeText = text;
|
|
255
|
+
}
|
|
256
|
+
const icon = this._video.paused ? PLAY_ICON : PAUSE_ICON;
|
|
257
|
+
if (controls.playBtn.get_icon_name() !== icon) controls.playBtn.set_icon_name(icon);
|
|
258
|
+
return GLib.SOURCE_CONTINUE;
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
_stopPositionTimer() {
|
|
262
|
+
if (this._positionTimerId !== null) {
|
|
263
|
+
GLib.Source.remove(this._positionTimerId);
|
|
264
|
+
this._positionTimerId = null;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
_onSrcObjectChange() {
|
|
268
|
+
this._destroyPipeline();
|
|
269
|
+
const stream = this._video.srcObject;
|
|
270
|
+
if (!stream) return;
|
|
271
|
+
const tracks = stream.getVideoTracks?.() ?? [];
|
|
272
|
+
const track = tracks.find((t) => t._gstSource != null);
|
|
273
|
+
if (!track?._gstSource) {
|
|
274
|
+
console.warn("VideoBridge: MediaStream has no video track with GStreamer source");
|
|
275
|
+
return;
|
|
276
|
+
}
|
|
277
|
+
try {
|
|
278
|
+
const { pipeline, paintable, tee } = buildMediaStreamPipeline(track._gstSource, track._gstPipeline);
|
|
279
|
+
this._attachPipeline(pipeline, paintable);
|
|
280
|
+
track._gstPipeline = pipeline;
|
|
281
|
+
track._gstTee = tee;
|
|
282
|
+
} catch (err) {
|
|
283
|
+
console.error("VideoBridge: Failed to build MediaStream pipeline:", err);
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
_onSrcChange() {
|
|
287
|
+
this._destroyPipeline();
|
|
288
|
+
if (!this._video.src) return;
|
|
289
|
+
try {
|
|
290
|
+
const { pipeline, paintable } = buildUriPipeline(this._video.src);
|
|
291
|
+
this._attachPipeline(pipeline, paintable);
|
|
292
|
+
} catch (err) {
|
|
293
|
+
console.error("VideoBridge: Failed to build URI pipeline:", err);
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
_attachPipeline(pipeline, paintable) {
|
|
297
|
+
this._pipeline = pipeline;
|
|
298
|
+
this._video._pipeline = pipeline;
|
|
299
|
+
this._picture.set_paintable(paintable);
|
|
300
|
+
const bus = pipeline.get_bus();
|
|
301
|
+
if (bus) {
|
|
302
|
+
bus.add_signal_watch();
|
|
303
|
+
this._pipelineBus = bus;
|
|
304
|
+
this._pipelineBusHandlers = [bus.connect("message::error", (_b, msg) => {
|
|
305
|
+
const [err, debug] = msg.parse_error();
|
|
306
|
+
console.error(`VideoBridge pipeline error: ${err?.message ?? "unknown"} (${debug ?? ""})`);
|
|
307
|
+
this._video.dispatchEvent(new Event("error"));
|
|
308
|
+
}), bus.connect("message::warning", (_b, msg) => {
|
|
309
|
+
const [err, debug] = msg.parse_warning();
|
|
310
|
+
console.warn(`VideoBridge pipeline warning: ${err?.message ?? "unknown"} (${debug ?? ""})`);
|
|
311
|
+
})];
|
|
312
|
+
}
|
|
313
|
+
const ret = pipeline.set_state(Gst.State.PLAYING);
|
|
314
|
+
if (ret === Gst.StateChangeReturn.FAILURE) {
|
|
315
|
+
console.error("VideoBridge: pipeline state change to PLAYING failed");
|
|
316
|
+
}
|
|
317
|
+
this._video.readyState = 4;
|
|
318
|
+
this._video.dispatchEvent(new Event("loadedmetadata"));
|
|
319
|
+
this._video.dispatchEvent(new Event("canplay"));
|
|
320
|
+
this._video.dispatchEvent(new Event("playing"));
|
|
321
|
+
}
|
|
322
|
+
_destroyPipeline() {
|
|
323
|
+
if (this._pipelineBus) {
|
|
324
|
+
for (const id of this._pipelineBusHandlers) {
|
|
325
|
+
try {
|
|
326
|
+
this._pipelineBus.disconnect(id);
|
|
327
|
+
} catch {}
|
|
328
|
+
}
|
|
329
|
+
try {
|
|
330
|
+
this._pipelineBus.remove_signal_watch();
|
|
331
|
+
} catch {}
|
|
332
|
+
this._pipelineBus = null;
|
|
333
|
+
this._pipelineBusHandlers = [];
|
|
334
|
+
}
|
|
335
|
+
if (this._pipeline) {
|
|
336
|
+
try {
|
|
337
|
+
this._pipeline.set_state(Gst.State.NULL);
|
|
338
|
+
} catch {}
|
|
339
|
+
this._pipeline = null;
|
|
340
|
+
this._video._pipeline = null;
|
|
341
|
+
}
|
|
342
|
+
this._picture.set_paintable(null);
|
|
343
|
+
}
|
|
344
|
+
});
|
|
345
|
+
|
|
346
|
+
//#endregion
|
|
347
|
+
export { VideoBridge };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gjsify/video",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.14",
|
|
4
4
|
"description": "VideoBridge — GTK container for HTMLVideoElement backed by GStreamer gtk4paintablesink",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "lib/esm/index.js",
|
|
@@ -26,20 +26,20 @@
|
|
|
26
26
|
"bridge"
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@girs/gdk-4.0": "
|
|
30
|
-
"@girs/gjs": "
|
|
31
|
-
"@girs/glib-2.0": "
|
|
32
|
-
"@girs/gobject-2.0": "
|
|
33
|
-
"@girs/gst-1.0": "
|
|
34
|
-
"@girs/gtk-4.0": "
|
|
35
|
-
"@gjsify/bridge-types": "^0.3.
|
|
36
|
-
"@gjsify/dom-elements": "^0.3.
|
|
37
|
-
"@gjsify/dom-events": "^0.3.
|
|
38
|
-
"@gjsify/dom-exception": "^0.3.
|
|
39
|
-
"@gjsify/event-bridge": "^0.3.
|
|
29
|
+
"@girs/gdk-4.0": "4.0.0-4.0.0-rc.9",
|
|
30
|
+
"@girs/gjs": "4.0.0-rc.9",
|
|
31
|
+
"@girs/glib-2.0": "2.88.0-4.0.0-rc.9",
|
|
32
|
+
"@girs/gobject-2.0": "2.88.0-4.0.0-rc.9",
|
|
33
|
+
"@girs/gst-1.0": "1.28.1-4.0.0-rc.9",
|
|
34
|
+
"@girs/gtk-4.0": "4.23.0-4.0.0-rc.9",
|
|
35
|
+
"@gjsify/bridge-types": "^0.3.14",
|
|
36
|
+
"@gjsify/dom-elements": "^0.3.14",
|
|
37
|
+
"@gjsify/dom-events": "^0.3.14",
|
|
38
|
+
"@gjsify/dom-exception": "^0.3.14",
|
|
39
|
+
"@gjsify/event-bridge": "^0.3.14"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@gjsify/cli": "^0.3.
|
|
42
|
+
"@gjsify/cli": "^0.3.14",
|
|
43
43
|
"@types/node": "^25.6.0",
|
|
44
44
|
"typescript": "^6.0.3"
|
|
45
45
|
}
|