Kit do Hackathon da Video API da Vonage

Um guia rápido para adicionar a funcionalidade da Video API da Vonage ao seu aplicativo do Hackathon

A TokBox está organizando um hackatão virtual de 1º de agosto a 18 de setembro. Participe do Grupo do HackTokBox no Slack e ir para o #vídeao vivo Canal do Slack para começar.

O que é o OpenTok?

A plataforma OpenTok, desenvolvida pela Vonage, facilita a integração de recursos interativos em tempo real de alta qualidade, como vídeo, voz, mensagens e compartilhamento de tela, em aplicativos web e móveis.

A plataforma inclui bibliotecas do lado do cliente para web, iOS, Android, Windows e Linux, além de SDKs do lado do servidor e uma API REST.

Como posso usar o OpenTok?

Além de incorporar bate-papo com áudio e vídeo em tempo real a aplicativos web e móveis, a plataforma OpenTok oferece uma ampla variedade de recursos que podem ser utilizados para desenvolver casos de uso inovadores em praticamente qualquer setor.

Aqui estão apenas algumas maneiras pelas quais empresas em todo o mundo estão utilizando o OpenTok:

Aplicativo social popular Festa em Casa utiliza o OpenTok para criar salas de vídeo ao vivo onde os usuários podem “relaxar” com os amigos em seus dispositivos móveis
Minerva criou salas de aula virtuais onde até 18 alunos podem interagir com o professor em tempo real
Babylon Health facilita a marcação de consultas por vídeo em tempo real com médicos, terapeutas e especialistas diretamente no seu celular
A Roll20 desenvolveu um mesa virtual com chat de vídeo e voz para usuários que jogam juntos online
A Esurance foi adicionada avaliação por vídeo no aplicativo deles, permitindo que os clientes falem com um atendente e mostrem um vídeo ao vivo dos danos após um acidente
Seja Meus Olhos conecta pessoas cegas e com deficiência visual a ajudantes com visão de todo o mundo por meio de vídeo ao vivo
Double Robotics criou robôs de telepresença que utilizam vídeo em tempo real para proporcionar aos usuários uma representação física em um escritório ou em outro local remoto
Para ver mais exemplos de como as pessoas estão usando o OpenTok, confira nosso Histórias de clientes página.

Aqui estão algumas ideias do que você pode desenvolver durante o Hackathon:

Um aplicativo de speed dating por vídeo em que os usuários alternam entre conversas por vídeo com seus pares
Um jogo social, como charadas ou Cards Against Humanity, realizado por vídeo
Um aplicativo de tecnologia para a democracia — assembleia pública virtual, organização de protestos, arrecadação de fundos
Um aplicativo de RV que incorpora a funcionalidade de chat por vídeo
Combine o OpenTok com Clarifai para adicionar reconhecimento de imagens a um aplicativo de comunicação por vídeo
Use o OpenTok’s Transmissão em HLS e RTMP recurso para publicar transmissões no Livestream e/ou no JWPlayer ou em um servidor RTMP

Demonstração

Para ver um exemplo do OpenTok em ação, confira nossa demonstração de videoconferência abaixo:

Acesse opentokdemo.tokbox.com ou baixe o OpenTokApp na App Store
Criar uma sala
Compartilhe a URL da sala (ou o nome da sala) com um amigo ou simplesmente abra em uma nova aba para iniciar um bate-papo por vídeo

Concepts-chave

Sessões e tokens

Todo bate-papo por vídeo do OpenTok ocorre dentro de um sessão. Você pode pensar em uma sessão como uma “sala de bate-papo” onde os clientes (navegador ou aplicativo móvel) podem publicar e se inscrever para receber as mensagens uns dos outros correntes. As sessões são hospedadas na nuvem da OpenTok, e cada sessão está associada a um ID da sessão. Para permitir que vários clientes conversem entre si, basta fazer com que eles se conectem ao mesmo ID de sessão.

A token é a sua “chave” para a sessão e é gerado para um ID de sessão específico. Cada usuário deve ter seu próprio token para se conectar à sessão. Esses tokens expiram após um determinado período (especificado pelo desenvolvedor), ao passo que a sessão não expira.

Os IDs de sessão e os tokens são geralmente criados usando o do lado do servidor componente de um aplicativo OpenTok, mas se você estiver apenas criando uma demonstração ou uma prova de conceito, poderá gerá-los no seu Account - basta acessar a página “Visão geral do projeto” e rolar a tela para baixo até Ferramentas do projeto.

Conexões, editoras e assinantes

Assim que um cliente obtiver um ID de sessão e um token, ele poderá estabelecer uma conexão à sessão usando o código dos SDKs do lado do cliente (veja abaixo). Essa conexão dispara um evento para a sessão e para todos os clientes que já estejam conectados. Uma vez conectado, o cliente pode publicar um fluxo de áudio/vídeo proveniente de sua câmera e microfone

Quando um cliente publica um fluxo, os eventos são enviados a todos os clientes conectados à sessão. Ao receberem o evento, os clientes podem inscrever-se para o stream recém-publicado.

Para mais informações sobre sessões, tokens, transmissões e muito mais, confira nosso Página “Noções básicas da Video API”.

Obtenha sua chave de API

