Crie um aplicativo web de videoconferência em Python com Flask e Vonage

Neste tutorial, você criará um aplicativo funcional de videoconferência baseado em navegador usando o Flask e a Video API da Vonage.

Introdução

Depois que a pandemia global de 2020 transformou a forma como interagimos, as videoconferências rapidamente se tornaram um dos principais meios de comunicação entre as pessoas em todo o mundo. Seja para se reunir com colegas de trabalho em outro país ou para colocar o papo em dia com amigos em outra cidade, as videoconferências por meio do navegador agora fazem parte do dia a dia.

À medida que a tecnologia amadureceu, as expectativas dos usuários aumentaram. O que antes era complexo agora é simplificado e sofisticado, e espera-se que as soluções modernas de videoconferência ofereçam experiências de alta qualidade, confiáveis e em tempo real.

Neste tutorial, você aprenderá a criar um aplicativo básico de videoconferência usando Python, JavaScript e a Video API da Vonage. Este guia prático orienta você na criação de um aplicativo de vídeo WebRTC simples e apresenta os Concepts fundamentais por trás das videoconferências em Python.

Antes de começarmos a desenvolver o aplicativo, vamos abordar alguns dos termos e tecnologias utilizados no aplicativo de exemplo. Se você já estiver familiarizado com esses Concepts, pode pular diretamente para o tutorial sobre como criar um aplicativo web de videoconferência com o Vonage e Python, ou clonar o aplicativo de exemplo do GitHub e seguir o README para colocá-lo em funcionamento rapidamente.

Uma breve visão geral: Flask e tunelamento

Para concluir este tutorial, vamos recorrer a Concepts técnicos e ferramentas externas à Vonage que podem ser úteis em outras áreas do desenvolvimento de software.

O que é um aplicativo Flask em Python?

Neste tutorial, vamos criar um aplicativo web usando Flask, um framework web leve, porém poderoso, para Python. Como framework, ele permite que os desenvolvedores criem rapidamente um aplicativo de software usando tecnologias web para ser executado em um navegador. Escolhemos o Flask para este tutorial devido à sua facilidade de uso e abordagem minimalista. Ao contrário de outras estruturas de desenvolvimento web em Python, ele nos oferece apenas o essencial de que precisamos para criar uma solução simples de videoconferência.

O que é o tunelamento?

Neste tutorial, vamos criar um aplicativo web e executá-lo localmente no seu computador. Como ele é executado localmente, não é acessível pela internet pública; e, se não for possível acessar seu aplicativo web, você não poderá adicionar participantes à sua videoconferência. É aí que entra o tunelamento. O tunelamento expõe servidores locais à internet pública por meio de URLs públicas temporárias ou estáticas. O ngrok é uma plataforma de software que oferece esse serviço.

Noções básicas sobre a Video API da Vonage

Os usuários esperam que as videochamadas de alta qualidade simplesmente funcionem sem interrupções. Mas, nos bastidores, proporcionar esse tipo de experiência não é tão simples assim.

O video em tempo real é, por natureza, imprevisível. Os participantes se conectam a partir de diferentes dispositivos, em diferentes redes e em diferentes partes do mundo. Além disso, as condições podem mudar no meio da chamada: um dispositivo móvel pode mudar do Wi-Fi para a rede celular, um firewall corporativo pode bloquear certos caminhos UDP ou um laptop de baixo desempenho pode apresentar dificuldades devido à carga na CPU.

A plataforma Vonage Video API permite incorporar vídeo interativo em tempo real e de alta qualidade, mensagens, compartilhamento de tela e muito mais em aplicativos web e móveis. Para isso, a Video API utiliza o WebRTC para comunicações de áudio e vídeo. Ao trabalhar com a Video API, estes são os principais termos e Concepts que devem ser compreendidos: 

• Sessão: Uma sessão é um grupo lógico de conexões e fluxos. As conexões dentro da mesma sessão podem trocar mensagens. Pense em uma sessão como uma “sala virtual” onde os participantes podem interagir entre si.

• Conexão: Um ponto de extremidade que participa de uma sessão e é capaz de enviar e receber mensagens. Uma conexão pode estar conectada e, portanto, capaz de receber mensagens, ou desconectada e, portanto, incapaz de receber mensagens.

