Using Plyr.io with Amazon IVS player?

rahulrsingh09 commented 4 years ago

I am trying to integrate the Amazon IVS web player in plyr.io But accordion to IVS documentation its says to use this.

But i am not able to enable wasm support .

/**
 * Web Workers and WASM Workers need to be created via URL. Webpack has created the relative URL for us via file-loader,
 * now we just have to create the absolute (fully qualified) URL.
 */
const createAbsolutePath = (assetPath: string) => new URL(assetPath, document.URL).toString();
const player = this.player = create({
    wasmWorker: createAbsolutePath(wasmWorkerPath),
    wasmBinary: createAbsolutePath(wasmBinaryPath),
});

I have been able to add the basic PLyr Mechanism , in the same way we integrate the HLS player, but it dosent seem to work for IVS as i thing i am not able to attache wasm

initPlayer = reference => {
    const IVS = require("amazon-ivs-player"); // cdn ?
    console.log(reference);
    if (IVS.isPlayerSupported) {
      const plyr = require("plyr");
      const player = IVS.create(reference);
      player.load(this.props.sourceUrl);

      require("plyr/dist/plyr.css");
      new plyr(reference, {});
      player.play();
    } else {
      const plyr = require("plyr");
      // default options with no quality update in case Hls is not supported
      new plyr(reference, this.props.options);
    }
  };

I have created a Sample Stackblitz where i am trying this out but failing can i get some help on this, I have a Extended player where we wrap the plyr with Hls for ref

Running the IVS standalone in html works as per documentation which i tried like below, How to get it working in React + plyr as the wrapper.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
<script src="https://player.live-video.net/1.1.2/amazon-ivs-player.min.js"></script>
<video id="video-player" playsinline></video>
<script>
  if (IVSPlayer.isPlayerSupported) {
    const player = IVSPlayer.create(document.getElementById('video-player'));
    player.attachHTMLVideoElement(document.getElementById('video-player'));
    player.load("https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8");
    player.play();
  }
</script>
</body>

</html>

tonyjin commented 4 years ago

Hey @rahulrsingh09, our support may be limited since this is an integration with a third party framework and doesn't appear to be a bug with our web sample code.

One thing I noticed - I'm not able to see how you've defined your reference config object, are you setting the wasmBinary and wasmWorker properties on that object? If not, please see https://aws.github.io/amazon-ivs-player-docs/1.1.2/web/interfaces/playerconfig.html for how the player config needs to be defined when using the NPM package.

rahulrsingh09 commented 4 years ago

@tonyjin the reference is created in the Base Player

class BasePlayer extends React.Component<IBasePlayerProps, {}> {
  private videoPlayer: React.RefObject<HTMLVideoElement>;
  private player: any;

  constructor(props) {
    super(props);
    this.videoPlayer = React.createRef();
  }

  componentDidMount() {
    this.props.initializePlayer(this.videoPlayer.current);
  }

  componentWillUnmount() {
    this.props.onPlayerDestroy(this.videoPlayer.current);
    this.player.destroy();
  }

  render() {
    return (
      <video className="js-plyr plyr" playsinline ref={this.videoPlayer} />
    );
  }
}

It in this stackblitz link playground - https://stackblitz.com/edit/reactvideoplayer?file=basePlayer.tsx. I am confused by this wasmBinary and wasmWorker properties on that object? where do i set it as the player ref is in this initPlayer method . Can you please help on this if possible i know its a third party intg but i should be able to play via any other player .. where do we make it work..

tonyjin commented 4 years ago

It appears that reference is a reference to your video element. You'll need to pass that into attachHTMLVideoElement() instead of passing it into create(), which expects a PlayerConfig object.

If you're looking to integrate with a player framework that includes a UI, we include sample code for how to integrate with Video.js.

rahulrsingh09 commented 4 years ago

@tonyjin I am getting a error like Error: Cannot read property 'asmWorker' of undefined . when using create() and also if i try to get the asm worker defined based out of https://github.com/aws-samples/amazon-ivs-player-web-sample/blob/master/samples/npm-sdk/npm-sdk.ts . I cannot get it to work .. I think its more of the web assembly problem. If i figure that out i can get it to work using the NPM module, I donot want to intg with video js as we have been using a different player for our integration..

rahulrsingh09 commented 4 years ago

Also @tonyjin can you please point me to what is

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";

as everytime i try to use this i get an error Cannot find module 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm' or its corresponding type declarations.

tonyjin commented 4 years ago

There are a few different ways to use our player. If you want to use NPM and bundle your own assets, you'll need to configure Webpack, and we show how to do so with our sample code in this repo. You can see a live demo of this working at https://repl.it/github/aws-samples/amazon-ivs-player-web-sample (you can sign up for a free account with your GitHub login).

Load the repo in repl.it, configure to run npm run start, click the "Run" button, wait for npm install and the build to complete, and reload the page and you should see something like: Screen Shot 2020-11-20 at 12 52 02 PM

The errors you're seeing for Error: Cannot read property 'asmWorker' of undefined are likely because you haven't configured Webpack properly.

Alternatively, you can load the required assets from our CDN instead of bundling and distributing them yourself. https://github.com/aws-samples/amazon-ivs-player-web-sample/tree/master/samples/cloud-player shows how you can do that.

rahulrsingh09 commented 4 years ago

@tonyjin Thanks for the inputs , i think webpack / file loader was the one creating some issues on my end . I will be posting a solve as soon as i have one will be add on for IVS to support this plyr intg as its quite popular..

tonyjin commented 4 years ago

Great! I'll close out this issue for now. If you'd like, we'd be happy to review a PR with your sample integration between plyr.io and IVS.

rahulrsingh09 commented 4 years ago

@tonyjin I have created a sample code for the integration - https://repl.it/@rahulrsingh09/IVSPlayer

aws-samples / amazon-ivs-player-web-sample

Using Plyr.io with Amazon IVS player? #13