Incorporações de bate-papo por vídeo

Adicione rapidamente a funcionalidade da Video API da Vonage ao seu site com um widget simples que pode ser incorporado.

Crie um código de incorporação do Video Chat no seu Account da Video API

Este é um exemplo de incorporação de um chat por vídeo.
Clique para iniciar a chamada e, em seguida, clique no botão abaixo para compartilhar este link de incorporação exclusivo para um bate-papo por vídeo individual.

Compartilhe este conteúdo incorporado

https://your-domain/opentok/embeds/?room=roomParam

Para adicionar um segundo usuário à sala de bate-papo, Copie o URL acima e abra-o em uma nova aba do navegador ou compartilhe-o com um amigo. O outro usuário também precisará clicar para iniciar a chamada.

Visão geral

A incorporação do Video Chat é a maneira mais fácil de adicionar rapidamente funcionalidades básicas do OpenTok ao seu site usando um trecho de código HTML incorporável.

Depois de implementado no seu site, você pode clicar no código de incorporação para se conectar a uma “sala de bate-papo por vídeo”. Outros usuários podem, então, clicar no código de incorporação em seus próprios navegadores e entrar na mesma sala de bate-papo. Você pode até mesmo criar salas separadas com o mesmo código de incorporação usando o parâmetro da sala.

A incorporação de chats por vídeo é compatível com todos os navegadores compatíveis com a biblioteca OpenTok.js.

Limitações

Atualmente, a incorporação do chat por vídeo funciona apenas na web e oferece funcionalidades básicas de chat com áudio e vídeo. A integração com aplicativos móveis e recursos avançados, como arquivamento, compartilhamento de tela e chat por texto, não estão incluídos na funcionalidade de incorporação do chat por vídeo.

Para utilizar os recursos avançados do OpenTok e o suporte a navegadores móveis e aplicativos, você precisará criar um projeto em seu Account da Video API e siga nossas dicas úteis tutoriais e guias para desenvolvedores.

Links rápidos:

• Como criar um vídeo de bate-papo incorporado
• Como adicionar um vídeo de bate-papo incorporado à sua página da web
• Criação de cômodos adicionais
• Casos de uso para várias salas
• Plataformas de sites compatíveis
• Aplicativo de exemplo
• Suporte

Como criar um vídeo de bate-papo incorporado

1. Acesse o seu Account da Video API e Criar um projeto (seja pelo menu lateral ou pela Visão geral da sua Account.)

2. Selecione o Incorporar opção do projeto.

3. Dê um nome à sua incorporação.

   Você usará esse nome mais tarde para localizar o código de incorporação na sua Account da Video API.

4. Especifique a largura e a altura da incorporação.

5. Especifique o domínio do site onde você pretende usar a incorporação.

   Por exemplo, se você for inserir o código de incorporação na sua página da web em example.com/test, digite https://example.com. Não se esqueça de inserir http:// ou https:// seguido do nome de domínio. (Se você for usar o localhost para testes, basta digitar http://localhost ou http://localhost:[port number] (para portas que não sejam a porta 80.)

   Importante: Você deve usar uma URL https (e não http). Os navegadores não permitem o acesso à câmera em páginas http. No entanto, eles permitem que você use http para testes locais, como, por exemplo, http://localhost ou http://localhost:8080.

6. Se você for usar um construtor de sites como o Squarespace, o Weebly ou o WordPress para hospedar o site, selecione-o no Criado com menu (opcional).

7. Clique no Criar incorporação botão.

Após concluir essas etapas, seu código de incorporação será gerado na página. Copie esse código e salve-o para poder adicioná-lo ao seu site. Você pode obter esse código a qualquer momento selecionando uma incorporação de videochamada existente na sua Account da Video API da Vonage e clicando no Copiar código de incorporação botão na parte superior da Visão geral da incorporação.

Incorporações com iframe x incorporações com script

Você pode escolher entre usar um iframe ou roteiro código de incorporação. Consulte as duas seções a seguir.

Como adicionar um vídeo de bate-papo incorporado à sua página da web

O que você vai precisar:

• Acesso ao código HTML da sua página da web para edição

• O código de incorporação exclusivo da sua Account da Video API (consulte Como criar um vídeo de bate-papo incorporado).

Como adicionar e testar a incorporação na sua página da web:

1. Com o código HTML da sua página da web aberto em um editor, copie o código de incorporação da sua conta da Video API e cole-o no corpo do seu código HTML. O local onde você deve colá-lo depende de onde deseja que ele apareça, mas deve estar em algum ponto entre as tags <body> e </body> tags que devem aparecer na página.

2. Salve o HTML e abra-o no seu navegador. Agora você deve ver uma caixa com um Clique para iniciar a chamada botão.

