question

Vishu-8077 avatar image
0 Votes"
Vishu-8077 asked Vishu-8077 commented

How to use Azure Video Analyzer player in React JS ?

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?

azure-media-services
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

GirishAkasapu-4224 avatar image
0 Votes"
GirishAkasapu-4224 answered Vishu-8077 commented

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();

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks for the quick response. It's working fine now

0 Votes 0 ·
GirishAkasapu-4224 avatar image
0 Votes"
GirishAkasapu-4224 answered Vishu-8077 commented

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();
}, []);


· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

see https://github.com/Azure/video-analyzer-widgets for more info on how to use the widget.

1 Vote 1 ·
Vishu-8077 avatar image Vishu-8077 GirishAkasapu-4224 ·

I have one more question i.e. in case we need to refresh the access token periodically then we can do this by using the below script


132001-image.png



So, in the fetch parameter do we need to provide API url of the jwt token issuer?

0 Votes 0 ·
image.png (19.8 KiB)

I tried with NPM package and used the implementation as mentioned by you above but i am getting error

131876-image.png


Here is my source code which i am using :

131866-image.png


0 Votes 0 ·
image.png (6.1 KiB)
image.png (56.7 KiB)