Azure Video Analyzer Player

This repo contains two parts:

1. A Shaka RTSP plugin based on media-stream-library-js which allows shaka-player to play media from an RTSP server.
2. The AVA Player Abstraction which sits between shaka-player and higher level controls such as @azure/video-analyzer-widgets. This layer provides timestamp conversion services, helps to switch between live and archived video, etc.

Installation

To consume this package in your project, install NPM, then:

npm install @azure/video-analyzer-player

Or if using yarn:

yarn add @azure/video-analyzer-player

Installing

This project uses yarn, so please install that. To produce the output files in the dist/ directory:

yarn
yarn lint
yarn build

This player comes with two sample player webpages. To launch an http-server to serve the sample page:

yarn examples

Let's say that this says that the web address is http://127.0.0.1:8080 (which is equivalent to localhost):

1. Basic RTSP Player: browse to http://localhost:8080/examples/browser/camera/simple-shaka.html.
2. Video Analyzer Player: browse to http://localhost:8080/examples/browser/avaplayer/index.html

You can browse to those addresses the normal way. If you use Visual Studio Code, you can edit the "url" in launch.json, install Debugger for Microsoft Edge, and just hit F5 to launch and/or start debugging.

Playback Against Azure Video Analyzer Endpoint

Follow the instructions (elsewhere) for setting up an Azure Video Analytics (AVA) live pipeline. In the process of following these instructions, you may have been given a *.http file from which you can execute REST API calls using something like REST Client by Huachao Mao. You may also have written your own code to call the AVA REST APIs.

Once the live pipeline is running, you will need to execute the following REST API calls prior to initiating playback:

1. getVideo to get a wss:// URL for the AVA Endpoint.
2. getPlaybackAuthorization to get a playback authorization token (JWT) which can be used for the next hour to initiate playback from the AVA Endpoint.

Alternatively, if you use a trusted JWT decoder (you can decide for yourself if you trust jwt.io), then you can just call getPlaybackAuthorization. Once decoded, you can see the wss:// URL.

Basic RTSP Player

1. Browse to the Basic RTSP Player as described above, and fill out the Websocket URL and Auth Token fields (leave the RTSP URL field alone, its placeholder will be ignored). Uncheck the "Authorize Axis Camera" checkbox. Click the Play button.

Video Analyzer Player

1. Browse to the Video Analyzer Player as described above, and fill out the Websocket URL and Auth Token fields. You may choose either Query or Header as Authetication type, both currently work. Click the Play RTSP button.

Playback Against Axis Camera

Only the Basic RTSP Player can be used for playback against an Axis Camera.

1. If your Axis camera does not have this IP address, edit simple-shaka.html to replace all instances of 192.168.8.174 with the IP address of your Axis camera.
2. Browse to the Basic RTSP Player as described above.
3. Click on the Play button. If needed, you will be prompted for the username and password to connect to the Axis camera.

Deployment

Either bundle shaka_rtsp.min.js within your project, or deploy alongside. Then, bundle or deploy the dependencies of this project:

1. shaka-player (dist/shaka-player.ui.js or shaka-player.ui.debug.js).

Contributing

Make sure that the following commands can be run successfully after your contribution and produce no diffs (any updates to package.json which produce yarn.lock updates should have included yarn.lock in the commit).

yarn
yarn lint
yarn build

Also: yarn examples, confirm that BOTH players can successfully play RTSP video.

License

This project is licensed under the MIT License - see the LICENSE file for details