Configurar um cliente básico do Windows

Este tutorial irá guiá-lo pelas etapas de configuração de um cliente básico do Windows que utiliza a Video API da Vonage.

Visão geral

Todas as aplicações que utilizam a Video API da Vonage exigem tanto um cliente e um servidor componente. O código do lado do cliente é o que é carregado no aplicativo do Windows do usuário final e lida com a maior parte das funcionalidades do OpenTok, incluindo conectando para o sessão, publicação áudio e vídeo correntes para a sessão, e assinando para os fluxos de outros clientes. Para obter mais informações sobre clientes, servidores e sessões, consulte Noções básicas do OpenTok.

Neste tutorial, você utilizará o SDK do OpenTok para Windows, a biblioteca do lado do cliente da OpenTok para Windows, para criar de forma rápida e fácil um aplicativo de vídeo interativo em tempo real.

Aqui estão os tópicos que serão abordados neste tutorial:

Tempo estimado de conclusão: 25 minutos

Quer pular este tutorial? Você pode acessar o código completo do cliente do Windows no Bate-papo por vídeo básico pasta da nossa Repositório de aplicativos de exemplo do Windows no GitHub. O repositório inclui um arquivo README com documentação sobre como executar e explorar o código.

Requisitos

Para concluir este tutorial, você precisará de:

