H5P-автономная регистрация событий xapi с помощью ReactJs?

Question

Я реализую h5p с помощью reactjs, я могу играть в плеер h5p, однако я не могу просматривать события с помощью команды externalDispatcher.on("xAPI", (event)....

Как я могу зарегистрировать событие h5p в reactjs

Сообщение об ошибке: Не удается прочитать свойства неопределенного (чтение «включено»)

      import { H5P } from "h5p-standalone";
import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    const el = document.getElementById("h5p-container");
    const options = {
      h5pJsonPath: "/h5p/pygame",
      frameJs: "/assets/frame.bundle.js",
      frameCss: "/assets/styles/h5p.css"
    };
    const needAsync = async () => {
      await new H5P(el, options).then((res) => {
        H5P.externalDispatcher.on("xAPI", (event) => {
          console.log(event);
        });
      });
    };
    needAsync();
  }, []);
  return <></>;
}

Сообщение об ошибке

Answer 1

Вы импортируете как , и это не тот объект, который вы ищете, когда хотите прослушивать события, отправляемые H5P.

Вам нужно будет импортироватьH5PStandaloneс

      import { H5P as H5PStandalone } from 'h5p-standalone';

а затем, соответственно, создать экземпляр с помощьюnew H5PStandalone(el, options). Это позволит вам получить доступ к подлинномуH5Pпосле создания экземпляра H5PStandalone.

И подсказка: вы смешиваете промисы и асинхронные вызовы. Вы должны либо использовать первый, например

      const needAsync = () => {
  new H5PStandalone(el, options).then(() => {
    H5P.externalDispatcher.on('xAPI', (event) => {
      console.log(event);
    });
  });
};

или последний нравится

      const needAsync = async () => {
  await new H5PStandalone(el, options);
 
  H5P.externalDispatcher.on('xAPI', (event) => {
    console.log(event);
  });
};

Они оба делают то же самое. Технически вам также не нужно оборачивать их в функцию, но вы можете запустить код напрямую (Appнеобходимо было бы объявить асинхронным при использованииasync/awaitсинтаксис).