Usar o widget do player do Analisador de Vídeo do Azure

Neste tutorial, você aprenderá como usar um widget do player em seu aplicativo. Esse código é um widget de fácil inserção que permite que os usuários finais reproduzam vídeo e naveguem pelas partes de um arquivo de vídeo segmentado. Para fazer isso, você gerará uma página HTML estática com o widget inserido e todas as partes para fazê-lo funcionar.

Neste tutorial, você irá:

  • Criar um token
  • Listar vídeos
  • Obter a URL base para reproduzir um recurso de aplicativo de vídeo
  • Criar uma página com o player
  • Passar um ponto de extremidade de streaming e um token para o player

Pré-requisitos

Para acompanhar este tutorial, você precisará do seguinte:

Também convém estar familiarizado com os seguintes recursos:

Criar um token

Nesta seção, você cria um JWT (Token Web JSON) que será usado posteriormente neste artigo. Você usará um aplicativo de exemplo que gerará o token JWT e fornecerá todos os campos necessários para criar a política de acesso.

Observação

Se você sabe como gerar um token JWT com base em um certificado RSA ou ECC, pode pular esta seção.

  1. Clonar o repositório de exemplos do AVA em C#. Em seguida, vá para a pasta src/jwt-token-issuer e encontre o aplicativo JWTTokenIssuer.

    Observação

    Para obter mais informações sobre como configurar seus valores de público, confira Políticas de acesso.

  2. Abra o Visual Studio Code e vá para a pasta em que você baixou o aplicativo JWTTokenIssuer. Essa pasta deve conter o arquivo *.csproj.

  3. No painel do Explorer, navegue até o arquivo program.cs.

  4. Na linha 77, mude o público para o ponto de extremidade do Analisador de Vídeo do Azure, seguido por /videos/*. Ela será semelhante ao seguinte:

    https://{Azure Video Analyzer Account ID}.api.{Azure Long Region Code}.videoanalyzer.azure.net/videos/*
    

    Observação

    Você pode encontrar o ponto de extremidade do Analisador de Vídeo na seção visão geral do recurso Analisador de Vídeo no portal do Azure. Esse valor é referido como clientApiEndpointUrl em Listar recursos de vídeo, posteriormente neste artigo.

    Captura de tela mostrando o ponto de extremidade do widget do player.

  5. Na linha 78, altere o emissor para o valor do seu certificado (por exemplo, https://contoso.com).

  6. Salve o arquivo. Pode ser exibida a mensagem Ativos necessários para compilar e depurar estão ausentes do "emissor do token jwt". Adicionar? Selecione Sim.

    Captura de tela mostrando o prompt do ativo necessário no Visual Studio Code.

  7. Abra a janela do prompt de comando e vá para a pasta com os arquivos JWTTokenIssuer. Execute estes dois comandos: dotnet build, seguido por dotnet run. Se você tiver a extensão C# no Visual Studio Code, também poderá selecionar F5 para executar o aplicativo JWTTokenIssuer.

O aplicativo é compilado e executado. Após a compilação, ele cria um certificado autoassinado e gera as informações do token JWT desse certificado. Você também pode executar o arquivo JWTTokenIssuer.exe localizado na pasta de depuração do diretório de onde o JWTTokenIssuer foi criado. A vantagem de executar o aplicativo é que você pode especificar opções de entrada da seguinte forma:

  • JwtTokenIssuer [--audience=<audience>] [--issuer=<issuer>] [--expiration=<expiration>] [--certificatePath=<filepath> --certificatePassword=<password>]

O JWTTokenIssuer cria o JWT e os seguintes componentes necessários:

  • Issuer, Audience, Key Type, Algorithm, Key Id, RSA Key Modulus, RSA Key Exponent, Token

Copie e salve esses valores para uso posterior.

Crie uma política de acesso

As políticas de acesso definem as permissões e a duração do acesso a um fluxo de vídeo específico. Para este tutorial, configure uma política de acesso para o Analisador de Vídeo no portal do Azure.

  1. Entre no portal do Azure e vá para o grupo de recursos onde sua conta do Analisador de Vídeo está localizada.

  2. Selecione o recurso Analisador de Vídeo.

  3. No Analisador de Vídeo, selecione Políticas de acesso.

    Captura de tela mostrando a opção Políticas de acesso.

  4. Selecione Novo e insira as seguintes informações:

    • Nome da política de acesso: você pode escolher o nome que quiser.

    • Emissor: este valor deve corresponder ao emissor JWT.

    • Público: o público do JWT. ${System.Runtime.BaseResourceUrlPattern} é o padrão. Para saber mais sobre o público e ${System.Runtime.BaseResourceUrlPattern}, confira Políticas de acesso.

    • Tipo de chave: RSA

    • Algoritmo: os valores com suporte são RS256, RS384 e RS512.

    • ID da chave: esta ID é gerada com base no seu certificado. Para obter mais informações, confira Criar um token.

    • Módulo de chave RSA: este valor é gerado com base no seu certificado. Para obter mais informações, confira Criar um token.

    • Expoente da chave RSA: este valor é gerado com base no seu certificado. Para obter mais informações, confira Criar um token.

    Captura de tela mostrando o portal de políticas de acesso.

    Observação

    Esses valores são provenientes do aplicativo JWTTokenIssuer criado na etapa anterior.

  5. Selecione Salvar.

Listar recursos de vídeo

Em seguida, gere uma lista de recursos de vídeo. Você faz uma chamada REST para o ponto de extremidade da conta usado anteriormente e autentica com o token gerado.

Há várias maneiras de enviar uma solicitação GET para uma API REST, mas, para isso, vamos usar uma função JavaScript. O código a seguir usa XMLHttpRequest, juntamente com os valores que você está armazenando nos campos clientApiEndpointUrl e token na página para enviar uma solicitação GET síncrona. Em seguida, ele pega a lista resultante de vídeos e os armazena na área de texto videoList configurada na página.

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

Observação

O clientApiEndPoint e o token são coletados de Criar um token.

Adicionar o componente de player do Analisador de Vídeo

Agora que você tem uma URL de ponto de extremidade API do cliente, um token e um nome de vídeo, você pode adicionar o player à página.

  1. Inclua o próprio módulo do player adicionando o pacote diretamente à sua página. Você pode incluir a direção do pacote NPM em seu aplicativo ou inseri-lo dinamicamente no runtime, como mostrado abaixo:
    <script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets"></script>
    
  2. Adicionar um elemento AVA-Player ao documento:
    <ava-player width="720px" id="avaPlayer"></ava-player>
    
  3. Obtenha um link para o widget do player do Analisador de Vídeo que está na página:
    const avaPlayer = document.getElementById("avaPlayer");
    
  4. Para configurar o player com os valores que você tem, você precisará configurá-lo como um objeto, conforme mostrado aqui:
    avaPlayer.configure( {
       token: document.getElementById("token").value,
       clientApiEndpointUrl: document.getElementById("clientApiEndpointUrl").value,
       videoName: document.getElementById("videoName").value
    } );
    
  5. Carregar o vídeo no player para começar.
    avaPlayer.load();
    

Colocar tudo isso junto

Combinando os elementos da Web anteriores, você obtém a página HTML estática a seguir. Essa página permite que você use um ponto de extremidade de conta e um token para exibir um vídeo.

<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("avaPlayer");
        avaPlayer.configure( {
            token: document.getElementById("token").value,
            clientApiEndpointUrl: document.getElementById("clientApiEndpointUrl").value,
            videoName: document.getElementById("videoName").value
        } );
        avaPlayer.load();
    }
</script>
Client API endpoint URL: <input type="text" id="clientApiEndpointUrl" /><br><br>
Token: <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>
<ava-player width="720px" id="avaPlayer"></ava-player>
</body>
</html>

Hospedar a página

Você pode testar essa página localmente, mas convém testar uma versão hospedada. Caso você não tenha uma maneira rápida de hospedar uma página, confira abaixo as instruções de como fazer isso usando sites estáticos com o Armazenamento do Azure. As etapas a seguir são uma versão condensada destas instruções mais completas. As etapas são atualizadas para os arquivos que você está usando neste tutorial.

  1. Criar uma conta de armazenamento.
  2. Em Gerenciamento de dados, selecione Site estático.
  3. Habilite o site estático na conta de armazenamento.
  4. Em Nome do documento de índice, insira index.html.
  5. Em Caminho do documento de erro, insira 404.html.
  6. Selecione Salvar.
  7. Anote o Ponto de extremidade primário mostrado. Esse será seu site.
  8. Sobre o Ponto de extremidade primário, selecione $web.
  9. Usando o botão Carregar na parte superior, carregue sua página HTML estática como index.html.

Reproduzir o vídeo

Agora que você hospedou a página, vá até ela e siga as etapas para reproduzir um vídeo.

  1. Insira a URL do ponto de extremidade da API do cliente e os valores de Token.
  2. Selecione Obter vídeos.
  3. Na lista de vídeos, selecione um nome de vídeo e insira-o no campo Nome do vídeo.
  4. Selecione Reproduzir vídeo.

Detalhes adicionais

As seções a seguir contêm alguns detalhes adicionais importantes a serem considerados.

Atualizar o token de acesso

O player usa o token de acesso gerado anteriormente para obter um token de autorização de reprodução. Os tokens expiram periodicamente e, portanto, precisam ser atualizados. Depois de gerar um novo player, há duas maneiras de atualizar o token de acesso dele:

  • Chamando ativamente o método widget setAccessToken.
    avaPlayer.setAccessToken('<NEW-ACCESS-TOKEN>');
    
  • Executando ações no evento TOKEN_EXPIRED, como ouvindo ao evento.
    avaPlayer.addEventListener(PlayerEvents.TOKEN_EXPIRED, () => {
        avaPlayer.setAccessToken('<YOUR-NEW-TOKEN>');
    });
    

O evento TOKEN_EXPIRED 5 segundos antes que o token expire. Se estiver configurando um ouvinte de eventos, você deverá fazê-lo antes de chamar a função load no widget do player.

Detalhes da configuração

O player anterior tem uma configuração simples, mas você pode usar uma variedade maior de opções para valores de configuração. Confira os campos com suporte:

Nome Tipo Description
token string Seu token JWT para o widget
videoName string O nome do recurso de vídeo
clientApiEndpointUrl string A URL do ponto de extremidade para a API do cliente

Maneiras alternativas de carregar o código em seu aplicativo

O pacote usado para obter o código em seu aplicativo é um pacote NPM. No exemplo anterior, a versão mais recente foi carregada em runtime diretamente do repositório. Mas você também pode baixar e instalar o pacote localmente usando o seguinte:

npm install @azure/video-analyzer/widgets

Ou você pode importá-lo dentro de seu código de aplicativo usando-o para TypeScript:

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

Para criar dinamicamente um widget de player, você pode usá-lo para JavaScript:

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

Se você usar esse método para importar, precisará criar o objeto do player programaticamente, após a conclusão da importação. No exemplo anterior, você adicionou o módulo à página usando a marca HTML ava-player. Para criar um objeto de player por meio de código, você pode fazer o seguinte no JavaScript:

const avaPlayer = new ava.widgets.player();

Ou no TypeScript:

const avaPlayer = new Player();

Em seguida, você deve adicioná-lo ao HTML:

document.firstElementChild.appendChild(avaPlayer);

Próximas etapas