By using AWS re:Post, you agree to the Terms of Use

IVS player for Angular

0

Hi
I am trying to use the npm version of the amazon-ivs-player with Angular.

It seems to have been designed for use with webpack.. but I am stuck with the angular-cli.

I am following this example:
https://github.com/aws-samples/amazon-ivs-player-web-sample/blob/master/samples/npm-sdk/npm-sdk.ts

Angular-cli does not seem to like the two import statement for the wasm files:
import wasmBinaryPath from 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm'
import wasmWorkerPath from 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.js';

I get these errors when trying to compile the application:
ERROR in ./src/app/components/player2/video-player.component.ts 48:43-57
"export 'default' (imported as 'wasmBinaryPath') was not found in 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm'
ERROR in ./node_modules/amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm
Module not found: Error: Can't resolve 'a' in 'C:\Users\james\OneDrive\Documents\gitprojects\doghouse-demo\ui\node_modules\amazon-ivs-player\dist\assets'
ERROR in ./node_modules/amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm
WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:

  • multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node&sockPath=/sockjs-node ./src/main.ts --> ./src/main.ts --> ./src/app/app.module.ts --> ./src/app/components/player2/video-player.component.ts --> ./node_modules/amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm

Is there anyone that could shed any light on this?

Maybe there is another way to use wasm with the Angular framework?

If I cant use npm then maybe I have to use the script tags but then I dont think I can interact with the Angular code in the application.

Kind regards
J

2 Answers
0

Developers packaging the IVS player into an app are required to resolve and import the following assets via URL:

  • ‘amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm’
  • ‘amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.js’;

These assets must not be re-compiled during packaging. Your build tool must ignore these wasm files.

A sample of webpack config can be found: https://github.com/aws-samples/amazon-ivs-player-web-sample/blob/master/webpack.config.js , however, other packagers could have their own way of ignoring certain files from being re-compiled.

answered 2 years ago
0

Hello,

Adding on to what Riley mentioned, this GitHub issue on our web samples repo seems to describe a similar problem and may have more tips: https://github.com/aws-samples/amazon-ivs-player-web-sample/issues/4.

I'm not familiar with angular-cli, but perhaps you could use this library to specify an additional webpack configuration that'd let you copy the player's assets without recompilation? https://github.com/just-jeb/angular-builders

Best,
Tony

answered 2 years ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions