Geekly articles weekly

Streaming de chamadas de vídeo RTMP


Hoje, as plataformas de streaming estão no auge da popularidade, já que milhões de pessoas talentosas compartilham regularmente seus conhecimentos - lidas, elas usam o streaming ao máximo. À medida que esse mercado está crescendo, existem muitos aplicativos que podem transmitir vídeo ao vivo usando uma câmera de smartphone ou laptop. Talvez você também queira introduzir essa funcionalidade em seu aplicativo; Nesse caso, apressamo-nos a agradar - agora o Voximplant permite encaminhar chamadas de vídeo via RTMP para qualquer CDN que suporte esse protocolo.

Essa funcionalidade é possibilitada pelo novo módulo Voxengine - StreamingAgent . Sob o corte, você está aguardando 5 etapas para configurar essa integração, bem-vindo!

Esquema



Uma chamada de vídeo de um aplicativo móvel / web ou SIP chega à nossa nuvem, que a direciona para uma CDN de streaming. Por sua vez, a CDN envia fluxos de áudio e vídeo aos usuários finais - como costuma fazer. Observe que o RTMP suporta apenas o H.264, por isso é muito importante especificar explicitamente esse codec durante o streaming.

Você vai precisar


  • uma conta em um serviço de streaming, por exemplo, Twitch ou Youtube ;
  • Conta Voximplant. Se você não o possui, o registro fica aqui ;
  • Aplicativo Voximplant, bem como um script, uma regra e um único usuário. Vamos criar tudo isso neste tutorial;
  • cliente da Web para captura de vídeo e áudio - usaremos nosso videochat de demonstração

1. Configurações de streaming


Primeiro de tudo, você precisará obter os valores de dois parâmetros, que usamos no script de nuvem - nome / chave do fluxo e URL do servidor . A seguir, mostramos como obter esses valores usando o Twitch e o YouTube como exemplos.

Twitch


Faça login na sua conta, clique na foto do perfil no canto superior direito e selecione Video Producer.



Na seção Configurações, selecione Canal e clique em Copiar na parte superior da página para obter sua Chave de fluxo principal. Observe que a chave está disponível apenas com a autenticação de dois fatores ativada. Cole esse valor no seu editor de texto ou deixe esta página aberta para copiar o valor posteriormente.

Para localizar o URL do servidor, acesse a página stream.twitch.tv/ingests , selecione um dos servidores recomendados e copie-o sem a última barra, por exemplo: rtmp: //live-sfo.twitch.tv/app

YouTube


Faça login na sua conta, clique no avatar no canto superior direito e selecione YouTube Studio (beta).



Se você não possui um canal no YouTube, será exibida uma caixa de diálogo sobre a criação de um canal. Clique em Criar canal e você verá um painel do canal criado com uma notificação de que a transmissão será possível dentro de 24 horas.



Enquanto estiver no YouTube Studio, vá para Outros recursos -> Transmissão ao vivo agora através do menu à esquerda. Uma nova página é aberta, na parte inferior da qual está o bloco de configuração do codificador. A partir daqui, você precisa usar o URL do servidor e o nome do fluxo / valores-chave (ou deixar a página aberta).



2. Configurações do VOXIMPLANT


Agora você precisa fazer as configurações na lateral do Voximplant. Primeiro faça login na sua conta: https://manage.voximplant.com/auth . No menu à esquerda, clique em "Aplicativos", depois em "Novo aplicativo" e crie um aplicativo chamado streaming. Vá para o novo aplicativo, alterne para a guia "Scripts" para criar um script startStream com este código (não se esqueça de substituir os valores da etapa anterior nas linhas 8 e 9):

