amazon ivs player with video.js integration returns error Cannot read property 'getMediaPlayerAPI'

[paaricit]

i integrated ivs player with video js in angular 11. when i am integrating it returns amazon-ivs-wasworker.min.wasm dependency not found. so i created custom web config file used below code

`module.exports = {

module: {
    rules: [            
        {
            /**
             * 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.
             * The webpack file-loader (https://webpack.js.org/loaders/file-loader/) accomplishes this.
             * Rollup's plugin-url (https://github.com/rollup/plugins/tree/master/packages/url) also seems to do this, but has not been tested.
             */
            test: /[\/\\]amazon-ivs-player[\/\\].*dist[\/\\]assets[\/\\]/,
            loader: 'file-loader',
            type: 'javascript/auto',
            options: {
                name: '[name].[ext]'
            }
        },
    ]
},

};`

after that error resolved. and then in the browser when i try to play video it's not working.

please help me to resolve these issue

my code

`Type script import videojs from 'video.js'; import { VideoJSQualityPlugin, VideoJSIVSTech, registerIVSQualityPlugin, registerIVSTech, VideoJSEvents, } from 'amazon-ivs-player'; // import { setupForm, getFormStream } from '../common/form-control';

// We use the TypeScript compiler (TSC) to check types; it doesn't know what this WASM module is, so let's ignore the error it throws (TS2307). // @ts-ignore import wasmBinaryPath from 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm'; // @ts-ignore import wasmWorkerPath from 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.js'; import { VideoType } from '../../data';

const createAbsolutePath = (assetPath: string) => new URL(assetPath, document.URL).toString();

// register the tech with videojs registerIVSTech(videojs, { wasmWorker: createAbsolutePath(wasmWorkerPath), wasmBinary: createAbsolutePath(wasmBinaryPath), });

// register the quality plugin registerIVSQualityPlugin(videojs)

const player = videojs('videojs-player', { techOrder: ["AmazonIVS"], autoplay: true, 'sources': [{ 'src': this.video.media_Url,
}], 'poster': this.video.media_thumbnailUrl }, function () { console.warn('Player is ready to use') }) as videojs.Player & VideoJSIVSTech & VideoJSQualityPlugin; player.play(); // enable the quality plugin // player.enableIVSQualityPlugin();

    // listen to IVS specific events
    const events: VideoJSEvents = player.getIVSEvents();
    if (player && player.getIVSPlayer()) {
        const ivsPlayer = player.getIVSPlayer();
        ivsPlayer.addEventListener(events.PlayerState.PLAYING, () => { console.log('IVS Player is playing') });

    }

html <video id="videojs-player" class="v-player video-js vjs-default-button vjs-big-play-centered stream-video vjs-icon-hd" controls playsinline data-setup="{}"

package json

"@angular-builders/custom-webpack": "^11.1.0", "@angular-builders/dev-server": "^7.3.1", "@angular/animations": "^11.1.2", "@angular/cdk": "^11.2.3", "@angular/common": "^11.1.2", "@angular/compiler": "^11.1.2", "@angular/core": "^11.1.2", "@angular/flex-layout": "^11.0.0-beta.33", "@angular/forms": "^11.1.2", "@angular/material": "^11.2.3", "@angular/platform-browser": "^11.1.2", "@angular/platform-browser-dynamic": "^11.1.2", "@angular/router": "^11.1.2", "@ngu/carousel": "^3.0.2", "@swimlane/ngx-charts": "^17.0.1", "amazon-ivs-player": "^1.2.0", "angularx-social-login": "^3.5.4", "hammerjs": "^2.0.8", "ngx-spinner": "^10.0.1", "rxjs": "^6.6.6", "tslib": "^2.0.0", "video.js": "^7.11.4", "videojs-contrib-quality-levels": "^2.0.9", "videojs-hls-quality-selector": "^1.1.4", "zone.js": "^0.11.4" `

[tonyjin]

Hello! It looks like the IVS player's assets are not being loaded properly. This issue has a few suggestions for how to load the player's assets: https://github.com/aws-samples/amazon-ivs-player-web-sample/issues/4

Alternatively, you could consider loading the player's assets directly from our CDN - see this CodePen demo. I found a few articles describing how to work with external scripts + Angular through Google, but don't want to recommend a specific one given I don't have experience with Angular.

[paaricit]

hi tony, when integrating ivs player works fine. but integrating ivs player with video.js gives me error. i also refered https://github.com/aws-samples/amazon-ivs-player-web-sample/issues/4 .I could not find any solution.

[tonyjin]

Could you share example code in a repl.it or a similar tool? The 404 in your console log suggests that the player's assets aren't being loaded properly before the Video.js tech is registered.

[tonyjin]

Closing this issue. Please reach out to AWS Support for integration support.

[shixin-guo]

I also meet this issue, so do we have any solution @paaricit @tonyjin

[tonyjin]

@gzponline can you please file a new issue? Include sample code, error logs, and screenshots if possible, thanks!