How to use Azure Video Analyzer player in React JS ?

Vishu 21 Reputation points
2021-09-14T06:12:36.567+00:00

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
Azure Media Services
A group of Azure services that includes encoding, format conversion, on-demand streaming, content protection, and live streaming services.
310 questions
0 comments No comments
{count} votes

Accepted answer
  1. Girish Akasapu 91 Reputation points Microsoft Employee
    2021-09-14T08:36:55.233+00:00

    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 additional answer

Sort by: Most helpful
  1. Girish Akasapu 91 Reputation points Microsoft Employee
    2021-09-14T06:43:02.067+00:00

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