Compartilhar:
){kind=small}
Misha é um Engenheiro de Soluções para Clientes na Vonage, onde se dedica ao desenvolvimento da Video API. Depois de trocar a agitação de São Francisco pelo charme de Milwaukee, em Wisconsin, ele agora passa seu tempo livre descobrindo as joias escondidas do Meio-Oeste.
Compartilhe suas telas com seus amigos e colegas de trabalho
Tempo de leitura: 1 minuto
Em certas situações, pode ser necessário compartilhar várias telas ao mesmo tempo. Com a Video API da Vonage, você tem a oportunidade de fazer exatamente isso.
Esta postagem do blog mostrará como criar um aplicativo simples em JavaScript que utiliza a Video API da Vonage, permitindo ter várias transmissões de compartilhamento de tela ao mesmo tempo. Isso pode ser útil para atividades colaborativas ou simplesmente para se divertir, como jogar um jogo de jogo da velha com amigos ou familiares.
Para desenvolver este projeto, você precisará do seguinte:
Account da Video API da Vonage
Conhecimentos básicos de JavaScript
Documentação da Video API
Clonar determinados repositórios do GitHub
Usaremos um exemplo de bate-papo por Video básico do diretório do Opentok no GitHub como ponto de partida para este tutorial. Baixe o seguinte repositório: https://github.com/opentok/opentok-web-samples e trabalharemos com a parte “Basic Video Chat” desse repositório.
Utilizaremos um ID de sessão e um token gerados por meio da sua conta da Video API do Vonage. Acesse tokbox.com/Account para fazer isso e copie e cole as informações no config.js arquivo do repositório. Para um aplicativo já implantado, recomenda-se que você gere IDs de sessão e tokens por meio do servidor de back-end.
No aplicativo de exemplo “Basic Video Chat”, acesse o arquivo index.html e vamos adicionar um botão para o compartilhamento de tela.
Adicione o código a seguir no <body> da página HTML:
<button onclick=”screenShare()”>Share your screen </button>
Agora acesse a js/app.js parte do código-fonte e adicione a seguinte screenShare() função:
function screenShare() {
OT.checkScreenSharingCapability(function(response) {
if(!response.supported || response.extensionRegistered === false) {
console.log("screen sharing is not supported")
} else if (response.extensionInstalled === false) {
console.log("older browser like IE might require a plugin")
} else {
// Screen sharing is available. Publish the screen.
var publisher = OT.initPublisher('screenshare',
{videoSource: 'screen'},
function(error) {
if (error) {
console.log(error);
} else {
session.publish(publisher, function(error) {
if (error) {
console.log(error);
}
});
}
}
);
}
});
}Depois disso, volte ao index.html arquivo e adicione o <div> para a transmissão de compartilhamento de tela:
<div>
<div id=”subscriber”></div>
<div id=”publisher”></div>
<div id=”sceenshare”></div>
</div>
Gostaríamos de manter separados os fluxos do emissor, do assinante e do compartilhamento de tela para garantir que os usuários também possam se ver uns aos outros durante a atividade de compartilhamento de tela. Você pode atualizar o css/app.css arquivo para adicionar estilos de layout adicionais; no entanto, sem nenhuma alteração, as transmissões de compartilhamento de tela aparecerão no canto superior esquerdo.
Para testar isso, abra o index.html arquivo no seu navegador (como o Google Chrome), publique seu Video e clique no botão “Compartilhar sua tela” abaixo da transmissão do Video. Depois, entre na reunião usando outro dispositivo ou navegador para testar isso!
Para concluir, este artigo mostrou a você uma maneira simples de aprimorar o aplicativo Basic Video Chat com recursos de compartilhamento de tela que permitem que os usuários compartilhem suas telas simultaneamente. Isso foi feito por meio de melhorias nos arquivos HTML e JavaScript do repositório existente do OpenTok no GitHub.
Compartilhar:
Misha é um Engenheiro de Soluções para Clientes na Vonage, onde se dedica ao desenvolvimento da Video API. Depois de trocar a agitação de São Francisco pelo charme de Milwaukee, em Wisconsin, ele agora passa seu tempo livre descobrindo as joias escondidas do Meio-Oeste.