Recurso presente no painel de controle do seu site administrável, o módulo livre é uma ferramenta flexível que permite exibir diversos tipos de conteúdo no fronte virtual da sua web rádio, aumentando a sua proximidade com seus ouvintes, que podem acompanhar em tempo real os bastidores dos criadores de conteúdo.

O módulo livre permite a exibição de conteúdo no site administrável tanto por editor de texto quanto por código HTML, e neste tutorial iremos cobrir a adição da “Câmera no Estúdio” ao site administrável, utilizando o streaming de vídeo fornecido pelo Twitch.

Diferentemente do YouTube, que permite gerenciar a sua transmissão ao vivo a partir de um navegador de Internet, a plataforma Twitch exige o uso de um programa de transmissão de áudio e vídeo. Para este guia, estaremos utilizando o OBS Studio (Open Broadcaster Software), que pode ser baixado gratuitamente a partir de sua página oficial: https://obsproject.com/

Com o software aberto, clique sobre o ícone de adição, situado na parte inferior do programa, e selecione “Dispositivo de captura de vídeo”.

Feito isso, uma janela se abrirá, onde você pode selecionar sua câmera em “Dispositivo” e ajustar as demais configurações disponíveis, como resolução, taxa de quadros por segundo etc. Ao final, clique em “OK”.

De volta à tela principal do programa, no topo, clique em “File” (Arquivo) e, em seguida, “Settings” (Configurações).

Dentro da janela que se revela, selecione “Stream” no menu lateral. Selecione as opções conforme a imagem a seguir e clique em “Get Stream Key” (Obter chave de transmissão) para ser levado à respectiva página no Twitch em seu navegador padrão.

Clique em “Copy” (Copiar) e cole esta mesma informação ao lado de “Stream Key”, conforme a imagem anterior.

Agora, você pode voltar à tela principal do programa, e clicar sobre “Start Streaming” (Iniciar Transmissão).

Por ora, vamos para o nosso site administrável.

Abrindo o painel de controle da sua rádio, acesse a seção “Site”.

Dentro da seção “Site” e abaixo de “Gerenciamento do seu site”, escolha “Módulo livre”.

Clicando em “Adicionar”, dê um título ao módulo livre e escolha “Código HTML” sob “Título do conteúdo”. Dentro da caixa de texto, cole o código JavaScript a seguir:

<!-- Add a placeholder for the Twitch embed -->

<div id="twitch-embed"></div>

<!-- Load the Twitch embed script -->

<script src="https://player.twitch.tv/js/embed/v1.js"></script>

            <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->

                        <script type="text/javascript">

                          new Twitch.Embed("twitch-embed", {

                                    width: "100%",

                                    height: "100%",

                                    channel: "SEUCANAL",

                                    layout: "video"

                          });

</script>

Onde está escrito SEUCANAL, digite o nome do seu canal no Twitch. Ex.: twitch.tv/brlogic – o nome do canal é BRLOGIC. Utilize esta informação sem remover as aspas. Se você planeja exibir o player do seu canal no Twitch no centro do seu site administrável, altere os valores ao lado de “width” e “height” para 600 e 315, respectivamente, removendo o sinal de porcentagem. Por fim, clique em “Salvar”.

O módulo livre “Câmera no Estúdio (Twitch) JavaScript ” foi criado e está listado junto aos demais.

Agora, precisamos torná-lo visível no site administrável.

Logo abaixo, sob “Aparência”, selecione “Cores e disposição”.

No menu que se encontra ao lado esquerdo, sob “Módulos”, arraste “Módulo livre” para a posição em que deseja exibi-lo no seu site administrável. Recomendamos posicioná-lo no centro do seu site administrável, pois do contrário a visualização será comprometida.

Deslize o cursor do mouse sobre “Módulo não definido” para revelar a opção “Alterar”. Selecione o módulo livre que você acabou de criar e atribua a ele um título. Clique em “Salvar”.

Observação: o nome do módulo livre é visível apenas ao administrador da rádio, dentro do painel de controle, enquanto o “Título” é a informação visível ao visitante.

Clique em “Salvar alterações” no canto superior direito.

Ao acessar o site administrável, o player da sua transmissão de vídeo ao vivo no Twitch está visível na posição previamente selecionada, em uma das LATERAIS do site.

Se você arrastar o módulo para o CENTRO do site administrável sem ajustar os parâmetros de “width” (largura) e “height” (altura) para 600 e 315, respectivamente, no código JavaScript, a exibição do player ficará comprometida, conforme imagem a seguir.

Alterando os valores do módulo conforme mencionado anteriormente, estaremos forçando o player a ser exibido em 600 px de largura e 315 px de altura.

Do mesmo modo, o módulo não pode ser posicionado em uma das laterais com esses valores, vide imagem a seguir. Nesse caso, o mais indicado é mantê-los em 100%.

A vantagem de usar o Twitch perante o YouTube é a desnecessidade de atualizar o módulo com um novo link toda vez que entrar ao vivo, visto que a transmissão de vídeo é resgatada diretamente do seu canal, ao invés de um vídeo.

Agora basta iniciar a sua transmissão de vídeo ao vivo.