Use the Video Analyzer player widget - Azure Video Analyzer

發行項
11/12/2021

Note

Azure Video Analyzer has been retired and is no longer available.

Azure Video Analyzer for Media is not affected by this retirement. It is now rebranded to Azure Video Indexer. Click here to read more.

In this tutorial, you learn how to use a player widget within your application. This code is an easy-to-embed widget that allows your users to play video and browse through the portions of a segmented video file. To do this, you'll be generating a static HTML page with the widget embedded, and all the pieces to make it work.

In this tutorial, you will:

Create a page with the player
List videos
Pass a streaming endpoint and a token to the player
Add a Zone Drawer player
View videos clipped to specified start and end times

Prerequisites

The following are required for this tutorial:

An Azure account that has an active subscription. Create an account for free if you don't already have one.
Visual Studio Code or another editor for the HTML file.
Run topologies from either Continuous video recording and playback or Quickstart: Detect motion in a (simulated) live video, record the video on edge devices
Create a token
Create an access policy

Create a web page with a video player

Use the below sample code to create a web page.

<html>
<head>
<title>Video Analyzer Player Widget Demo</title>
</head>
<script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets"></script>
<body>
Client API endpoint URL: <input type="text" id="clientApiEndpointUrl" /><br><br>
JWT Auth Token for Client API: <input type="text" id="token" /><br><br>
<button type="submit" onclick="getVideos()">Get Videos</button><br><br>
<textarea rows="20" cols="100" id="videoList"></textarea><br><br>
Video name: <input type="text" id="videoName" /><br><br>
<button type="submit" onclick="playVideo()">Play Video</button><br><br>
</body>
</body>
</html>

Next, generate a list of video resources. You make a REST call to the account endpoint you used earlier, and you authenticate with the token you generated.

There are many ways to send a GET request to a REST API, but for this you're going to use a JavaScript function. The following code uses XMLHttpRequest, coupled with values you're storing in the clientApiEndpointUrl and token fields on the page to send a synchronous GET request. It then takes the resulting list of videos and stores them in the videoList text area you have set up on the page.

The following code snippet will help in requesting the video list.

function getVideos()
{
    var xhttp = new XMLHttpRequest();
    var getUrl = document.getElementById("clientApiEndpointUrl").value + "/videos?api-version=2021-05-01-preview";
    xhttp.open("GET", getUrl, false);
    xhttp.setRequestHeader("Authorization", "Bearer " + document.getElementById("token").value);
    xhttp.send();
    document.getElementById("videoList").value = xhttp.responseText.toString();
}

Note

The clientApiEndPoint and token are collected from creating a token

Add the Video Analyzer player component

Now that you have a client API endpoint URL, a token, and a video name, you can add the player to the page.

Include the player module itself by adding the package directly to your page. You can either include the NPM package direction in your application, or have it embed dynamically at runtime, as in the following:
```
<script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets"></script>
```

Add an AVA-Player element to the document:

<ava-player width="720px" id="avaPlayer"></ava-player>

Get a link to the Video Analyzer player widget that is in the page:
```
const avaPlayer = document.getElementById("videoPlayer");
```

To configure the player with the values that you have, you will need to set them up as an object, as shown here:

avaPlayer.configure( {
   token: document.getElementById("token").value,
   clientApiEndpointUrl: document.getElementById("clientApiEndpointUrl").value,
   videoName: document.getElementById("videoName").value
} );

Load the video into the player to begin:
```
avaPlayer.load();
```

Add the Zone Drawer component

The Zone Drawer component allows you to draw lines and polygons on top of the Video Analyzer player.

Add an AVA-Zone-Drawer element to the document:

<ava-zone-drawer width="720px" id="zoneDrawer">
     <ava-player id="videoPlayer2"></ava-player>
</ava-zone-drawer>

Get a link to the Video Analyzer player widget that will play inside the zone drawer:
```
const avaPlayer2 = document.getElementById("videoPlayer2");
```

Configure the player that will play inside the zone drawer:

avaPlayer2.configure( {
   token: document.getElementById("token").value,
   clientApiEndpointUrl: document.getElementById("clientApiEndpointUrl").value,
   videoName: document.getElementById("videoName").value
} );

Load the video into the player inside the zone drawer:
```
avaPlayer2.load();
```

Get a link to the zone drawer that is in the page:

const zoneDrawer = document.getElementById("zoneDrawer");

Load the zone drawer into the player:
```
zoneDrawer.load();
```
Configure the zone drawer:
```
zoneDrawer.configure();
```

