interactive-react-player

Setup instructions

1. Install the npm package

npm install interactive-react-player

2. Use the below boilerplate react code as a reference to setup the interactive component

import React from "react";
import { InteractivePlayer } from "interactive-react-player";
import axios from "axios";

const App = () => {
  const [videoData, setVideoData] = React.useState({});
  const [canvasWidth, setCanvasWidth] = React.useState(window.innerWidth);
  const [canvasHeight, setCanvasHeight] = React.useState(window.innerHeight);
  const params = {
    url: process.env.VIDEO_URL,
    key: process.env.API_KEY,
  };
  const apiUrl: any = process.env.API_URL;
  React.useEffect(() => {
    axios
      .get(apiUrl, {
        params: params,
      })
      .then((res) => {
        const data = res.data;
        setVideoData(data);
        if (!data.showControls) {
          setCanvasHeight(canvasHeight * 0.97);
        } else {
          setCanvasHeight(canvasHeight * 0.93);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  return (
    <>
      <InteractivePlayer
        canvasHeight={canvasHeight}
        canvasWidth={canvasWidth}
        videoData={videoData}
      />
    </>
  );
};

3. The following environment variables can be found in interactive video applications

  process.env.VIDEO_URL,
  process.env.API_KEY,
  process.env.API_URL;