Use the Azure Video Analyzer player widget
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>
List video resources
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.