Skip to content

Commit dc633cf

Browse files
staging-devin-ai-integration[bot]streamkit-devinstreamer45
authored
test: add HIGH priority compositor e2e tests (#178)
* test: add HIGH priority compositor e2e tests Add four new e2e test specs covering the compositor UI's most critical gaps: - compositor-crop-shape.spec.ts: crop shape segmented control (Rect/Circle toggle), circular preview CSS, reset behavior, text layers excluded - compositor-image-overlay.spec.ts: image overlay lifecycle — add via file picker, layer list + canvas presence, inspector controls (opacity, rotation, mirror), crop/zoom excluded for images, delete via context menu - compositor-video-output.spec.ts: full two-source compositor pipeline via API, LIVE badge, canvas layer boxes, inspector interaction, pipeline survives interaction - compositor-circle-pip.spec.ts: circle PiP pipeline validation, circular preview in monitor view, crop shape inspector shows circle active with zoom 1.8x, input without circle has no crop section Also adds shared YAML fixtures (WEBCAM_PIP_CIRCLE_YAML, COMPOSITOR_COLORBARS_YAML) to compositor-fixtures.ts. Signed-off-by: Devin AI <devin@streamkit.dev> Signed-off-by: StreamKit Devin <devin@streamkit.dev> Co-Authored-By: Claudio Costa <cstcld91@gmail.com> * refactor(e2e): extract YAML fixtures to external files Move all pipeline YAML fixtures from inline template literals in compositor-fixtures.ts to standalone .yaml files under e2e/fixtures/. The TypeScript module now loads them via fs.readFileSync at import time. This improves maintainability: fixtures get proper YAML syntax highlighting, are easier to diff, and can be extended without bloating the TypeScript module. Files created: - e2e/fixtures/webcam-pip.yaml - e2e/fixtures/webcam-pip-cropped.yaml - e2e/fixtures/webcam-pip-circle.yaml - e2e/fixtures/compositor-colorbars.yaml Signed-off-by: Devin AI <devin@streamkit.dev> Signed-off-by: StreamKit Devin <devin@streamkit.dev> Co-Authored-By: Claudio Costa <cstcld91@gmail.com> --------- Signed-off-by: Devin AI <devin@streamkit.dev> Signed-off-by: StreamKit Devin <devin@streamkit.dev> Co-authored-by: StreamKit Devin <devin@streamkit.dev> Co-authored-by: Claudio Costa <cstcld91@gmail.com>
1 parent 9cb74a0 commit dc633cf

9 files changed

+1282
-183
lines changed

‎e2e/fixtures/compositor-colorbars.yaml‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# SPDX-FileCopyrightText: © 2025 StreamKit Contributors
2+
#
3+
# SPDX-License-Identifier: MPL-2.0
4+
5+
name: Video Compositor (MoQ Stream)
6+
description: Composites two colorbars sources through the compositor node and streams via MoQ
7+
mode: dynamic
8+
9+
nodes:
10+
colorbars_bg:
11+
kind: video::colorbars
12+
params:
13+
width: 1280
14+
height: 720
15+
fps: 30
16+
pixel_format: rgba8
17+
draw_time: true
18+
19+
colorbars_pip:
20+
kind: video::colorbars
21+
params:
22+
width: 320
23+
height: 240
24+
fps: 30
25+
pixel_format: rgba8
26+
draw_time: true
27+
28+
compositor:
29+
kind: video::compositor
30+
params:
31+
width: 1280
32+
height: 720
33+
num_inputs: 2
34+
layers:
35+
in_0:
36+
opacity: 1.0
37+
z_index: 0
38+
in_1:
39+
rect:
40+
x: 100
41+
y: 220
42+
width: 240
43+
height: 180
44+
opacity: 0.9
45+
z_index: 1
46+
rotation_degrees: 15.0
47+
needs:
48+
- colorbars_bg
49+
- colorbars_pip
50+
51+
pixel_convert:
52+
kind: video::pixel_convert
53+
params:
54+
output_format: nv12
55+
needs: compositor
56+
57+
vp9_encoder:
58+
kind: video::vp9::encoder
59+
needs: pixel_convert
60+
61+
moq_peer:
62+
kind: transport::moq::peer
63+
params:
64+
gateway_path: /moq/video
65+
output_broadcast: output
66+
allow_reconnect: true
67+
needs: vp9_encoder

‎e2e/fixtures/webcam-pip-circle.yaml‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# SPDX-FileCopyrightText: © 2025 StreamKit Contributors
2+
#
3+
# SPDX-License-Identifier: MPL-2.0
4+
5+
name: Webcam Circle PiP (MoQ Stream)
6+
description: Composites the user's webcam as a circular picture-in-picture overlay over colorbars
7+
mode: dynamic
8+
9+
nodes:
10+
colorbars_bg:
11+
kind: video::colorbars
12+
params:
13+
width: 1280
14+
height: 720
15+
fps: 30
16+
draw_time: true
17+
18+
moq_peer:
19+
kind: transport::moq::peer
20+
params:
21+
gateway_path: /moq/video
22+
input_broadcast: input
23+
output_broadcast: output
24+
allow_reconnect: true
25+
needs:
26+
in: opus_encoder
27+
in_1: vp9_encoder
28+
29+
vp9_decoder:
30+
kind: video::vp9::decoder
31+
needs:
32+
in: moq_peer.out_1
33+
34+
compositor:
35+
kind: video::compositor
36+
params:
37+
width: 1280
38+
height: 720
39+
num_inputs: 2
40+
layers:
41+
in_0:
42+
opacity: 1.0
43+
z_index: 0
44+
in_1:
45+
rect:
46+
x: 1050
47+
y: 490
48+
width: 200
49+
height: 200
50+
opacity: 1.0
51+
z_index: 1
52+
crop_zoom: 1.8
53+
crop_x: 0.5
54+
crop_y: 0.4
55+
crop_shape: circle
56+
text_overlays:
57+
- text: 'Hello from StreamKit'
58+
rect:
59+
x: 40
60+
y: 660
61+
width: 400
62+
height: 40
63+
opacity: 1.0
64+
z_index: 2
65+
color: [255, 255, 255, 220]
66+
font_size: 28
67+
font_name: dejavu-sans-bold
68+
needs:
69+
- colorbars_bg
70+
- vp9_decoder
71+
72+
pixel_convert:
73+
kind: video::pixel_convert
74+
params:
75+
output_format: nv12
76+
needs: compositor
77+
78+
vp9_encoder:
79+
kind: video::vp9::encoder
80+
params:
81+
keyframe_interval: 30
82+
needs: pixel_convert
83+
84+
opus_decoder:
85+
kind: audio::opus::decoder
86+
needs: moq_peer
87+
88+
gain:
89+
kind: audio::gain
90+
params:
91+
gain: 1.0
92+
needs: opus_decoder
93+
94+
opus_encoder:
95+
kind: audio::opus::encoder
96+
needs: gain

‎e2e/fixtures/webcam-pip-cropped.yaml‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# SPDX-FileCopyrightText: © 2025 StreamKit Contributors
2+
#
3+
# SPDX-License-Identifier: MPL-2.0
4+
5+
name: Webcam PiP Cropped (MoQ Stream)
6+
description: Composites the user's webcam as picture-in-picture over colorbars with crop/zoom
7+
mode: dynamic
8+
9+
nodes:
10+
colorbars_bg:
11+
kind: video::colorbars
12+
params:
13+
width: 1280
14+
height: 720
15+
fps: 30
16+
draw_time: true
17+
18+
moq_peer:
19+
kind: transport::moq::peer
20+
params:
21+
gateway_path: /moq/video
22+
input_broadcast: input
23+
output_broadcast: output
24+
allow_reconnect: true
25+
needs:
26+
in: opus_encoder
27+
in_1: vp9_encoder
28+
29+
vp9_decoder:
30+
kind: video::vp9::decoder
31+
needs:
32+
in: moq_peer.out_1
33+
34+
compositor:
35+
kind: video::compositor
36+
params:
37+
width: 1280
38+
height: 720
39+
num_inputs: 2
40+
layers:
41+
in_0:
42+
opacity: 1.0
43+
z_index: 0
44+
in_1:
45+
rect:
46+
x: 880
47+
y: 20
48+
width: 380
49+
height: 285
50+
opacity: 0.95
51+
z_index: 1
52+
crop_zoom: 2.0
53+
crop_x: 0.3
54+
crop_y: 0.7
55+
text_overlays:
56+
- text: 'Hello from StreamKit'
57+
rect:
58+
x: 40
59+
y: 660
60+
width: 400
61+
height: 40
62+
opacity: 1.0
63+
z_index: 2
64+
color: [255, 255, 255, 220]
65+
font_size: 28
66+
font_name: dejavu-sans-bold
67+
needs:
68+
- colorbars_bg
69+
- vp9_decoder
70+
71+
pixel_convert:
72+
kind: video::pixel_convert
73+
params:
74+
output_format: nv12
75+
needs: compositor
76+
77+
vp9_encoder:
78+
kind: video::vp9::encoder
79+
params:
80+
keyframe_interval: 30
81+
needs: pixel_convert
82+
83+
opus_decoder:
84+
kind: audio::opus::decoder
85+
needs: moq_peer
86+
87+
gain:
88+
kind: audio::gain
89+
params:
90+
gain: 1.0
91+
needs: opus_decoder
92+
93+
opus_encoder:
94+
kind: audio::opus::encoder
95+
needs: gain

‎e2e/fixtures/webcam-pip.yaml‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# SPDX-FileCopyrightText: © 2025 StreamKit Contributors
2+
#
3+
# SPDX-License-Identifier: MPL-2.0
4+
5+
name: Webcam PiP (MoQ Stream)
6+
description: Composites the user's webcam as picture-in-picture over colorbars with a text overlay
7+
mode: dynamic
8+
9+
nodes:
10+
colorbars_bg:
11+
kind: video::colorbars
12+
params:
13+
width: 1280
14+
height: 720
15+
fps: 30
16+
draw_time: true
17+
18+
moq_peer:
19+
kind: transport::moq::peer
20+
params:
21+
gateway_path: /moq/video
22+
input_broadcast: input
23+
output_broadcast: output
24+
allow_reconnect: true
25+
needs:
26+
in: opus_encoder
27+
in_1: vp9_encoder
28+
29+
vp9_decoder:
30+
kind: video::vp9::decoder
31+
needs:
32+
in: moq_peer.out_1
33+
34+
compositor:
35+
kind: video::compositor
36+
params:
37+
width: 1280
38+
height: 720
39+
num_inputs: 2
40+
layers:
41+
in_0:
42+
opacity: 1.0
43+
z_index: 0
44+
in_1:
45+
rect:
46+
x: 880
47+
y: 20
48+
width: 380
49+
height: 285
50+
opacity: 0.95
51+
z_index: 1
52+
text_overlays:
53+
- text: 'Hello from StreamKit'
54+
rect:
55+
x: 40
56+
y: 660
57+
width: 400
58+
height: 40
59+
opacity: 1.0
60+
z_index: 2
61+
color: [255, 255, 255, 220]
62+
font_size: 28
63+
font_name: dejavu-sans-bold
64+
needs:
65+
- colorbars_bg
66+
- vp9_decoder
67+
68+
pixel_convert:
69+
kind: video::pixel_convert
70+
params:
71+
output_format: nv12
72+
needs: compositor
73+
74+
vp9_encoder:
75+
kind: video::vp9::encoder
76+
params:
77+
keyframe_interval: 30
78+
needs: pixel_convert
79+
80+
opus_decoder:
81+
kind: audio::opus::decoder
82+
needs: moq_peer
83+
84+
gain:
85+
kind: audio::gain
86+
params:
87+
gain: 1.0
88+
needs: opus_decoder
89+
90+
opus_encoder:
91+
kind: audio::opus::encoder
92+
needs: gain

0 commit comments

Comments
 (0)