@3dsource/angular-unreal-module 0.0.170 → 0.0.171

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/LICENSE CHANGED
@@ -1,14 +1,14 @@
1
- Copyright (c) 2025 3dsource
2
- All Rights Reserved.
3
-
4
- This software and associated documentation files (the “Software”) are proprietary
5
- and confidential. Unauthorized copying, modification, distribution, or any other
6
- use of the Software, in whole or in part, without the prior written consent of
7
- the copyright holder is strictly prohibited.
8
-
9
- THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
10
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
11
- FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
12
- COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
13
- IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
14
- CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
1
+ Copyright (c) 2025 3dsource
2
+ All Rights Reserved.
3
+
4
+ This software and associated documentation files (the “Software”) are proprietary
5
+ and confidential. Unauthorized copying, modification, distribution, or any other
6
+ use of the Software, in whole or in part, without the prior written consent of
7
+ the copyright holder is strictly prohibited.
8
+
9
+ THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
10
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
11
+ FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
12
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
13
+ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
14
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md CHANGED
@@ -1,229 +1,229 @@
1
- # @3dsource/angular-unreal-module
2
-
3
- Standalone Angular integration for Unreal Engine Pixel Streaming. The package
4
- provides the scene component, WebRTC and signalling lifecycle, NgRx state,
5
- command/callback APIs, reconnection, file transfer and telemetry.
6
-
7
- ## Requirements
8
-
9
- - Angular, Angular CDK and Angular Forms `>=19.0.0 <23.0.0`
10
- - NgRx Store and Effects `>=19.0.0 <23.0.0`
11
- - RxJS `>=7.8.0 <8.0.0`
12
- - `@3dsource/types-unreal >=0.0.7`
13
- - `@3dsource/utils >=1.0.21`
14
- - `provideHttpClient()` in the host application
15
-
16
- ## Installation
17
-
18
- ```shell
19
- pnpm add @3dsource/angular-unreal-module @3dsource/types-unreal @3dsource/utils
20
- ```
21
-
22
- The package is standalone and does not expose an NgModule.
23
-
24
- ### Styling
25
-
26
- The package ships its own styles and does not require any UI library. Its
27
- components read `--src-*` design tokens where available, but every token has a
28
- built-in fallback, so `@3dsource/source-ui-native` is entirely optional: install
29
- it in the host application only if you want the components to follow that theme.
30
-
31
- ## Setup
32
-
33
- ### 1. Register state and configuration once
34
-
35
- Add the Unreal feature state, HTTP client and configuration at the application
36
- root. `UNREAL_CONFIG` is required, although all its fields are optional.
37
-
38
- <!-- prettier-ignore -->
39
- ```typescript
40
- import { provideHttpClient } from '@angular/common/http';
41
- import type { ApplicationConfig } from '@angular/core';
42
- import { provideStore } from '@ngrx/store';
43
- import {
44
- provideUnrealState,
45
- UNREAL_CONFIG,
46
- type UnrealInitialConfig,
47
- } from '@3dsource/angular-unreal-module';
48
-
49
- const unrealConfig = {
50
- regionsPingUrl: 'https://datacenter.3dsource.com/regions/',
51
- dataChannelConnectionTimeout: 8000,
52
- fpsMonitor: false,
53
- autoHighResolution: false,
54
- } satisfies UnrealInitialConfig;
55
-
56
- export const appConfig: ApplicationConfig = {
57
- providers: [
58
- provideHttpClient(),
59
- provideStore(),
60
- provideUnrealState(),
61
- { provide: UNREAL_CONFIG, useValue: unrealConfig },
62
- ],
63
- };
64
- ```
65
-
66
- Omit `provideStore()` when the root NgRx store is already configured.
67
-
68
- Available configuration fields:
69
-
70
- | Field | Purpose |
71
- | ------------------------------ | ---------------------------------------------- |
72
- | `regionsPingUrl` | Region latency endpoint |
73
- | `dataChannelConnectionTimeout` | DataChannel connection timeout in ms |
74
- | `customErrorsEndpoint` | Custom error reporting endpoint |
75
- | `commandTelemetryReceiver` | Command telemetry endpoint |
76
- | `streamTelemetryV2Url` | Stream lifecycle telemetry endpoint |
77
- | `screenLockerContainerId` | Container used by the screen-locker overlay |
78
- | `mode` | `'metabox'` (default) — full Metabox command protocol; `'default'` — stock Pixel Streaming app, the module sends no Metabox commands of its own |
79
- | `fpsMonitor` | Enables FPS monitoring (currently off — the service is not instantiated) |
80
- | `autoHighResolution` | Raises resolution after the scene becomes idle |
81
- | `playwright` | Enables the test-specific service behaviour |
82
-
83
- Use `{ provide: UNREAL_CONFIG, useValue: {} }` for the minimal configuration.
84
-
85
- ### 2. Boot the engine on a lazy route
86
-
87
- Lazy-load the route file from the application router:
88
-
89
- <!-- prettier-ignore -->
90
- ```typescript
91
- import type { Routes } from '@angular/router';
92
-
93
- export const APP_ROUTES: Routes = [
94
- {
95
- path: 'stream',
96
- loadChildren: () =>
97
- import('./stream/stream.routes').then((module) => module.STREAM_ROUTES),
98
- },
99
- ];
100
- ```
101
-
102
- Register `provideUnrealModule()` inside that lazy route file:
103
-
104
- <!-- prettier-ignore -->
105
- ```typescript
106
- import type { Routes } from '@angular/router';
107
- import { provideUnrealModule } from '@3dsource/angular-unreal-module';
108
- import { StreamComponent } from './stream.component';
109
-
110
- export const STREAM_ROUTES: Routes = [
111
- {
112
- path: '',
113
- component: StreamComponent,
114
- providers: [provideUnrealModule()],
115
- },
116
- ];
117
- ```
118
-
119
- Keep `provideUnrealState()` and `UNREAL_CONFIG` at the application root.
120
- The `loadChildren()` boundary keeps the streaming engine out of the initial
121
- bundle. Route-scoping `provideUnrealModule()` tears down its effects when the
122
- route is left.
123
-
124
- > `UNREAL_CONFIG` on a route's `providers` does **not** work: the engine
125
- > services are `providedIn: 'root'`, so they are created by the root injector
126
- > and read the token from there. A route-level value is invisible to them and
127
- > `inject(UNREAL_CONFIG, { optional: true })` resolves to `null` — e.g. region
128
- > pinging is skipped entirely (empty `regionsPingUrl`), the orchestration
129
- > `requestStream` goes out without a region and the post-connection re-ping
130
- > never runs. Importing only the token at the root does not pull the module into
131
- > the initial bundle (the package is `sideEffects: false`).
132
-
133
- ### 3. Render the scene
134
-
135
- ```typescript
136
- import { ChangeDetectionStrategy, Component } from '@angular/core';
137
- import { UnrealSceneComponent } from '@3dsource/angular-unreal-module';
138
-
139
- @Component({
140
- selector: 'app-stream',
141
- imports: [UnrealSceneComponent],
142
- template: `<app-unreal-scene />`,
143
- changeDetection: ChangeDetectionStrategy.OnPush,
144
- })
145
- export class StreamComponent {}
146
- ```
147
-
148
- `UnrealSceneComponent` also accepts `isStudio`,
149
- `useContainerAsSizeProvider` and `resolutionSize` inputs, and emits
150
- `changeMouseOverScene`.
151
-
152
- ## Main API
153
-
154
- - `provideUnrealState()` — registers the `unrealFeature` NgRx state.
155
- - `provideUnrealModule()` — registers effects and boots streaming services.
156
- - `UnrealSceneComponent` — renders and manages the Pixel Streaming scene.
157
- - `UnrealCommunicatorService` — sends commands and UI interactions.
158
- - `UnrealCallbackService` — observes Unreal callbacks and command responses.
159
- - `unrealFeature`, exported selectors and actions — expose connection and scene
160
- lifecycle state.
161
-
162
- Command packet types are provided by `@3dsource/types-unreal`.
163
-
164
- Run `pnpm demo:start` from the repository root to see the scene component in
165
- the demo application.
166
-
167
- ## Optional prefetch scripts
168
-
169
- The package publishes two dependency-free scripts for use in the document
170
- `<head>` before Angular starts:
171
-
172
- - `region-ping-prefetch.js` measures regions early and caches the closest one.
173
- - `stream-prefetch.js` opens and parks an eligible WebRTC connection so Angular
174
- can adopt it after bootstrap.
175
-
176
- <!-- prettier-ignore -->
177
- ```html
178
- <script
179
- src="https://cdn.jsdelivr.net/npm/@3dsource/angular-unreal-module/js/region-ping-prefetch.js"
180
- async
181
- ></script>
182
- <script
183
- src="https://cdn.jsdelivr.net/npm/@3dsource/angular-unreal-module/js/stream-prefetch.js"
184
- async
185
- ></script>
186
- ```
187
-
188
- `stream-prefetch.js` runs by default only on
189
- `metabox-configurator/{modular|basic}/...` routes. It reads the same-origin
190
- `assets/config.json`; override that path with `data-config-url` when needed.
191
- It also forwards the orchestration-issued `streamRequestId` from the polling
192
- response to Cirrus on the WebSocket URL (the session `connectionId`) and parks it
193
- for the Angular side to adopt.
194
- Pin an exact package version in production when deterministic CDN assets are
195
- required.
196
-
197
- ## Repository development
198
-
199
- Run commands from the repository root:
200
-
201
- ```shell
202
- pnpm unreal:build
203
- pnpm unreal:build:watch
204
- pnpm unreal:lint
205
- pnpm unreal:test
206
- pnpm unreal:test:watch
207
- pnpm unreal:test:signalling
208
- pnpm unreal:test:signalling:leaks
209
- ```
210
-
211
- `unreal:build` builds the local `types-unreal` and `utils` dependencies before
212
- this package.
213
-
214
- Release commands publish only this package:
215
-
216
- ```shell
217
- pnpm unreal:release:patch
218
- pnpm unreal:release:dev
219
- ```
220
-
221
- After a successful publish, the release automatically purges the matching
222
- jsDelivr tag. Retry a failed purge without rerunning the release:
223
-
224
- ```shell
225
- pnpm unreal:purge-cdn -- latest
226
- pnpm unreal:purge-cdn -- dev
227
- ```
228
-
229
- Repository tooling requires Node.js 24.16.0 or newer and pnpm 11.18.0.
1
+ # @3dsource/angular-unreal-module
2
+
3
+ Standalone Angular integration for Unreal Engine Pixel Streaming. The package
4
+ provides the scene component, WebRTC and signalling lifecycle, NgRx state,
5
+ command/callback APIs, reconnection, file transfer and telemetry.
6
+
7
+ ## Requirements
8
+
9
+ - Angular, Angular CDK and Angular Forms `>=19.0.0 <23.0.0`
10
+ - NgRx Store and Effects `>=19.0.0 <23.0.0`
11
+ - RxJS `>=7.8.0 <8.0.0`
12
+ - `@3dsource/types-unreal >=0.0.7`
13
+ - `@3dsource/utils >=1.0.21`
14
+ - `provideHttpClient()` in the host application
15
+
16
+ ## Installation
17
+
18
+ ```shell
19
+ pnpm add @3dsource/angular-unreal-module @3dsource/types-unreal @3dsource/utils
20
+ ```
21
+
22
+ The package is standalone and does not expose an NgModule.
23
+
24
+ ### Styling
25
+
26
+ The package ships its own styles and does not require any UI library. Its
27
+ components read `--src-*` design tokens where available, but every token has a
28
+ built-in fallback, so `@3dsource/source-ui-native` is entirely optional: install
29
+ it in the host application only if you want the components to follow that theme.
30
+
31
+ ## Setup
32
+
33
+ ### 1. Register state and configuration once
34
+
35
+ Add the Unreal feature state, HTTP client and configuration at the application
36
+ root. `UNREAL_CONFIG` is required, although all its fields are optional.
37
+
38
+ <!-- prettier-ignore -->
39
+ ```typescript
40
+ import { provideHttpClient } from '@angular/common/http';
41
+ import type { ApplicationConfig } from '@angular/core';
42
+ import { provideStore } from '@ngrx/store';
43
+ import {
44
+ provideUnrealState,
45
+ UNREAL_CONFIG,
46
+ type UnrealInitialConfig,
47
+ } from '@3dsource/angular-unreal-module';
48
+
49
+ const unrealConfig = {
50
+ regionsPingUrl: 'https://datacenter.3dsource.com/regions/',
51
+ dataChannelConnectionTimeout: 8000,
52
+ fpsMonitor: false,
53
+ autoHighResolution: false,
54
+ } satisfies UnrealInitialConfig;
55
+
56
+ export const appConfig: ApplicationConfig = {
57
+ providers: [
58
+ provideHttpClient(),
59
+ provideStore(),
60
+ provideUnrealState(),
61
+ { provide: UNREAL_CONFIG, useValue: unrealConfig },
62
+ ],
63
+ };
64
+ ```
65
+
66
+ Omit `provideStore()` when the root NgRx store is already configured.
67
+
68
+ Available configuration fields:
69
+
70
+ | Field | Purpose |
71
+ | ------------------------------ | ---------------------------------------------- |
72
+ | `regionsPingUrl` | Region latency endpoint |
73
+ | `dataChannelConnectionTimeout` | DataChannel connection timeout in ms |
74
+ | `customErrorsEndpoint` | Custom error reporting endpoint |
75
+ | `commandTelemetryReceiver` | Command telemetry endpoint |
76
+ | `streamTelemetryV2Url` | Stream lifecycle telemetry endpoint |
77
+ | `screenLockerContainerId` | Container used by the screen-locker overlay |
78
+ | `mode` | `'metabox'` (default) — full Metabox command protocol; `'default'` — stock Pixel Streaming app, the module sends no Metabox commands of its own |
79
+ | `fpsMonitor` | Enables FPS monitoring (currently off — the service is not instantiated) |
80
+ | `autoHighResolution` | Raises resolution after the scene becomes idle |
81
+ | `playwright` | Enables the test-specific service behaviour |
82
+
83
+ Use `{ provide: UNREAL_CONFIG, useValue: {} }` for the minimal configuration.
84
+
85
+ ### 2. Boot the engine on a lazy route
86
+
87
+ Lazy-load the route file from the application router:
88
+
89
+ <!-- prettier-ignore -->
90
+ ```typescript
91
+ import type { Routes } from '@angular/router';
92
+
93
+ export const APP_ROUTES: Routes = [
94
+ {
95
+ path: 'stream',
96
+ loadChildren: () =>
97
+ import('./stream/stream.routes').then((module) => module.STREAM_ROUTES),
98
+ },
99
+ ];
100
+ ```
101
+
102
+ Register `provideUnrealModule()` inside that lazy route file:
103
+
104
+ <!-- prettier-ignore -->
105
+ ```typescript
106
+ import type { Routes } from '@angular/router';
107
+ import { provideUnrealModule } from '@3dsource/angular-unreal-module';
108
+ import { StreamComponent } from './stream.component';
109
+
110
+ export const STREAM_ROUTES: Routes = [
111
+ {
112
+ path: '',
113
+ component: StreamComponent,
114
+ providers: [provideUnrealModule()],
115
+ },
116
+ ];
117
+ ```
118
+
119
+ Keep `provideUnrealState()` and `UNREAL_CONFIG` at the application root.
120
+ The `loadChildren()` boundary keeps the streaming engine out of the initial
121
+ bundle. Route-scoping `provideUnrealModule()` tears down its effects when the
122
+ route is left.
123
+
124
+ > `UNREAL_CONFIG` on a route's `providers` does **not** work: the engine
125
+ > services are `providedIn: 'root'`, so they are created by the root injector
126
+ > and read the token from there. A route-level value is invisible to them and
127
+ > `inject(UNREAL_CONFIG, { optional: true })` resolves to `null` — e.g. region
128
+ > pinging is skipped entirely (empty `regionsPingUrl`), the orchestration
129
+ > `requestStream` goes out without a region and the post-connection re-ping
130
+ > never runs. Importing only the token at the root does not pull the module into
131
+ > the initial bundle (the package is `sideEffects: false`).
132
+
133
+ ### 3. Render the scene
134
+
135
+ ```typescript
136
+ import { ChangeDetectionStrategy, Component } from '@angular/core';
137
+ import { UnrealSceneComponent } from '@3dsource/angular-unreal-module';
138
+
139
+ @Component({
140
+ selector: 'app-stream',
141
+ imports: [UnrealSceneComponent],
142
+ template: `<app-unreal-scene />`,
143
+ changeDetection: ChangeDetectionStrategy.OnPush,
144
+ })
145
+ export class StreamComponent {}
146
+ ```
147
+
148
+ `UnrealSceneComponent` also accepts `isStudio`,
149
+ `useContainerAsSizeProvider` and `resolutionSize` inputs, and emits
150
+ `changeMouseOverScene`.
151
+
152
+ ## Main API
153
+
154
+ - `provideUnrealState()` — registers the `unrealFeature` NgRx state.
155
+ - `provideUnrealModule()` — registers effects and boots streaming services.
156
+ - `UnrealSceneComponent` — renders and manages the Pixel Streaming scene.
157
+ - `UnrealCommunicatorService` — sends commands and UI interactions.
158
+ - `UnrealCallbackService` — observes Unreal callbacks and command responses.
159
+ - `unrealFeature`, exported selectors and actions — expose connection and scene
160
+ lifecycle state.
161
+
162
+ Command packet types are provided by `@3dsource/types-unreal`.
163
+
164
+ Run `pnpm demo:start` from the repository root to see the scene component in
165
+ the demo application.
166
+
167
+ ## Optional prefetch scripts
168
+
169
+ The package publishes two dependency-free scripts for use in the document
170
+ `<head>` before Angular starts:
171
+
172
+ - `region-ping-prefetch.js` measures regions early and caches the closest one.
173
+ - `stream-prefetch.js` opens and parks an eligible WebRTC connection so Angular
174
+ can adopt it after bootstrap.
175
+
176
+ <!-- prettier-ignore -->
177
+ ```html
178
+ <script
179
+ src="https://cdn.jsdelivr.net/npm/@3dsource/angular-unreal-module/js/region-ping-prefetch.js"
180
+ async
181
+ ></script>
182
+ <script
183
+ src="https://cdn.jsdelivr.net/npm/@3dsource/angular-unreal-module/js/stream-prefetch.js"
184
+ async
185
+ ></script>
186
+ ```
187
+
188
+ `stream-prefetch.js` runs by default only on
189
+ `metabox-configurator/{modular|basic}/...` routes. It reads the same-origin
190
+ `assets/config.json`; override that path with `data-config-url` when needed.
191
+ It also forwards the orchestration-issued `streamRequestId` from the polling
192
+ response to Cirrus on the WebSocket URL (the session `connectionId`) and parks it
193
+ for the Angular side to adopt.
194
+ Pin an exact package version in production when deterministic CDN assets are
195
+ required.
196
+
197
+ ## Repository development
198
+
199
+ Run commands from the repository root:
200
+
201
+ ```shell
202
+ pnpm unreal:build
203
+ pnpm unreal:build:watch
204
+ pnpm unreal:lint
205
+ pnpm unreal:test
206
+ pnpm unreal:test:watch
207
+ pnpm unreal:test:signalling
208
+ pnpm unreal:test:signalling:leaks
209
+ ```
210
+
211
+ `unreal:build` builds the local `types-unreal` and `utils` dependencies before
212
+ this package.
213
+
214
+ Release commands publish only this package:
215
+
216
+ ```shell
217
+ pnpm unreal:release:patch
218
+ pnpm unreal:release:dev
219
+ ```
220
+
221
+ After a successful publish, the release automatically purges the matching
222
+ jsDelivr tag. Retry a failed purge without rerunning the release:
223
+
224
+ ```shell
225
+ pnpm unreal:purge-cdn -- latest
226
+ pnpm unreal:purge-cdn -- dev
227
+ ```
228
+
229
+ Repository tooling requires Node.js 24.16.0 or newer and pnpm 11.18.0.