2

While integrating the aws ivs streaming channel with quiz related metadata, at that time getting the console.log of the metadata records and while passing those records into another component it is not handling any how.

A playground that i have created into codesandobx

PlayerComponent

function PlayerComponent(options) {
  useEffect(() => {
    const script = document.createElement("script");

    script.src = "https://player.live-video.net/1.0.0/amazon-ivs-player.min.js";
    script.async = true;

    document.body.appendChild(script);

    script.onload = (IVSPlayer) => {
      if (IVSPlayer.isPlayerSupported) {
        const player = IVSPlayer.create();
        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.xhP3ExfcX8ON.m3u8"
        );
        player.play();
        player.addEventListener(
          IVSPlayer.PlayerEventType.TEXT_METADATA_CUE,
          (cue) => {
            const metadataText = cue.text;
            setMetaData(metadataText);
            console.log("PlayerEvent - METADATA: ", metadataText);
          }
        );
      }
    };

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div ref={divEl}>
      <video id="video-player" ref={videoEl} autoPlay controls></video>
      {metaData !== undefined ? <QuizComponent metadata={metaData} /> : ""}
    </div>
  );
}

On QuizComponent would like to render those metadata

export default function QuizComponent(props) {
  const questionData = props;

  return (
    <React.Fragment>
      <h2>{questionData.metadata.question}</h2>
    </React.Fragment>
  );
}

But any how not able to render the data into component.

Ref example of what I am going to implement. https://codepen.io/amazon-ivs/pen/XWmjEKN?editors=0011

John Rotenstein
  • 241,921
  • 22
  • 380
  • 470
TMA
  • 1,419
  • 2
  • 22
  • 49

1 Answers1

2

I found the problem. Basically you are referring IVSPlayer as if it was the argument of the arrow function you passed to script onload, while the argument instead is an event (the onload event).
Solution: const {IVSPlayer} = window;. Infact docs say

Once amazon-ivs-player.min.js is loaded, it adds an IVSPlayer variable to the global context.

Docs also explain how to setup with NPM which you may be interested in.

I updated my playground here. I also suggest you to edit the version of the player as the last one is 1.2.0.

Zeno Dalla Valle
  • 957
  • 5
  • 16