• Fluxo: Um fluxo de mídia circula entre duas conexões. Isso se refere aos bytes reais que contêm a mídia que está sendo trocada. A mídia pode consistir apenas em áudio ou em áudio e Video. Você também pode criar fluxos de compartilhamento de tela e fluxos personalizados.

• Token: A plataforma da Video API usa tokens para autorização, então você não precisa se preocupar em criar usuários na plataforma. Neste tutorial, usamos tokens para criar participantes de sessões de vídeo dinamicamente.

• Editor: Refere-se ao cliente que publica um fluxo de mídia.

• Assinante: Refere-se aos clientes que recebem transmissões de mídia.

• Sinalização: Refere-se ao envio de texto e dados entre clientes conectados a uma sessão na forma de mensagens. Essas mensagens permitem que os desenvolvedores criem um chat de texto básico, enviem instruções de um cliente para outro e criem outras experiências valiosas.

Para se aprofundar nesses termos e Concepts-chave, confira o Glossário da Video API ou consulte a documentação da Video API ou assista ao Video abaixo.

Agora que você já entendeu os conceitos básicos, vamos aplicá-los criando um aplicativo de videoconferência que funcione.

Tutorial: Como criar um aplicativo web de videoconferência

Neste tutorial, vamos nos concentrar nos componentes básicos de um aplicativo de videoconferência, incluindo a criação de uma sessão de vídeo, a adição de conexões e o uso de sinalização para bate-papo em tempo real. Vamos usar Python e Flask para o back-end e JavaScript para criar e coordenar a sessão de vídeo.

Pré-requisitos

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

• Python 3.8 ou superior

• A Account da API da Vonage

• Uma Account e instalação do ngrok

• Um amigo para participar de uma videoconferência com você

Configuração do tutorial

Antes de começarmos a construir, vamos colocar tudo em ordem.

1. Criar um aplicativo Vonage Video

Agora você precisa criar um aplicativo da Video API. Neste contexto específico, um aplicativo é um contêiner para as informações de configuração e segurança necessárias para a Video API. Ao criar seu aplicativo, ative a opção Video na seção seção .

2. Criar um túnel ngrok

A Video API precisa ter acesso ao seu webhook para poder enviar solicitações a ele. Portanto, a URL do endpoint deve estar disponível na internet pública. É para isso que serve o ngrok.

Em uma janela separada do terminal, execute:

ngrok http 5000

Este comando irá gerar as URLs públicas para as quais seu servidor local se conectará via túnel na porta 5000. Anote a URL pública – ela deve ter um formato semelhante a este:

Forwarding                	https://0a6ec0a950eb.ngrok-free.app -> http://localhost:5000 

Observe que, a menos que você esteja usando um dos planos pagos do ngrok, as URLs públicas geradas não são persistentes. Em outras palavras, toda vez que você executar o ngrok comando, as URLs resultantes serão alteradas. Para evitar isso, mantenha o ngrok em execução durante todo este tutorial.

Vamos começar a construir!

Agora que você já tem tudo configurado, é hora de começar a construir.

Aqui está uma visão geral das etapas que seguiremos para concluir este tutorial:

1. Criar e ativar um ambiente virtual de Python

2. Instalar dependências

3. Criar um cliente Vonage e definir as rotas para nosso aplicativo web no back-end

4. Criar uma sessão, adicionar conexões a ela e definir como lidar com os sinais de chat no front-end 

5. Execute o código e teste-o

O código deste tutorial pode ser encontrado no GitHub na Comunidade da Vonage , juntamente com um arquivo README para ajudá-lo a colocá-lo em funcionamento.

1. Criar um diretório do projeto

Crie um diretório para o projeto e acesse esse diretório:

mkdir sample-video-conference && cd sample-video-conference

2. Criar e ativar um ambiente virtual de Python

Python Ambientes virtuais permitem que você instale pacotes em um local isolado do restante do seu sistema. Isso ajuda a evitar desorganização em todo o sistema e conflitos entre diferentes versões do Python e pacotes. Saiba mais sobre ambientes virtuais nesta postagem do blog.

No diretório do seu projeto, execute os seguintes comandos para criar um ambiente virtual e ativá-lo:

virtualenv venv && source venv/bin/activate

3. Instale as dependências do projeto

Para instalar as dependências necessárias para este tutorial, execute o seguinte:

pip install Flask python-dotenv vonage