3. Clique no botão e você deverá se conectar à sala de chat por vídeo. Se necessário, permita o acesso à sua câmera e ao seu microfone. Agora você deverá ver um vídeo seu no navegador.

4. Para verificar se o chat por vídeo está funcionando, desative o áudio e, em seguida, abra o mesmo URL em outra aba, navegador ou computador e clique para iniciar a chamada. Agora você deverá ver dois fluxos de vídeo na janela incorporada.

Criação de cômodos adicionais

Existem dois tipos de incorporações — iframe e roteiro (ver acima (para saber mais sobre isso). Os dois tipos têm os seguintes formatos básicos:

iframe

<iframe
  src="https://[YOUR EMBED HOST]/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&iframe=true&room=DEFAULT"
  allow="microphone; camera"
></iframe>

roteiro

<div
  id="otEmbedContainer"
  style="width:[YOUR EMBED WIDTH];
  height:[YOUR EMBED HEIGHT]"
></div>
<script
  src="https://[YOUR EMBED HOST]/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&room=DEFAULT"
></script>

Em ambos os casos, o fim do src A URL é um parâmetro room=DEFAULT. Esse parâmetro especifica a “sala” utilizada pela incorporação — caso vários usuários acessem uma incorporação com o mesmo embedId e room parâmetros, eles iniciarão uma sessão de videochamada, na qual cada usuário poderá visualizar o(s) fluxo(s) de vídeo dos outros usuários. Se as salas não corresponderem, eles não entrarão na mesma sala.

Se você quiser usar o mesmo código de incorporação para criar várias salas distintas, pode alterar o parâmetro “room” para definir uma nova sala. Por exemplo, você poderia criar um código de incorporação com room=group1 e outro com room=group2 — qualquer usuário que acessar a sala “group1” poderá ver as transmissões de qualquer outra pessoa que também esteja acessando a sala “group1”, mas não poderá ver os usuários que estiverem acessando a sala “group2”.

Lembre-se de que o número máximo de participantes em qualquer evento é de sala é três.

Casos de uso para várias salas

Embora o parâmetro da sala Embora não seja obrigatório para criar um aplicativo de produção com vídeos incorporados, há várias maneiras de aproveitar esse recurso para criar um aplicativo de vídeo muito mais robusto. Aqui estão alguns exemplos de como ele pode ser usado:

• Criação programática de salas — se você tiver um aplicativo que precise conectar dinamicamente pessoas em salas privadas de bate-papo por vídeo (por exemplo, um médico e um paciente), seu aplicativo do lado do servidor poderia gerar IDs exclusivos de “sala” para cada reunião. Você poderia então criar um iframe incorporado de bate-papo por vídeo ou um trecho de script usando esse ID como o room parâmetro — os usuários carregariam então a incorporação criada dinamicamente em seus navegadores, ingressando na mesma sala que quaisquer outros usuários com o mesmo ID de sala.
• Salas criadas pelos usuários — você poderia permitir que os usuários enviassem o nome da sala por meio de um formulário no seu site antes de “criar” uma sala de bate-papo para que outras pessoas possam participar. Em seguida, você poderia passar esse nome da sala para um código incorporado como o room parâmetro. Outros usuários poderiam, então, digitar o mesmo nome da sala para participar da mesma sessão de bate-papo por vídeo.
• Transmissão de IDs de salas por meio da URL de um site — se você quiser passar o nome de uma sala por meio de uma URL (por exemplo, www.example.com?room=group1), bastaria um código do lado do cliente para analisar a URL e criar uma incorporação quando o usuário carregar a página, passando o ?room parâmetro na incorporação src URL. O exemplo prático No topo desta página, há um exemplo desse caso de uso em ação.

Plataformas de sites compatíveis

Atualmente, os vídeos de bate-papo podem ser incorporados em sites criados com qualquer uma das seguintes plataformas:

• Account hospedado no WordPress (paga)
• Squarespace
• Zoho Sites

Atualmente, as seguintes plataformas estão não compatível com incorporações:

• Account gratuito no WordPress
• Weebly
• Wix

Além disso, as incorporações não funcionarão corretamente nos seguintes editores de código on-line:

• Codepen.io
• JSFiddle
• JSBin

Aplicativo de exemplo

Este aplicativo web de exemplo mostra como gerar salas dinâmicas de chat por vídeo para um fluxo de trabalho de agendamento individual usando Node.js. Isso pode ser utilizado para relações médico-paciente, aluno-professor ou qualquer outro aplicativo de agendamento individual para a web.

Suporte

Se você estiver com dificuldades para implementar a incorporação e não conseguir encontrar a resposta nesta página, você pode entre em contato com nossa equipe de suporte.