How to use Azure Video Analyzer player in React JS ?

Question

I want to use Azure Video Analyzer player widget in React JS components but i couldn't able to find implementation for reactjs.

So, how can i get streaming url to playback cvr video stored in Azure Video Analyzer to play it directly in React Player?

Answer 1

Sorry for miscommunication, We don't use <ava-player> tag directly, and insert the player using appendChild.

Since you are using <ava-player> tag, you can just use
const playerInstance= document.querySelector("ava-player");

playerInstance.configure({
token: '<AVA-API-JWT-TOKEN>',
clientApiEndpointUrl: <endpointUri>,
videoName: <videoName>
});

playerInstance.load();

Answer 2

Video analyzer widget is a web component, so you should be able to use with any framework.
We are using the widget with ReactJS in our portal.

For example if you are using NPM package
React.useEffect(() => {
const playerInstance = new Player({ videoName: <videoName>, clientApiEndpointUrl: <endpoint>, token: <clientApiToken>});
document.getElementById("widgetContainer").appendChild(playerInstance);
playerInstance.load()
}, [])`;

Or if you are using from CDN directly
React.useEffect(() => {
const avaPlayer = document.createElement("ava-player") as any;
document.getElementById("widgetContainer").appendChild(avaPlayer);
avaPlayer.configure({
token: '<AVA-API-JWT-TOKEN>',
clientApiEndpointUrl: <endpointUri>,
videoName: <videoName>
});
avaPlayer.load();
}, []);