Etapa 1: Criação de um novo projeto

  1. Abra o Visual Studio e selecione Novo > Projeto do Arquivo menu.
  2. No Novo projeto na caixa de diálogo, selecione Windows > Aplicativo WPF (Visual C#), digite um nome para o aplicativo e, em seguida, clique no botão OK botão.

Etapa 2: Adicionando o SDK do OpenTok para Windows

Use o NuGet para instalar o SDK do OpenTok para Windows, utilizando um dos métodos a seguir:

  • No Visual Studio, a partir do Ferramentas selecionar menu Gerenciador de Pacotes NuGet > Gerenciar pacotes do NuGet para a solução, e depois procure por OpenTok.Client. Adicione o pacote OpenTok.Client ao projeto que você está desenvolvendo.

  • No Console do Gerenciador de Pacotes do Visual Studio, digite o seguinte comando:

    Install-Package OpenTok.Client

  • Use as ferramentas de linha de comando do .NET Core para instalar o pacote OpenTok. Execute o seguinte comando a partir do diretório do seu projeto:

    dotnet add package OpenTok.Client

Adicione as classes do OpenTok para Windows ao aplicativo — no Visual Studio, abra o MainWindow.xaml.cs arquivo. E adicione as seguintes instruções:

using OpenTok;

Isso importa as classes do SDK do OpenTok para Windows que o aplicativo utilizará.

Etapa 3: Configuração da autenticação

Para se conectar a uma sessão do OpenTok, o cliente precisará ter acesso a algumas credenciais de autenticação — um Chave de API, ID da sessão, e token. Em um aplicativo de produção, essas credenciais devem ser geradas por um servidor, mas, para agilizar o processo, vamos simplesmente definir os valores manualmente por enquanto:

  1. Na classe MainWindow, adicione algumas variáveis estáticas para armazenar a chave da API, o ID da sessão e o token. Também adicionaremos algumas constantes para o identificador da mensagem de log e as permissões:

    public partial class MainWindow : Window { public const string API_KEY = ""; public const string SESSION_ID = ""; public const string TOKEN = "";

  2. Ajuste o código definindo os valores de forma estática para o API_KEY, SESSION_ID e TOKEN.

    Para fazer isso, faça login na sua Account da Video API, crie um novo projeto da API do OpenTok ou use um projeto existente da API do OpenTok; em seguida, acesse a página do seu projeto e role a tela para baixo até a Ferramentas do projeto seção. A partir daí, você pode gerar manualmente um ID de sessão e um token. Use a chave de API do projeto juntamente com o ID de sessão e o token que você gerou.

Importante: Você pode continuar obtendo os valores do ID da sessão e do token da sua Account durante os testes e o desenvolvimento, mas, antes de entrar em produção, é necessário configurar um servidor. Abordaremos esse assunto em Próximos passos no final deste tutorial.

Para obter mais informações sobre sessões, tokens e servidores, consulte Noções básicas sobre a Video API.

Etapa 4: Conectando-se à sessão

A seguir, vamos nos conectar à sessão do OpenTok. É necessário fazer isso antes de poder publicar seu fluxo de áudio e vídeo na sessão ou visualizar os fluxos dos outros participantes.

  1. Adicione um Session variável de membro na classe MainWindow (logo após a última linha que você adicionou em Etapa 3):

    Session Session;

    A classe Session está definida no SDK do OpenTok para Windows. Ela representa uma sessão do OpenTok e inclui métodos para interagir com a sessão.

  2. No MainWindow() função construtora, adicione as seguintes linhas, após o InitializeComponent() método:

    Session = new Session(Context.Instance, API_KEY, SESSION_ID); Session.Connected += Session_Connected; Session.Disconnected += Session_Disconnected; Session.Error += Session_Error; Session.StreamReceived += Session_StreamReceived; Session.Connect(TOKEN);

    Este código utiliza o Session() construtor para instanciar um objeto Session. O construtor recebe três parâmetros:

    • O contexto do Windows associado a este aplicativo
    • O ID da sessão do OpenTok
    • O token

    As próximas linhas adicionam manipuladores de eventos para eventos relacionados à sessão. (Vamos implementá-los nas próximas etapas).

    O Session.Connect() método do session O objeto conecta o aplicativo cliente à sessão do OpenTok. É necessário estabelecer a conexão antes de enviar ou receber fluxos de áudio e vídeo na sessão (ou antes de interagir com a sessão de qualquer forma). O Connect() O método recebe um parâmetro: o token de autenticação para que este cliente se conecte à sessão do OpenTok.

  3. A seguir, vamos implementar os métodos da interface SessionListener. Adicione o código a seguir ao final da classe MainWindow (antes do colchete de fechamento da classe):

    private void Session_Connected(object sender, EventArgs e) { Console.WriteLine("Connected to session."); } private void Session_Disconnected(object sender, EventArgs e) { Console.WriteLine("Disconnected from session."); } private void Session_Error(object sender, Session.ErrorEventArgs e) { Console.WriteLine("Session error:" + e.ErrorCode); } private void Session_StreamReceived(object sender, Session.StreamEventArgs e) { Console.WriteLine("Stream received in session."); }

    • Quando o cliente se conecta à sessão do OpenTok, o Session.Connected o evento é disparado (e o Session_Connected() (o manipulador de eventos é chamado).

    • Quando o cliente se desconecta da sessão do OpenTok, o Session.Disconnected o evento é enviado (e o Session_Disconnected() (o método é chamado).

    • Se o cliente não conseguir se conectar à sessão do OpenTok, o Session.Error o evento é enviado (e o Session_Error() (o método é chamado).

    • Quando outro cliente publica um stream na sessão do OpenTok, o Session.StreamReceived o evento é disparado (e o Session_StreamReceived() (o manipulador de eventos é chamado).

    Por enquanto, o aplicativo exibe mensagens no console do depurador sempre que algum desses eventos ocorre.

Faça a depuração do seu aplicativo. Se o aplicativo se conectar com sucesso à sessão do OpenTok, o Session_Connected() O método registra mensagens no console de depuração.

Etapa 5: Ajustando a interface do usuário do aplicativo de exemplo

Por padrão, o SDK do OpenTok para Windows exibe os vídeos que você publica e dos quais se inscreve por meio da classe VideoRenderer (definida no SDK do OpenTok para Windows). Essa classe exibe os vídeos em um controle do Windows Presentation Framework.

Para este aplicativo de exemplo, defina os controles de destino no arquivo MainWindow.xaml do aplicativo. No Visual Studio, abra esse arquivo e edite seu código XML para adicionar uma referência ao OpenTok namespace e adicionar dois VideoRenderer objetos na página principal Grid controle do aplicativo:

<Window x:Class="BasicVideoChat.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:BasicVideoChat" xmlns:OpenTok="clr-namespace:OpenTok;assembly=WPFVideoRenderer" mc:Ignorable="d" Title="MainWindow" Height="960" Width="640"> <Grid> <OpenTok:VideoRenderer x:Name="PublisherVideo" HorizontalAlignment="Center" Height="480" VerticalAlignment="Top" Width="640"> </OpenTok:VideoRenderer> <OpenTok:VideoRenderer x:Name="SubscriberVideo" HorizontalAlignment="Center" Height="480" VerticalAlignment="Bottom" Width="640"> </OpenTok:VideoRenderer> </Grid> </Window>

Etapa 6: Publicação de um fluxo na sessão

Quando o aplicativo se conectar à sessão do OpenTok, queremos que ele transmita um fluxo de áudio e vídeo para a sessão, usando a câmera e o microfone:

  1. Adicione um Publisher variável de membro na classe MainWindow (após a declaração da Session (variável de membro):

    Publisher Publisher;

    A classe Publisher está definida no SDK do OpenTok para Windows.

  2. Modificar o MainWindow() construtor para incluir código que inicialize um capturador de vídeo para o publisher e utilize esse capturador de vídeo em um objeto Publisher:

    Publisher = new Publisher(Context.Instance, renderer: PublisherVideo);

    O código utiliza o Publisher() construtor para instanciar um objeto Publisher. Dois parâmetros são passados ao construtor: o contexto do aplicativo do Windows e o renderizador de vídeo (definido no arquivo MainApplication.xaml).

  3. Modificar o Session_Connected() método para incluir código para publicar um stream na sessão:

    private void Session_Connected(object sender, System.EventArgs e) { Session.Publish(Publisher); }

    Quando o aplicativo se conecta à sessão (e o SessionConnected (quando o evento é disparado) o Session_Connected o manipulador de eventos chama o Session.Publish() método, passando o objeto Publisher. Isso faz com que o aplicativo publique um fluxo de áudio e vídeo na sessão do OpenTok, utilizando o microfone e a câmera do capturador de vídeo como fonte de áudio e fonte de vídeo.

Faça a depuração do seu aplicativo. O aplicativo exibe a pré-visualização local do vídeo do emissor e, quando se conecta com sucesso à sessão do OpenTok, publica um fluxo na sessão.

Observação: Este aplicativo utiliza o capturador de vídeo padrão, que usa a câmera e o microfone padrão do sistema como fonte de vídeo e áudio para a transmissão publicada.É possível implementar capturadores de vídeo e renderizadores de vídeo personalizados criando classes que implementem as interfaces IVideoCapturer e IVideoRenderer, definidas no SDK do OpenTok para Windows. Para obter código de exemplo, consulte as Applications de exemplo CustomVideoRenderer e ScreenSharing no exemplos-do-SDK-de-vídeo-da-Vonage-para-Windows repositório no GitHub.

Etapa 7: Inscrever-se em outros fluxos de clientes

Queremos que os clientes possam inscrever-se para (ou visualizar) as transmissões de outros clientes na sessão:

  • Modificar a implementação do Session_StreamReceived() método para incluir código que permita assinar os fluxos de outros clientes na sessão:

    private void Session_StreamReceived(object sender, Session.StreamEventArgs e) { Subscriber subscriber = new Subscriber(Context.Instance, e.Stream, SubscriberVideo); Session.Subscribe(subscriber); }

Quando outro cliente publica um fluxo em uma sessão, o Session.StreamReceived A mensagem é enviada e esse método é chamado. Um objeto Stream, definido no SDK do OpenTok para Windows, é passado para o manipulador de eventos. Ele representa um fluxo de áudio e vídeo na sessão do OpenTok.

O código inicializa uma instância da classe `Subscriber`, definida no SDK do OpenTok para Windows. A classe `Subscriber` define um objeto que um cliente utiliza para se inscrever (visualizar) em transmissões publicadas por outros clientes.

O Subscriber() O construtor recebe três parâmetros:

  • O contexto do aplicativo do Windows.
  • O objeto Stream.
  • O renderizador do objeto assinante. Neste aplicativo, o renderizador é o SubscriberVideo objeto, definido no arquivo MainWindow.xaml.

Etapa 8: Executando o aplicativo e criando um instalador

Para adicionar um segundo stream à sessão (que aparecerá como um assinante no seu emulador), execute o aplicativo uma segunda vez em outro dispositivo Windows ou use o OpenTok Playground para se conectar à sessão em um navegador compatível, seguindo as etapas abaixo:

  1. Acesse OpenTok Playground (é necessário estar conectado à sua Account)

  2. Selecione o Participar de uma sessão já em andamento aba

  3. Copie o ID da sessão que você usou no arquivo ViewController.m e cole-o em ID da sessão campo de entrada

  4. Clique Participar da sessão

  5. Na próxima tela, clique em Conectar-se, em seguida, clique em Publicar transmissão

  6. Você pode ajustar as opções do Publisher (opcional) e, em seguida, clicar em Continuar para se conectar e começar a publicar e se inscrever

Neste momento, você deve ver a transmissão da sua webcam, bem como a transmissão do emulador. Voltando ao emulador, você também deve ver o novo editor exibido na tela emulada.

Ao criar um instalador para seu aplicativo, adicione o Visual C++ Redistributable para Visual Studio 2015 como um pacote de instalação. Use a versão x86, a versão x64 ou ambas, dependendo da arquitetura do seu aplicativo.

Parabéns! Você concluiu o tutorial “Configurar um cliente básico do Windows”.
Você pode continuar experimentando e ajustando o código que desenvolveu aqui para o lado do cliente do seu aplicativo, mas lembre-se de que precisará implementar o componente de servidor da sua aplicação antes de entrar em produção (consulte Configurando seu servidor (abaixo).

Você pode visualizar uma versão completa deste aplicativo de exemplo no BasicVideoChat pasta do exemplos-do-SDK-de-vídeo-da-Vonage-para-Windows repositório no GitHub. Esta versão finalizada inclui código para carregar o ID da sessão, o token e a chave de API a partir de um serviço web (em vez de usar valores fixos).

Próximos passos

Quando terminar esta seção, continue desenvolvendo e aprimorando seu aplicativo OpenTok com estes recursos úteis:

Configurando seu servidor

No tutorial acima, pedimos que você codificar diretamente suas credenciais de autenticação. No entanto, para um aplicativo de produção, o sessionId e token Os valores no seu código devem ser gerados pelo servidor de aplicativos e repassados ao cliente. Aqui estão algumas razões pelas quais você não deve usar credenciais codificadas diretamente no código-fonte do seu aplicativo de produção:

  • Os tokens expiram após um determinado período (especificado no momento da geração); portanto, é necessário gerar novos tokens regularmente
  • Você não poderá criar novas sessões dinamicamente; portanto, todos os usuários do seu aplicativo ficariam restritos a uma única “sala”

Você pode continuar testando seu aplicativo com valores codificados diretamente, mas, quando estiver pronto para configurar um servidor, há várias maneiras de fazer isso:

Opção 1 do servidor — Inicie um servidor REST simples no Heroku com um clique

Essa é provavelmente a maneira mais rápida de colocar um servidor em funcionamento, mas sua funcionalidade é limitada. Basta clicar no botão do Heroku abaixo; você será redirecionado para o site do Heroku e solicitado a inserir sua chave de API e seu segredo de API do OpenTok — você pode obter esses valores na página do seu projeto em seu Account da Video API. Se você não tiver um Account no Heroku, precisará se cadastrar (é grátis).

Deploy

Quer dar uma olhada no código? O botão acima executa o código do servidor a partir do aprendendo-opentok-php Repositório do GitHub. Acesse o repositório para revisar o código e consultar a documentação adicional — você pode até mesmo criar um fork do repositório e fazer alterações antes da implantação.

Prefere o Node.js? Visite o aprendendo-opentok-node repositório com a mesma funcionalidade usando Node.js (incluindo um botão de implantação no Heroku).

Depois que o servidor estiver implantado no Heroku, você precisará adicionar um código ao seu projeto para obter as credenciais do servidor. O código deve enviar uma solicitação HTTP GET para https://YOURAPPNAME.herokuapp.com/session. O corpo da resposta é um JSON que inclui propriedades que definem a chave da API do OpenTok, o ID da sessão e um token:


{
    "apiKey": "8675309",
    "sessionId": "2_MX20NTMyODc3Mn5...",
    "token": "eyJhbG..."
}

Opção 2 do servidor — Compilar do zero usando os SDKs do servidor

A Opção 1 utiliza endpoints REST para transmitir credenciais ao cliente, mas essa é apenas uma das muitas maneiras de implementar um servidor com o OpenTok. Se você deseja um nível maior de personalização, pode consultar o Documentação do SDK do servidor para a linguagem do lado do servidor de sua escolha (disponível para PHP, Node.js, Java, .NET, Python e Ruby). A documentação aborda o processo de configuração e os diversos métodos necessários para gerar sessões e tokens, além de outras funcionalidades do lado do servidor.