Let me first tell you what is NPAW.

NPAW is a video analytics platform that provides video intelligence solutions for streaming services.

Integrating NPAW with React or Next.js proved to be a challenge for me during a client project. Despite having documentation for vanilla JavaScript, there was limited information on how to properly integrate it with React or Next.js. After experimenting with various methods, I was able to successfully integrate NPAW with React or Next.js and utilize video.js as the video player.

Let’s get to the business.

Integrating NPAW with React or Next.js and Video.js can be a bit tricky, but with the right steps, it can be done seamlessly.

If you don’t have an account yet you can simply create an account from here.

Here’s a step-by-step guide on how to integrate NPAW with React or Next.js and Video.js:

Step:1

Install the youboralib and youbora-adapter-videojs package by running the following command:

npm install --save youboralib youbora-adapter-videojs

Step:2

Import the packages in your component by adding the following lines of code:

import youbora from 'youboralib';
import 'youbora-adapter-videojs';

Step:3

Initialize the youbora plugin by adding the following code:

const videoRef = useRef(null);

const player = videojs(videoRef.current);
const plugin = new youbora.Plugin({ accountCode: 'accountTest' });

Step:4

Add the video.js player in your JSX by adding the following code:

 <video id="playerId" preload="auto" controls ref={videoRef} autoPlay 
  className="video-js vjs-default-skin vjs-big-play-centered vjs-16-9 vjs-fluid vjs-user-inactive vjs-controls-enabled vjs-workinghover vjs-waiting vjs-has-started vjs-live vjs-liveui-enabled vjs-touch-enabled"
  data-setup='{"fluid": true, "autoplay": true, "preload": "auto"}'
      />

Step:5

Set the options and attach the adapter inside the useEffect() hook by adding the following code:

  useEffect(() => {
    const player = videojs(videoRef.current, {
      sources: [
        {
          src: video.url,
        },
      ],
    });
    const plugin = new youbora.Plugin({ accountCode: "accountTest" }); // your account code
    plugin.setOptions({
      "content.isLive": false,
      "content.title": video.title,
    });
    plugin.setAdapter(new youbora.adapters.Videojs(player));
  }, [video.url, video.title]);

You can find your account code in your NPAW account under the profile section.

Here is the full code in a single file.

import { useEffect, useRef } from "react";

import videojs from "video.js";
import "youbora-adapter-videojs";
import youbora from "youboralib";

const MyVideoPlayer = (props) => {
  const { video } = props;
  const videoRef = useRef(null);

  useEffect(() => {
    const player = videojs(videoRef.current, {
      sources: [
        {
          src: video.url,
        },
      ],
    });
    const plugin = new youbora.Plugin({ accountCode: "accountTest" });
    plugin.setOptions({
      "content.isLive": false,
      "content.title": video.title,
    });
    plugin.setAdapter(new youbora.adapters.Videojs(player));
  }, [video.url, video.title]);

  return (
    <div>
      <video
        id="playerId"
        preload="auto"
        controls
        ref={videoRef}
        autoPlay
        className="video-js vjs-default-skin vjs-big-play-centered vjs-16-9 vjs-fluid vjs-user-inactive vjs-controls-enabled vjs-workinghover vjs-waiting vjs-has-started vjs-live vjs-liveui-enabled vjs-touch-enabled"
        data-setup='{"fluid": true, "autoplay": true, "preload": "auto"}'
      />
    </div>
  );
};

export default MyVideoPlayer;

Hope you find it useful.

Official documentation from NPAW is here.