To create and save zones, you have to add event listeners here:

zoneDrawer.addEventListener('ZONE_DRAWER_ADDED_ZONE', (event) => {
         console.log(event);
         document.getElementById("zoneList").value = JSON.stringify(event.detail);
     });

     zoneDrawer.addEventListener('ZONE_DRAWER_SAVE', (event) => {
         console.log(event);
         document.getElementById("zoneList").value = JSON.stringify(event.detail);
     });

Put it all together

Combining the preceding web elements, you get the following static HTML page. This page allows you to use an account endpoint and token to view a video.

<html>
<head>
<title>Video Analyzer Player Widget Demo</title>
</head>
<script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets"></script>
<body>
<script>
    function getVideos()
    {
        var xhttp = new XMLHttpRequest();
        var getUrl = document.getElementById("clientApiEndpointUrl").value + "/videos?api-version=2021-05-01-preview";
        xhttp.open("GET", getUrl, false);
        xhttp.setRequestHeader("Authorization", "Bearer " + document.getElementById("token").value);
        xhttp.send();
        document.getElementById("videoList").value = xhttp.responseText.toString();
    }
    function playVideo() {
        const avaPlayer = document.getElementById("videoPlayer");
        avaPlayer.configure( {
            token: document.getElementById("token").value,
            clientApiEndpointUrl: document.getElementById("clientApiEndpointUrl").value,
            videoName: document.getElementById("videoName").value
        } );
        avaPlayer.load();
		
		const avaPlayer2 = document.getElementById("videoPlayer2");
        avaPlayer2.configure( {
            token: document.getElementById("token").value,
            clientApiEndpointUrl: document.getElementById("clientApiEndpointUrl").value,
            videoName: document.getElementById("videoName").value
        } );
        avaPlayer2.load();
    
        const zoneDrawer = document.getElementById("zoneDrawer");
        zoneDrawer.load();
        zoneDrawer.configure();

        zoneDrawer.addEventListener('ZONE_DRAWER_ADDED_ZONE', (event) => {
            console.log(event);
            document.getElementById("zoneList").value = JSON.stringify(event.detail);
        });

        zoneDrawer.addEventListener('ZONE_DRAWER_SAVE', (event) => {
            console.log(event);
            document.getElementById("zoneList").value = JSON.stringify(event.detail);
        });
    }
</script>
Client API endpoint URL: <input type="text" id="clientApiEndpointUrl" /><br><br>
JWT Auth Token for Client API: <input type="text" id="token" /><br><br>
<button type="submit" onclick="getVideos()">Get Videos</button><br><br>
<textarea rows="20" cols="100" id="videoList"></textarea><br><br>
<button type="submit" onclick="playVideo()">Play Video</button><br><br>
Video name: <input type="text" id="videoName" /><br><br>
<div id="container" style="width:720px" class="widget-container">
    <ava-player width="720px" id="videoPlayer"></ava-player>
</div>
<textarea rows="5" cols="100" id="zoneList"></textarea><br><br>
<ava-zone-drawer width="720px" id="zoneDrawer">
    <ava-player id="videoPlayer2"></ava-player>
</ava-zone-drawer>
</body>
</html>

Host the page

You can test this page locally, but you might want to test a hosted version. In case you don't have a quick way to host a page, here are instructions on how to do so by using static websites with Azure Storage. The following steps are a condensed version of these more complete instructions. The steps are updated for the files you're using in this tutorial.