require(Modules.StreamingAgent); VoxEngine.setVideoCodec("H264"); VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 }); e.call.sendMediaTo(streaming); streaming.addEventListener(StreamingAgentEvents.Connected, function (e) { Logger.write("LOG: StreamingAgentEvents.Connected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Disconnected, function (e) { Logger.write("LOG: StreamingAgentEvents.Disconnected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.ConnectionFailed, function (e) { Logger.write("LOG: StreamingAgentEvents.ConnectionFailed: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Error, function (e) { Logger.write("LOG: StreamingAgentEvents.Error: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStarted, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStarted: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamError, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamError: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStopped, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStopped: " + e.reason); }); e.call.answer(); e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); }); });

Este é um script simples que inicia um fluxo e também monitora todos os seus estados possíveis, como: Conectado, Falha na conexão, StreamStarted etc. - Os detalhes do script serão um pouco mais baixos. Agora você precisa ir para a guia "Roteamento" do seu aplicativo e clicar em "Nova regra". Nomeie streamRule, especifique o script startStream e deixe a máscara padrão (. *).


A última coisa a fazer nesta fase é criar um usuário. Vá para a guia "Usuários", clique em "Criar usuário", especifique um nome (por exemplo, usuário1) e senha e clique em "Criar". Vamos precisar desse par de nome de usuário / senha para autenticação no cliente da web.


A configuração do Voximplant está concluída, mas antes de avançarmos para o Web client, proponho entender como o módulo StreamingAgent funciona em nosso cenário.

3. O cenário


O módulo StreamingAgent permite que os desenvolvedores iniciem fluxos RTMP em plataformas populares de estimulação. Para usar a funcionalidade do módulo, devemos conectá-lo no início do script:

 require(Modules.StreamingAgent);

Em seguida, você deve especificar explicitamente o codec que será usado durante o streaming. Como muitas plataformas (incluindo Twitch e YouTube) usam RTMP, que, por sua vez, suporta H.264, é isso que indicaremos:

 VoxEngine.setVideoCodec("H264");

Se o codec não for especificado, o evento StreamingAgentEvents.StreamError poderá ser gerado , contendo o texto do erro:
 "Video codec mismatch. " + codecName + " granted, but should be H.264"

Em seguida, adicionamos um manipulador para o evento CallAlerting para manipular a vídeo chamada do cliente da Web (sim, entraremos em breve). Primeiro, adicionaremos uma chamada ao método createStreamingAgent ao manipulador . O método possui os seguintes parâmetros, a maioria deles é necessária, opcional são marcados separadamente:

  • protocolo - até agora apenas RTMP é suportado;
  • URL - URL do servidor, consulte a etapa 1;
  • streamName - nome / chave do fluxo, consulte a etapa 1;
  • applicationName (opcional) - parte de streamName, por exemplo, live2. Use esta opção se a plataforma selecionada exigir;
  • keyframeInterval (opcional, segundos) - com que frequência um quadro-chave será gerado no fluxo. Se não especificado, o valor padrão é 2.

Na lista de scripts acima, a chamada para o método createStreamingAgent é semelhante a esta:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 });

Mas podemos omitir keyframeInterval e usar applicationName, assim:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://a.rtmp.youtube.com/", applicationName: "live2", streamName: "somename" });

Depois que o objeto de streaming é criado, o script continua a processar a chamada dentro do manipulador. A próxima etapa é direcionar o fluxo de vídeo recebido do cliente da Web para o objeto de streaming criado:

 e.call.sendMediaTo(streaming);

Em seguida, usamos todos os eventos de streaming possíveis para depuração: os manipuladores não fazem nada além de enviar informações para o log da sessão do Voximplant. Você não pode usar esse pedaço de código, se quiser.

Após o processamento dos eventos, o script responde à chamada recebida:

 e.call.answer();

Finalmente, devemos lidar corretamente com o final da transmissão quando o cliente da Web parar de enviar o vídeo. Formalmente, também não podemos usar esse manipulador, mas a sessão será encerrada somente após 60 segundos após o término do envio do vídeo. Não há sentido nessa expectativa; portanto, é melhor encerrar a sessão, começando em Eventos desconectados :

 e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); });

Entendendo a lógica do cenário, estamos prontos para iniciar a última - mas não menos importante - parte de nossa configuração.

4. Cliente da Web


Clone ou faça o download da demo do videochat . Em seguida, vá para a pasta do repositório e abra o arquivo WebApp / JS / app.js em um editor de texto / IDE. Mude o nome do aplicativo na linha 5 e salve o arquivo:


Na verdade, é tudo.

5. Comece a transmitir


Você precisa executar a pasta WebApp localmente ou em seu servidor web. Para executar localmente, você pode usar o utilitário live-server ou o aplicativo Web Server for Chrome . Ao iniciar o Web client, você deve fornecer o nome da sua conta Voximplant, por exemplo:
  http://127.0.0.1:8080/index.html#accname=johngalt


Após iniciar o cliente, insira o par de login e senha da etapa 2:


Digite qualquer conjunto de caracteres próximo ao sinal @ e pressione Ligar. Se tudo foi feito corretamente, seu fluxo começará em breve :) Fluxos de sucesso e desenvolvimento produtivo para você!

Source: https://habr.com/ru/post/pt472402/

More articles:


All Articles