5. Obtenha e configure suas variáveis de ambiente

Variáveis de ambiente (frequentemente chamadas de “variáveis de ambiente”) são variáveis armazenadas fora do seu programa que podem afetar sua execução. Por exemplo, você pode definir variáveis de ambiente que contenham a chave e o segredo de uma API. Seu programa poderá então usar essas variáveis ao se conectar à API. Saiba mais sobre variáveis de ambiente em

Para instanciar um cliente Vonage, você precisará do ID do aplicativo Vonage que criou e da sua chave privada do Vonage.

Você pode encontrar o ID do aplicativo no painel do desenvolvedor, nas configurações do aplicativo de Video que você criou para este tutorial.

É aqui também que você gera e baixa sua chave privada. No painel do desenvolvedor Applications ,, clique no aplicativo que você criou para este tutorial e, em seguida, clique em Editar. Assim que a janela de edição abrir, clique no botão que diz “Gerar chave pública e privada”. Isso iniciará o download da sua chave privada como um arquivo com a extensão .key. Assim que o arquivo for baixado, mova-o para a raiz do diretório do seu projeto.

Mantenha este arquivo em sigilo e não o compartilhe em nenhum lugar onde possa ser comprometido. Se você planeja enviar esse código para algum lugar público, certifique-se de adicionar seu arquivo de chave privada ao seu .gitignore arquivo. 

No diretório raiz, crie um arquivo chamado .env e adicione as seguintes variáveis:

VONAGE_APPLICATION_ID=your-application-id
VONAGE_PRIVATE_KEY_PATH=path-to-your-private-key-file

6. Crie seu backend

O backend deste aplicativo é responsável por instanciar um cliente Vonage, definir as rotas do aplicativo web, iniciar uma sessão de vídeo e gerar tokens para os participantes da videoconferência.

Crie um arquivo chamado appy.py e adicione o código do GitHub.

Embora não seja recomendável implantar esse código em ambiente de produção, ele permite uma experiência prática e rápida com a Video API em ação. Para isso, ele cria um aplicativo web minimalista com duas rotas:

1. A / link leva você a uma página da web que o convida a participar de uma sessão de vídeo. Para publicar uma transmissão de vídeo, você precisa selecionar a opção “Participar como administrador”; para assistir à transmissão, deixe essa opção desmarcada.

2. Após clicar no botão “Participar da sessão”, a /api/generate-session rotina gera um token para cada participante e, dependendo se o participante é um admin ou não, publica ou assina um fluxo.

O código a seguir mostra onde a sessão de Video é iniciada usando o cliente da Vonage:

session_options = SessionOptions(media_mode=MediaMode.ROUTED)
video_session = vonage_client.video.create_session(options=session_options)
session_id = video_session.session_id

Cada sessão é identificada por um ID específico. Esse ID é usado para criar conexões e fluxos entre os participantes. As sessões oferecem diferentes opções, e, para esta sessão em particular, estamos usando o modo de mídia . Para esta sessão específica, estamos usando o modo de mídia roteada , que é mais adequado para um número maior de participantes e também permite o arquivamento. Para saber mais sobre sessões e opções de sessão, consulte a documentação. 

É neste código que o token é criado para cada participante:

token_options = TokenOptions(session_id=session_id)
token = vonage_client.video.generate_client_token(token_options).decode("utf-8")

Para autenticar um usuário que se conecta a uma sessão, o código deve enviar um token juntamente com o ID do aplicativo. Você gera um token para cada usuário que tenta se conectar a uma sessão. Ao gerar um token, é necessário incluir um ID de sessão. Para obter mais informações sobre tokens e opções de token, consulte a documentação.   

O session_id, token, e application_id são passados junto com outros dados para o front-end no código a seguir, a fim de criar o Video incorporado no front-end:

    return jsonify(
        {
            "session_id": session_id,
            "token": token,
            "is_admin": admin,
            "name": name,
            "application_id": application_id,
            "success": True,
        }
    )

7. Crie sua interface do usuário

A Video API facilita a incorporação de vídeos interativos de alta qualidade, chamadas de voz, mensagens e compartilhamento de tela em aplicativos da web e móveis.

O JavaScript

No diretório raiz, crie outro diretório chamado static. Nesse static diretório, crie um arquivo chamado app.js e adicione o código deste arquivo no GitHub.

