Pixel Streaming sample Angular application

A minimal sample application that uses the Pixel Streaming library in Angular.

Key features

• A minimal Angular application with a Pixel Streaming wrapper component
  • Starts a Pixel Streaming session on wrapper component mount
  • Disconnects the session on wrapper component unmount e.g. if navigating to another view in a single page app
  • Hooks to playStreamRejected event and displays a Click to play overlay if the browser rejects video stream auto-play

Developing

To build and run the Angular application, run:

• npm install
• npm run build-all
• npm run serve

Alert Notes: Notable modifications of default angular app generated by angular cli.

• In package.json's scripts, two new command lines build-all and build-dev-all has beed added to be able to link PixelStreamingInfrastructured library with angular librairy

  "build-all": "npm link ../../library && cd ../../library && npm run build && cd ../implementations/angular && npm run build",
  "build-dev-all": "npm link ../../library && cd ../../library && npm run build-dev && cd ../implementations/angular && npm run build-dev"

  ( Alternative: Or you can add it directly in angular project: npm install --save @epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2)

• In tsconfig.json's compilerOptions, the option "skipLibCheck": true has been added to fix any typescript errors of type TS2416 ("Property 'X' in type 'X' is not assignable to the same property in base type 'X'") to be able to link external library @epicgames-ps/lib-pixelstreamingfrontend-ue5.2 from parent folder ../../library.

• In angular.json's architect > serve, the option below has been added to be able to use host http://localhost instead of default host and port http://localhost:4200

  "options": {
    "port": 80, 
    "host": "localhost"
  },

• In angular/src/app/pixel-streaming-wrapper's folder, a new component PixelStreamingWrapperComponent with an input data attribute InitialSettings has been generated to be able to implement PixelStreaming element. See new content of app.component.html below:

  <div style="height: 100% ; width: 100%">
    <app-pixel-streaming-wrapper [initialSettings]='initialSettings' />
  </div>

• In angular/src/app/app.component.spec.ts, assertion test it(should have as title 'angular') has been removed to fix error TS2339: Property 'title' does not exist on type 'AppComponent'.