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.