Vamos ver passo a passo como uma sessão é criada e gerenciada com o Vonage:

1. Usando o application_id e session_id um objeto de sessão é criado com:

session = OT.initSession(applicationId, sessionId);

2. Em seguida, um cliente se conecta à sessão; se o cliente for um administrador, o fluxo de mídia é publicado:

    session.connect(token, (error) => {
        if (error) {
            console.error('Error connecting:', error);
            return;
        }
        if (isAdmin === "true") {
            const publisher = OT.initPublisher('publisher', { name: name });
            session.publish(publisher);
        }
    });

3. Quando o fluxo de mídia é publicado, o objeto de sessão dispara um streamCreated evento e inscreve novas conexões nele:

session.on('streamCreated', (event) => {
    session.subscribe(event.stream, 'subscriber');
});

4. Enquanto isso, o código a seguir cria e monitora eventos de sinal para implementar um chat entre clientes:

session.on('signal', (event) => {
    const messages = document.getElementById('messages');
    messages.innerHTML += `<p>${event.data}</p>`;
});

O HTML

Para as rotas que criamos no backend em app.py, precisamos de um modelo para renderizar no front-end. É para isso que serve o index.html arquivo serve. Como esse código não usa nada específico da Video API, não vamos abordá-lo aqui. Você pode copiar o templates diretório e seu conteúdo do repositório no GitHub.

8. Agora experimente!

Coloque seu aplicativo em funcionamento com o seguinte comando no diretório raiz:

python app.py

No seu navegador, acesse a URL pública gerada pelo ngrok. Você deverá ver uma página da web convidando você a “Participar da sessão de Video”, com um campo de texto para inserir seu nome. Se quiser transmitir um vídeo, certifique-se de marcar a caixa de seleção para Participar como administrador e, em seguida, clique em Participar da sessão.

Você deve ser redirecionado para uma página que exibe a transmissão de Video do seu dispositivo. Observação: Talvez seja necessário conceder permissão para o uso da câmera e do microfone primeiro. 

Depois de configurar essa transmissão de video, envie a mesma URL do ngrok para um amigo e peça para ele participar sem selecionar a opção de “Entrar como administrador”. Isso o adicionará à sessão como assinante, de modo que ele só poderá ver o Video da câmera do administrador.

O recurso de bate-papo funciona para todos os participantes. Ao digitar um texto no campo e clicar em Enviar, o texto ficará visível para todos os participantes.

Em resumo

Neste tutorial, você aprendeu a criar um aplicativo minimalista de videoconferência baseado em navegador usando Python, JavaScript e a Video API da Vonage. Ao longo do tutorial, abordamos Concepts fundamentais, como o Flask para criar rapidamente uma estrutura de back-end e o ngrok para expor seu ambiente local à internet. Você também explorou os principais componentes da Video API — sessões, tokens, conexões e streams — e viu como eles funcionam juntos para possibilitar a comunicação em tempo real. Ao combinar um backend simples do Flask com um frontend desenvolvido em JavaScript, você criou um aplicativo funcional que suporta vídeo ao vivo e funcionalidades básicas de chat. A partir daqui, você pode ampliar essa base com recursos mais avançados, como controles de moderação, gravação, compartilhamento de tela ou UI/UX aprimoradas, para se adequar ao seu caso de uso. O Vonage Video API Playground facilita a experimentação de diferentes recursos diretamente no seu navegador.

Leituras complementares e recursos

• Melhores práticas para começar a usar o Vonage Video: Práticas recomendadas que sugerimos que você leve em consideração antes de começar a desenvolver seu aplicativo de vídeo repleto de recursos, com tecnologia da Video API do Vonage.

• Arquivamento de vídeo com a Video API da Vonage e o React: Conheça quatro modos de arquivamento de vídeo com a Video API da Vonage, incluindo o Experience Composer.

• Melhore a experiência de Video do usuário com o monitoramento de qualidade em tempo real: O MOS é uma excelente métrica de qualidade de vídeo para chamadas de vídeo. Saiba como o Vonage Video o utiliza para aprimorar a experiência do usuário.

• Introdução à Video API da Vonage: Criar um novo aplicativo com a Video API da Vonage leva apenas alguns minutos. Vamos explicar passo a passo como criar um aplicativo do zero usando nosso SDK para Node e o SDK de Vídeo para Web.