Thursday, 21 July 2022

How to integrate AWS IVS with JW Player?

I'm trying to follow this IVS sample, the only difference is using the JW player, I following this documentation

The problem is that this snippet

  jwplayer(videoPlayer).addEventListener(
    PlayerEventType.TEXT_METADATA_CUE,
    function (cue) {
      const metadataText = cue.text;
      const position = player.getPosition().toFixed(2);
      console.log(
        `Player Event - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.`
      );
      triggerQuiz(metadataText);
    }
  );

is giving this error

script.js:60 Uncaught TypeError: Cannot read properties of undefined (reading 'TEXT_METADATA_CUE')

I'm either not adding an event listener to the jw player correctly or I'm doing something wrong while working with IVS.

My full code is below

const playbackUrl =
  "https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8";

const videoPlayer = document.getElementById("video-player");
const quizEl = document.getElementById("quiz");
const waitMessage = document.getElementById("waiting");
const questionEl = document.getElementById("question");
const answersEl = document.getElementById("answers");
const cardInnerEl = document.getElementById("card-inner");
var ivsPlayer = {};
var ivsEvents = {};
const ivsConfig = {
  playlist: [
    {
      file: playbackUrl,
      type: "ivs",
    },
  ],
};

(function (ivsPlayer) {
  jwplayer(videoPlayer)
    .setup(ivsConfig)
    .on("providerPlayer", function (player) {
      console.log("Amazon IVS Player: ", player.ivsPlayer);
      console.log("Amazon IVS Player Events: ", player.ivsEvents);

      // store the reference to the Amazon IVS Player
      ivsPlayer = player.ivsPlayer;
      // store the reference to the Amazon IVS Player Events
      ivsEvents = player.ivsEvents;
    });
  const PlayerState = ivsPlayer.PlayerState;
  const PlayerEventType = ivsPlayer.PlayerEventType;
 

  jwplayer(videoPlayer).addEventListener(
    PlayerEventType.TEXT_METADATA_CUE,
    function (cue) {
      const metadataText = cue.text;
      const position = player.getPosition().toFixed(2);
      console.log(
        `Player Event - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.`
      );
      triggerQuiz(metadataText);
    }
  );

  // Setup stream and play

  // Remove card
  function removeCard() {
    quizEl.classList.toggle("drop");
  }

  // Trigger quiz
  function triggerQuiz(metadataText) {
    let obj = JSON.parse(metadataText);

    quizEl.style.display = "";
    quizEl.classList.remove("drop");
    waitMessage.style.display = "none";
    cardInnerEl.style.display = "none";
    cardInnerEl.style.pointerEvents = "auto";

    while (answersEl.firstChild) answersEl.removeChild(answersEl.firstChild);
    questionEl.textContent = obj.question;

    let createAnswers = function (obj, i) {
      let q = document.createElement("a");
      let qText = document.createTextNode(obj.answers[i]);
      answersEl.appendChild(q);
      q.classList.add("answer");
      q.appendChild(qText);

      q.addEventListener("click", (event) => {
        cardInnerEl.style.pointerEvents = "none";
        if (q.textContent === obj.answers[obj.correctIndex]) {
          q.classList.toggle("correct");
        } else {
          q.classList.toggle("wrong");
        }
        setTimeout(function () {
          removeCard();
          waitMessage.style.display = "";
        }, 1050);
        return false;
      });
    };

    for (var i = 0; i < obj.answers.length; i++) {
      createAnswers(obj, i);
    }
    cardInnerEl.style.display = "";
  }

  waitMessage.style.display = "";
})(window.ivsPlayer);


from How to integrate AWS IVS with JW Player?

No comments:

Post a Comment