Introduction
Datazoom is a high availability real-time data collection solution. This document summarizes how to integrate our JW Player Collector with an example React application.
Example
https://gitlab.com/datazoom/reactapp-jw-player-collector
Prerequisites
Node.js and npm / yarn installed.
React Project
Packages needed (example)
Datazoom Collector: https://www.npmjs.com/package/@datazoom/collector_jw
Video Player: https://www.npmjs.com/package/@jwplayer/jwplayer-react
Important Notice: Datazoom NPM Collector SDK Required
This project is structured and configured to work with NPM (Node Package Manager), and it is mandatory to use NPM for installing the Datazoom Collector SDK and other dependencies. Direct inclusion of the Collector SDK or other dependencies via script tags in HTML is not supported and may lead to compatibility issues or unexpected behavior.
Implementation
Step 1: Setup React Project
Run the command to create a new Vite project with React template:
npm create vite@latest your-project-name --template react
Replace
your-project-name
with your desired project name.Navigate to your project directory:
cd your-project-name
Step 2: Install the Required Packages:
Inside your project directory, run the following commands to install the specific packages:
npm install @datazoom/collector_jw @jwplayer/jwplayer-react@1.1.3
The above package inserts Datazoom JW collector SDK and JW player packages into the project.
Step 3: Setting Up JW Player:
After installing the packages, you need to integrate JW Player into your React application.
Import
JWPlayer
component from@jwplayer/jwplayer-react
in your React component.Use the
JWPlayer
component in your JSX, providing necessary props such asfile
,library
, etc.
Example:
App.jsx
import { useState } from "react"; import JWPlayer from "@jwplayer/jwplayer-react"; import { jwScript } from "./constants"; function App() { const [playerContext, setPlayerContext] = useState(null); return ( <main> <h1>JW Player</h1> <div style={{ width: "600px", }} > // {{jwScript}} - Please provide you jw player licensed script <JWPlayer file="https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8" library={jwScript} /> </div> </main> ); } export default App;
Step 4: Collector SDK integration:
Import and configure the Datazoom Collector for JW Player as per the documentation of
@datazoom/collector_jw
.You might need to add specific Datazoom configurations like
configuration_id
,JW Player instance
, etc.
datazoom.init({ configuration_id: dzConfigId, });
Replace
dzConfigId
with your configuration idThis Initialises Datazoom's SDK with the configuration id.
Example:
App.jsx
import { useState } from "react"; import JWPlayer from "@jwplayer/jwplayer-react"; import datazoom from "@datazoom/collector_jw"; import { dzConfigId, jwScript } from "./constants"; // Initialises Datazoom SDK datazoom.init({ configuration_id: dzConfigId, }); function App() { const [datazoomContext, setDatazoomContext] = useState(null); const [playerContext, setPlayerContext] = useState(null); // This method creates datazoom context by attaching player const handleDidMount = ({ player }) => { let datazoomContext; datazoomContext = datazoom.createContext(player); setPlayerContext(player); setDatazoomContext(datazoomContext); }; return ( <main> <h1>JW Player</h1> <div style={{ width: "600px", }} > <JWPlayer file="https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8" library={jwScript} didMountCallback={handleDidMount} /> </div> </main> ); } export default App;
constants/index.js
Provide your JW script and Datazoom collector configuration id.
export const jwScript = import.meta.env.VITE_JW_SCRIPT; export const dzConfigId = import.meta.env.VITE_DZ_CONFIG_ID;
Step 5: Running the Project:
Instructions on how to run the React project:
npm start
or
yarn start
Stop Data Collection
If the data collection must be stopped for any reason, for example after the destruction of the corresponding player instance, invoke the destroy()
method of the Datazoom context object as in the following example:
import { useState } from "react"; import JWPlayer from "@jwplayer/jwplayer-react"; import datazoom from "@datazoom/collector_jw"; import { dzConfigId, jwScript } from "./constants"; datazoom.init({ configuration_id: dzConfigId, }); function App() { // ... (your existing code) // This methods destorys datazoom context and player instance const handleDestory = () => { if (playerContext !== undefined) { playerContext.remove(); setPlayerContext(null); } if (datazoomContext !== undefined) { datazoomContext.destroy(); setDatazoomContext(null); } }; return ( <main> <h1>JW Player NPM</h1> <div style={{ width: "600px", }} > <JWPlayer file="https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8" library={jwScript} didMountCallback={handleDidMount} /> </div> <button onClick={handleDestory}>Destroy</button> </main> ); } export default App;
Working Example:
https://main.d268bso4kp9d3c.amplifyapp.com/?datazoom_debug=true
References:
JW Player NPM: https://www.npmjs.com/package/@jwplayer/jwplayer-react
JW API Doc: https://developer.jwplayer.com/jw-player/docs/javascript-api-reference/
Datazoom JW Collector SDK: https://www.npmjs.com/package/@datazoom/collector_jw
Comments
0 comments
Article is closed for comments.