Giter Site home page Giter Site logo

live-streamer's People

Contributors

dovyski avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar

live-streamer's Issues

Implementar a comunicação inicial entre o `live-streamer` e o OBS

O live-streamer rodará em uma VM onde estará rodando o OBS e o Chrome (via live-streamer). O objetivo dessa tarefa é abrir um canal de comunicação entre o live-streamer e o OBS, para que o streamer consiga controlar o OBS no futuro (iniciar transmissão, parar transmissão, trocar cena, etc).

Para isso, vamos utilizar o https://github.com/Palakis/obs-websocket . O obs-websocket é um mini-serviço/servidor que roda na máquina, se conecta no OBS e disponibiliza acesso a ele através de uma conexão websocket. Para essa tarefa, o live-streamer deve se conectar a esse websocket e manter a conexão aberta.

Para fins de teste, você pode enviar algum comando para o OBS, como alterar alguma configuração, trocar a cena, etc.

Usar Laravel Echo para efetuar comunicação entre streamer e operador

Atualmente a comunicação entre o live-streamer (cliente de transmissão) e o operador (cliente web) está sendo feita com uma conexão simplista websocket. Isso precisa ser alterado para a forma de comunicação oficial (que também será via websockets, mas usando algumas bibliotecas).

O objetivo dessa tarefa é integrar o Laravel Echo ao projeto. Em linhas gerais, o Laravel Echo é uma biblioteca que faz o "meio campo" entre um servidor websocket e uma aplicação que se conecta a esse e recebe/envia dados. O Laravel Echo utiliza, como camada de trabalho, a biblioteca Pusher (você verá menções a isso nos tutoriais e docs).

Para você conseguir executar essa tarefa, você precisa do seguinte:

  • Clonar o live-web e seguir o readme para fazê-lo funcionar. Detalhe que o passo 3.1 Rodando o projeto do live-web contém informações para iniciar o servidor websocket.
  • Instalar o Laravel Echo (e o Pusher) no live-streamer e fazer uso dele para se conectar ao servidor websocket do live-web. Você pode dar uma olhada aqui e aqui para ver alguns exemplos do Laravel Echo em uso.

Para essa implementação inicial, não precisa haver autenticação entre o live-streamer e o operador (podemos usar um canal público de comunicação, e.g. public channel, não um private channel). No futuro colocamos autenticação.

Criar canal de comunicação via websocket com servidor de controle

O live-streamer será controlado remotamente pelo operador da live. Essa pessoa estará usando uma interface web que pode estar em qualquer servidor. Esse servidor/webapp, porém, terá um canal aberto de comunicação websocket (comunicação permanente de duas mãos; ida e volta simultâneas).

O live-streamer receberá comandos desse canal de comunicação (por exemplo, "mute a pessoa X"; "pause a transmissão da live"; "troque a cena"). Informações de telemetria também serão enviados pelo live-streamer até o servidor principal, assim o operador pode saber o que realmente está acontecendo com a live (taxa de envio, cena ativa, etc).

O objetivo dessa tarefa é criar um módulo, chamado control, que abre uma comunicação websocket com o servidor web onde o live-web estará rodando. Essa conexão será baseada no envio de comandos, que serão formatados como uma string JSON. Inicialmente, o live-streamer receberá uma única mensagem, com o seguinte formato:

{action: "ping", uuid: 9833a966-fe3e-4c5d-94ab-f7e2a0670e04}

Ao receber essa mensagem, o live-streamer deve responder com a seguinte mensagem (no mesmo canal de comunicação desse websocket):

{action: "pong", uuid: 9833a966-fe3e-4c5d-94ab-f7e2a0670e04}

A resposta é a mesma mensagem, só que a action é pong.

Para fins de implementação dessa tarefa, você pode criar um servidor websocket local (em outra pasta, não precisa commitar isso). Esse servidor apenas envia a mensagem de ping de tempos em tempos.

O foco dessa tarefa é criar o módulo e o fluxo de dados.

Criar um módulo para entrar em uma reunião do Google Meet

Uma das funcionalidades do live-streamer será entrar em uma reunião para que ela possa ser capturada pelo OBS. O objetivo dessa funcionalidade é fazer um módulo que faça o seguinte:

  • Receba a URL de uma reunião do Google Meet como parâmetro;
  • Acesse a página dessa reunião e clique no botão para entrar;
  • Confirmar que entrou na reunião (se não entrar na reunião em XX segundos, tenta de novo);

Como a reunião será capturada pelo obs, essa tarefa pode assumir que o live-streamer estará rodando em uma sessão do Chrome onde headless: false.

Criar uma classe para Meet

O live streamer será utilizado com diversos sistemas como: google meet, skype, webex, etc.
Para que a estrutura fique organizada da melhor forma possível para futuramente existir uma divisão entre as funções de cada sistema utilizado é necessário criar uma classe.

Atualmente está sendo feito para o meet.

Objetivo: criar uma classe e centralizar todas as funções utilizadas especificamente para o google meet dentro dessa classe.

Gerar preview de transmissão

A principal forma do operador (cliente web) monitorar se a transmissão está funcionando é visualizar o que o OBS está transmitindo (no cliente live-streamer). O objetivo dessa tarefa é capturar uma imagem do que o OBS está transmitindo e, em seguida, enviar essa imagem via websocket para o operador (cliente web).

Eu acho que a melhor forma de fazer isso é enviar a imagem codificada como uma string base64, porém talvez seja mais fácil enviar ela em bytes puros mesmo (fica a teu critério escolher a forma mais fácil).

O canal de comunicação entre o operador e o live-streamer foi implementado em uma versão inicial pela @stefanimeneghetti, porém ela vai trabalhar na versão final agora. Você precisa conversar com ela para alinhar qual é o método a ser utilizado para enviar a imagem pelo canal de comunicação.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.