Incorporar Owncast no Seu Site

Incorporando vídeo

Owncast suporta a incorporação do seu fluxo de vídeo diretamente em qualquer outro site ou fonte sem precisar configurar um player.

A URL apenas para vídeo do seu conteúdo está em: http://owncast.example.com/embed/video.

Aqui está um exemplo de HTML que você pode usar.

<iframe
  src="https://owncast.example.com/embed/video"
  title="Owncast"
  height="350px"
  width="550px"
  referrerpolicy="origin"
  allowfullscreen
>
</iframe>

Vai parecer algo como:

Autoplay

Se um vídeo incorporado começa a tocar por conta própria depende da configuração de autoplay do seu servidor. Você pode sobrescrever isso para uma única incorporação adicionando ?autoplay= à URL com um dos valores off, always, ou sound-only. Um valor não reconhecido reverte para a configuração do servidor.

A maioria dos navegadores bloqueia autoplay dentro de um iframe em outro site, a menos que a página que faz a incorporação permita com o atributo allow:

<iframe
  src="https://owncast.example.com/embed/video?autoplay=always"
  title="Owncast"
  height="350px"
  width="550px"
  referrerpolicy="origin"
  allow="autoplay"
  allowfullscreen
>
</iframe>

Silenciar

Se você quiser que o player comece silenciado assim que iniciar, adicione ?initiallyMuted=true à URL. Os espectadores ainda podem desmutar manualmente. Combine parâmetros com &, por exemplo ?autoplay=always&initiallyMuted=true.

Uma interação a se ter em mente: sound-only nunca começa em silêncio, então combiná-lo com initiallyMuted=true significa que o player não irá reproduzir automaticamente.

Hiding the follow button

If your server has social features enabled, the embedded player offers a follow button. Hide it for a single embed by appending ?supportsSocialFollow=false to the URL. Any other value keeps the button.

Personalizando o Estilo do Fluxo Incorporado

Você pode facilmente personalizar o estilo do fluxo incorporado do Owncast para combinar com o design do seu site aplicando estilos em CSS. Aqui está como você pode fazer isso:

Crie um Arquivo CSS: Primeiro, crie um arquivo CSS (por exemplo, stream-styles.css) onde você definirá seus estilos personalizados.
Conecte o Arquivo CSS: Na seção <head> do seu documento HTML onde você incorpora o fluxo do Owncast, adicione uma tag <link> para incluir seu arquivo CSS. Certifique-se de adicionar esta linha antes da tag de fechamento </head>:
```
<link rel="stylesheet" href="path/to/stream-styles.css" />
```
Substitua "path/to/stream-styles.css" pelo caminho real do seu arquivo CSS.

Aplique Estilos: Personalize os estilos no seu arquivo stream-styles.css de acordo com suas preferências. Você pode direcionar o elemento \<iframe> usando seletores CSS, conforme mostrado no exemplo abaixo:

/* Style the embedded stream's iframe box */
iframe[title="Owncast"] {
  border: none; /* Remove the iframe border */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Add a subtle shadow for depth */
  border-radius: 10px; /* Rounded corners for a modern look */
  overflow: hidden;
  margin: 0 auto; /* Center the iframe horizontally */
}

Personalize de Acordo com suas Necessidades: Ajuste os valores acima para combinar com o design e layout do seu site.

O fluxo incorporado é uma página separada carregada do seu servidor Owncast, portanto, o CSS do seu site pode estilizar apenas a caixa do \<iframe> em si, não o conteúdo dentro dele. Para mudar as cores, fontes e layout dentro do player, use as configurações de aparência no seu servidor Owncast.

Seguindo esses passos, você pode integrar perfeitamente seu fluxo Owncast em seu site mantendo controle sobre sua aparência visual.

Usando o feed HLS

Desde que o player o suporte, é recomendado abrir a página inicial da sua instância de Owncast diretamente. O player encontrará automaticamente a playlist correta e começará a tocar. Isso garantirá compatibilidade futura caso a maneira como o Owncast publica HLS mude algum dia.

No entanto, se você precisar do feed HLS (ou seja, para compartilhar seu fluxo com um player de terceiros), você pode acessar o feed HLS diretamente através desta URL: http://your.host/hls/stream.m3u8.

Incorporando chat

Owncast suporta a incorporação do seu chat diretamente em qualquer outro site ou fonte.

Existem dois tipos de chats incorporados: Um chat somente leitura que apenas exibe as mensagens e um chat independente que possui a mesma funcionalidade que o da interface web principal do Owncast.

Incorporando chat independente

A URL do chat independente está em: http://owncast.example.com/embed/chat/readwrite. It is the full chat: viewers get a name and can send messages, subject to the same chat rules as your main page.

<iframe
  src="https://owncast.example.com/embed/chat/readwrite"
  title="Owncast chat"
  height="500px"
  width="350px"
></iframe>

Vai parecer algo como:

Incorporar Owncast

Incorporando chat somente leitura

A URL do chat somente leitura está em: http://owncast.example.com/embed/chat/readonly. It shows messages only, with no input for sending them.

<iframe
  src="https://owncast.example.com/embed/chat/readonly"
  title="Owncast chat"
  height="500px"
  width="350px"
></iframe>

Um uso comum do chat somente leitura é adicionar as mensagens de chat ao seu software de transmissão, como uma camada web no OBS.

Usando OBS

Clique no + ou clique com o botão direito do mouse para adicionar uma nova fonte. Escolha Browser na lista.
Para uma nova fonte, você precisará adicionar um nome. Digite "Chat".
Nas configurações da Fonte do Navegador, você precisará alterar a URL para a URL de /embed/chat/readonly da sua instância Owncast.
Você pode usar o CSS Personalizado para ajustar como o navegador exibe seu vídeo. O seguinte exemplo adicionará algum espaço ao redor da caixa, dará um fundo escuro semi-transparente e aumentará o tamanho da fonte geral para uma unidade base de 24px. Você pode alterar qualquer uma dessas configurações para atender ao layout da sua apresentação. Observe que a cor do texto da mensagem geral é branca.
```
html {
  margin: 0px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0);
  font-size: 24px;
}

#chat-container {
  background-color: rgba(0, 0, 0, 0.5);
}
```
Clique em ‘OK’ para salvar suas configurações de chat e reposicionar a nova fonte de chat na sua cena.

Requisitos de SSL

O conteúdo Owncast incorporado que não é servidos via HTTPS dentro de uma página que está usando SSL/TLS é bloqueado pelos navegadores. Saiba como você pode usar um Proxy SSL para atender a esse requisito do navegador e proteger seu site Owncast.