Obtenha sua chave de API criando um Account gratuito aqui. Não se esqueça de usar seu código promocional do hackathon ao se inscrever.
Depois de fazer login na sua conta, criar um novo projeto. Ao desenvolver seu aplicativo, você usará o Visão geral do projeto para gerar IDs de sessão e tokens (mais detalhes a seguir).

Configurando um cliente (com aplicativos de exemplo)

O lado do cliente de um aplicativo OpenTok fornece a maior parte das funcionalidades de uma aplicação OpenTok. O cliente utiliza o ID da sessão e o token (veja acima) para conectar o usuário a uma sessão a partir de um navegador da web ou de um aplicativo móvel.

Bate-papo por vídeo básico

Para saber como configurar o código do lado do cliente mais básico na web, confira nosso Olá, mundo. Para o desenvolvimento de aplicativos móveis, você pode clonar ou baixar nossos aplicativos de exemplo do lado do cliente para iOS Swift, iOS Objective-C e Android no GitHub.

Aplicativos de exemplo do Accelerator + extras

Para ter uma interface do lado do cliente um pouco mais refinada, com alguns recursos avançados, pronta para uso em um prazo relativamente curto, você pode usar nossos Aplicativos de Exemplo do Accelerator para Web, iOS, e Android no GitHub.

Esses aplicativos de exemplo incluem funcionalidades básicas de bate-papo por áudio/vídeo, além de controles para o usuário, bate-papo por texto integrado e alguns códigos iniciais para configurar o compartilhamento de tela e o arquivamento. Para obter mais informações sobre a configuração e os recursos avançados desses aplicativos de exemplo, consulte os arquivos README no GitHub. Você pode personalizar a interface do usuário desses exemplos da maneira que quiser usando CSS.

Amostras adicionais de dispositivos móveis

Se você quiser implementar bate-papos com vários participantes, drivers personalizados de áudio/vídeo ou outros casos de uso especiais em dispositivos móveis, temos vários outros aplicativos de exemplo para Android, iOS Swift, e iOS Objective-C

Mais informações

Para obter mais informações sobre como configurar o código do lado do cliente para seu aplicativo OpenTok, consulte nosso Guias para desenvolvedores.

Configuração de um servidor (opcional)

O componente do lado do servidor de um aplicativo OpenTok é usado para gerar IDs de sessão e tokens para os usuários do aplicativo. Se você estiver apenas criando uma demonstração ou uma prova de conceito, talvez não precise de um componente do lado do servidor — é possível gerar IDs de sessão e tokens na página “Visão geral do projeto” do seu projeto em seu Account da Video API (basta abrir ou criar um projeto e, em seguida, rolar a tela até “`Ferramentas do projeto`”).

Para mais informações sobre como configurar o código do lado do servidor, confira nosso Guias para desenvolvedores.

Realidade Aumentada e Vídeo ao Vivo

Para começar a usar a RA e o vídeo ao vivo, confira os exemplos abaixo:
ARKit
Metadados do quadro do ARKit

Recursos avançados

Além do chat por vídeo básico, o OpenTok pode ser usado para uma variedade de recursos mais avançados. Nosso Aplicativos de exemplo do Accelerator O código acima inclui algumas dessas funcionalidades (compartilhamento de tela, arquivamento e bate-papo por texto), mas aqui estão alguns guias úteis com mais informações sobre como configurar recursos avançados:

Compartilhamento de tela:
O Aplicativos de exemplo do Accelerator O texto acima inclui o código inicial para a funcionalidade de compartilhamento de tela, mas você também deve conferir nossos guias sobre compartilhamento de tela para Web, iOS, e Android. Normalmente, para compartilhar a tela na internet, é necessário criar uma extensão personalizada para o navegador, mas se você estiver usando apenas o localhost para demonstrar seu aplicativo, pode usar essa extensão já pronta.

Outros guias sobre recursos avançados:
Arquivamento - Tutorial | Guia
Bate-papo por texto
Transmissão
Interconexão SIP (conecta sessões do OpenTok a chamadas SIP/telefonia)

Para saber mais sobre como implementar esses e outros recursos, confira nosso Guias para desenvolvedores. Você também pode consultar nosso Documentação de referência da API para obter informações sobre métodos e chamadas específicas.

Dicas e truques

Um servidor web local é a melhor maneira de fazer uma demonstração rápida do seu aplicativo web. Se você não tiver um, alguns serviços comumente utilizados são XAMPP e MAMP. Como alternativa, você poderia usar o SimpleHttpServer do Python, um servidor web em PHP ou um aplicativo em Node.js.
Se você quiser se conectar ao seu localhost a partir de vários dispositivos (por exemplo, um laptop e um smartphone), ngrok pode ser configurado em poucos minutos para acessar seu localhost por meio de uma URL pública segura.
Você pode ver uma lista dos navegadores compatíveis com o OpenTok aqui
O Chrome só permite comunicações WebRTC por HTTPS

Como obter ajuda

Se você tiver alguma dúvida ou precisar de ajuda para desenvolver seu aplicativo, há algumas maneiras de entrar em contato conosco para obter uma resposta rápida:

Fale com nossa equipe técnica no local, caso você esteja participando de um evento da Vonage.
Entre em contato conosco