Create a storage account.
Under Data management, select Static website.
Enable the static website on the storage account.
For Index document name, enter index.html.
For Error document path, enter 404.html.
Select Save.
Note the Primary endpoint that shows up. This will be your website.
Above Primary endpoint, select $web.
By using the Upload button at the top, upload your static HTML page as index.html.`

Play a video

Now that you have the page hosted, go there and go through the steps to play a video.

Enter the Client API endpoint URL and Token values.
Select Get videos.
From the video list, select a video name, and enter it into the Video name field.
Select Play video.

Live Video Playback

If your livePipeline is in an activated state and the video is being recorded, then the player automatically loads the LIVE view. This video playback is near real-time and will have a short latency of about 2 seconds.

In the LIVE view, you will:

See the video playback in near real-time.
Not see the timeline.
Clicking on the Box icon will display the bounding boxes, if they exist.

Tip

To switch to the view where you can view all the previously recorded clips, click on the LIVE button.

Capture Lines and Zones

Navigate to the Zone Drawer player
Click on the first icon on the top-left corner to draw zones.
In order to draw zones and lines, you just need to click on the points where you want to have the end points. There is no dragging functionality to draw the zones and lines.
You will see the zones and lines created in the right section of the player.
To get the coordinates of the lines and zones, click on the Save button.
Doing so, will show the JSON response with the point coordinates, which you can use the appropriate topologies.

Video Clips

Enables you to create video clips by selecting a start and end time.

The Video Analyzer video player widget supports playing video clips by specifying a start and end date time as shown below:

Note

The Video Analyzer video player widget uses UTC time standard, therefore the selected start and end time needs to be converted to this format.

Use the below code in your HTML file to open a video player that will load a video from the startTime and the endTime you will specify.

    const avaPlayer = document.getElementById("videoPlayer");
    const startUTCDate = new Date(Date.UTC(selectedClip.start.getFullYear(), selectedClip.start.getMonth(), selectedClip.start.getDate(), selectedClip.start.getHours(), selectedClip.start.getMinutes(), selectedClip.start.getSeconds()));
    const endUTCDate = new Date(Date.UTC(selectedClip.end.getFullYear(), selectedClip.end.getMonth(), selectedClip.end.getDate(), selectedClip.end.getHours(), selectedClip.end.getMinutes(), selectedClip.end.getSeconds()));
    avaPlayer.load({ startTime: startUTCDate, endTime: endUTCDate });

Additional details

The following sections contain some important additional details to be aware of.

Refresh the access token

The player uses the access token that you generated earlier to get a playback authorization token. Tokens expire periodically and need to be refreshed. There are two ways to refresh the access token for the player after you've generated a new one:

Actively calling the widget method setAccessToken.

avaPlayer.setAccessToken('<NEW-ACCESS-TOKEN>');

Acting upon the TOKEN_EXPIRED event by listening to this event.

avaPlayer.addEventListener(PlayerEvents.TOKEN_EXPIRED, () => {
    avaPlayer.setAccessToken('<YOUR-NEW-TOKEN>');
});

The TOKEN_EXPIRED event will occur 5 seconds before the token is going to expire. If you're setting an event listener, you should do so before calling the load function on the player widget.

Configuration details

The preceding player has a simple configuration, but you can use a wider range of options for configuration values. The following are the supported fields:

Name	Type	Description
`token`	string	Your JWT token for the widget
`videoName`	string	The name of the video resource
`clientApiEndpointUrl`	string	The endpoint URL for the client API

Alternate ways to load the code into your application

The package used to get the code into your application is an NPM package. In the preceding example, the latest version was loaded at runtime directly from the repository. But you can also download and install the package locally by using the following:

npm install @azure/video-analyzer/widgets

Or you can import it within your application code by using this for TypeScript:

import { Player } from '@azure/video-analyzer-widgets';
import { ZoneDrawer } from '@azure/video-analyzer-widgets';

If you want to create a player widget dynamically, you can use this for JavaScript:

<script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets@latest/dist/global.min.js"></script>

If you use this method to import, you will need to create the zone drawer and player objects programmatically after the import is complete. In the preceding example, you added the module to the page using the ava-player HTML tag. To create a zone drawer object and a player object through code, you can do the following in JavaScript:

const zoneDrawer = new window.ava.widgets.zoneDrawer();
document.firstElementChild.appendChild(zoneDrawer);
const playerWidget = new window.ava.widgets.player();
zoneDrawer.appendChild(playerWidget);

Or, in TypeScript:

const avaPlayer = new Player();
const zoneDrawer = new ZoneDrawer();

Then you must add it to the HTML:

document.firstElementChild.appendChild(zoneDrawer);
zoneDrawer.appendChild(playerWidget);

Next steps

Try out our sample playback using widgets.
Learn about how the different widget features can be implemented by visiting our widgets repository.

Use the Azure Video Analyzer player widget

Prerequisites

Create a web page with a video player

Add the Video Analyzer player component

Add the Zone Drawer component

Put it all together

Host the page

Play a video

Live Video Playback

Capture Lines and Zones

Video Clips

Additional details

Refresh the access token

Configuration details

Alternate ways to load the code into your application

Next steps

其他資源

Use the Azure Video Analyzer player widget

Prerequisites

Create a web page with a video player

List video resources

Add the Video Analyzer player component

Add the Zone Drawer component

Put it all together

Host the page

Play a video

Live Video Playback

Capture Lines and Zones

Video Clips

Additional details

Refresh the access token

Configuration details

Alternate ways to load the code into your application

Next steps

其他資源