Envio de vídeo para YouTube e Vimeo usando componente de tema

[ti0]

Este novo componente de tema permite o upload de vídeos do compositor do Discourse para o YouTube e Vimeo. Para aqueles já familiarizados com o plugin que desenvolvi recentemente, o mesmo agora está disponível neste Componente de Tema, que pode ser adicionado a qualquer tema. Isso torna a instalação muito mais fácil e funciona exatamente da mesma forma que o plugin.

Recursos

Todos os membros do fórum podem fazer upload de vídeos para o Vimeo ou YouTube (os administradores podem escolher habilitar um ou ambos).

Os administradores podem controlar a visualização e a privacidade de incorporação dos vídeos enviados ao Vimeo usando as configurações de administrador.

O usuário pode controlar a privacidade de visualização dos vídeos enviados ao YouTube a partir do modal de upload.

Você pode assistir a uma demonstração do plugin aqui (tudo é o mesmo no componente, exceto pela página de configurações. A página de configurações do componente é encontrada em Admin > Personalizar > Componentes > Upload de Vídeo):

Discourse Video Upload Plugin with YouTube and Vimeo Demo

Configuração

Importante: Para componentes de tema, você precisa garantir que o componente esteja ativado para os temas usados em sua instância (clique em Adicionar todos os temas ou escolha os temas desejados).

A configuração de desenvolvedor para habilitar uploads no YouTube e Vimeo está listada abaixo. Se preferir que alguém faça isso por você, pode solicitar suporte entrando em contato comigo, @ti0.

Para Uploads no YouTube

Os uploads no YouTube vão para a conta do uploader, ao contrário dos uploads no Vimeo, que vão para uma conta comum.

Ver etapas

• Crie uma conta e um projeto em https://console.developers.google.com

• Ative a YouTube Data API v3

• Configure a tela de consentimento OAuth para usuários externos (a menos que todos os usuários do seu fórum Discourse pertençam a uma única organização Google).

• Configure suas credenciais:

  • Crie um ID de cliente OAuth
  • Escolha o tipo de Aplicação Web
  • Adicione a URL da sua instância Discourse na seção Origens de JavaScript Autorizadas

• Copie apenas o ID do cliente gerado

• Acesse a página de configurações do componente no Admin do Discourse e cole o ID do cliente no campo youtube api client id.

• Habilite os uploads no YouTube ativando esta configuração: youtube upload enabled

• Ajuste as opções de privacidade de visualização padrão para o YouTube, se necessário.

• Agora você deve ser capaz de fazer upload de vídeos diretamente do compositor de tópicos do Discourse para o YouTube.

Para Uploads no Vimeo

Depois de configurar o componente com as etapas abaixo, todos os usuários da comunidade poderão fazer upload de vídeos para sua conta do Vimeo.

Você é responsável pelos limites e pelo uso da sua conta do Vimeo.

Ver etapas

• Crie uma conta e um aplicativo no Vimeo Developers:
  https://developer.vimeo.com/apps/new

• Gere um token de acesso com permissões de Upload

• Acesse a página de configurações do componente no seu Admin do Discourse, adicione o token de acesso gerado na configuração vimeo api access token e salve

• Habilite os uploads no Vimeo ativando a configuração vimeo upload enabled.

• Ajuste as opções de privacidade de visualização e incorporação

  • Veja esta página do Vimeo para as opções de privacidade: privacy.view e privacy.embed

• Agora você deve ser capaz de fazer upload de vídeos diretamente do compositor de tópicos do Discourse para o Vimeo

Publicar um vídeo

• Para publicar um vídeo, crie um novo Tópico ou responda a um tópico existente.

• Clique no novo botão Upload to Video na barra de ferramentas do compositor (o ícone de vídeo). Este botão só é visível se você tiver habilitado o YouTube ou o Vimeo (ou ambos) nas configurações do plugin.

• Escolha um arquivo de vídeo e edite os detalhes, como título e descrição, se desejar.

• Clique no botão Upload para Vimeo ou Upload para YouTube.

  • Os botões exibidos dependerão de se você habilitou os uploads no YouTube/Vimeo (um ou ambos).

  • Ele mostrará o progresso do upload e, em seguida, aguardará até que o vídeo conclua o processo de transcodificação.

  • O modal permanecerá aberto até que a transcodificação seja concluída.

  • Assim que a transcodificação for concluída, o link do vídeo será adicionado ao compositor (a menos que tenha ocorrido um erro de transcodificação).

• Salve a postagem e seu vídeo poderá ser visualizado por todos os outros usuários da comunidade (dependendo das opções de privacidade selecionadas).

Solicitações de Recursos

Você pode solicitar recursos adicionais ou suporte entrando em contato comigo @ti0.

Contribuições

Se você achou este componente de tema útil, considere fazer uma doação ao desenvolvedor usando este link do PayPal: PayPal.Me

Contribuições grandes e pequenas são igualmente bem-vindas

Se você deseja aprimorar o componente/plugin, PRs são bem-vindos.

	Pré-visualização	Pré-visualização do criador de temas
	Repositório	discourse-video-upload
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo em Temas do Discourse?	Guia para iniciantes sobre o uso de Temas do Discourse

[Canapin (Coin-coin le Canapin)]

@ti0

Isso torna a instalação muito mais fácil e funciona exatamente da mesma forma que o plugin.

O plugin será descontinuado então?

[ti0]

Não agora, mas acho que será muito mais fácil apenas manter o componente de tema. Vou manter o plugin por enquanto, mas recomendo migrar para o componente de tema.

[Don]

Obrigado @ti0 Isso é incrível novamente É muito mais fácil usar um componente de tema do que um plugin.

Uma pergunta. Você pode adicionar estes textos para traduzir? Carregando, Transcodificando Vídeo e o título, descrição etc. dos detalhes do vídeo? Obrigado!

[ti0]

@Don todos os rótulos no componente agora podem ser personalizados

[Don]

Olá

Gosto muito do seu componente, obrigado por criá-lo.

Funcionou muito bem, mas agora temos alguns problemas
Às vezes, ocorre um erro durante a transcodificação de vídeo (apenas arquivos mp4) status.error.transcode. O vídeo é carregado corretamente, mas só aparece no Vimeo e não insere o link no compositor.

O outro problema é que não conseguimos fazer upload de arquivos mp4 pelo navegador Safari no MacOS.

É possível resolver esses problemas de alguma forma?

Obrigado pela resposta!

[ti0]

Olá @Don, obrigado por identificar esse caso limite no Safari do MacOS. Parece ser um problema no Safari (uma referência no SO). Corrigi esse problema no componente do tema, então, após atualizá-lo e atualizar a página, você deverá conseguir fazer upload de arquivos MP4 pelo Safari. Acabei de testar na minha própria máquina e agora funciona.

Quanto aos erros de transcodificação, isso ocorre no lado do Vimeo; não há nada que possamos fazer do nosso lado.

[Don]

Obrigado pela correção rápida! Agora funciona muito bem no Safari

[Don]

Olá @ti0,

Parece que o mecanismo de upload do Vimeo mudou. Quando colocamos o link no editor do fórum, o Vimeo começa a converter o vídeo. Por isso, o vídeo não pode ser incorporado e reproduzido no fórum, pois ainda não está pronto. Obrigado pela sua ajuda!

[anon82467725]

@Don

O outro problema é que não conseguimos fazer upload de arquivos mp4 no navegador Safari do MacOS.

Aqui também, mas o problema agora parece afetar o Mozilla Firefox em todas as plataformas.

Houve alguns outros problemas que ocorreram no Mozilla Firefox, mas terei que verificar esses problemas novamente para fornecer mais esclarecimentos.

[Don]

Então, acho que o problema é o seguinte. No Vimeo, há uma seção Aguardando conversão após o Upload, mas antes da Conversão.

No componente, há um
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

Se eu estiver correto, isso significa que, após o processo de upload, é enviada uma solicitação ao Vimeo a cada 10 segundos, o que faz com que o processo de “Aguardando” retorne como vídeo concluído. Como a API do Vimeo não suporta Webhooks etc., precisamos enviar solicitações periodicamente para verificar se o processo de transcodificação ainda está em andamento ou se foi concluído.

Mudei isso para 60 segundos para nós, até que surja uma solução melhor; isso será suficiente para a maioria dos uploads pular a solicitação do processo de “Aguardando”. Testei com uploads pequenos de ~10 MB, médios de ~500 MB e grandes de ~2 GB.
Com uploads pequenos, o tempo de espera é de alguns segundos (~4-5 s), para os médios é de ~10-15 s e, para os grandes, ~40-45 s. Acredito que isso dependa do tamanho do arquivo enviado.
Parece funcionar, mas se o processo de “Aguardando conversão” levar mais de 60 segundos, o link será colado da mesma forma que antes. Seria bom conseguir pular esse processo de “Aguardando”.

[Zup]

Eu prefiro que os uploads do Vimeo vão para a conta do uploader, em vez da minha conta comum… é possível?

[linzo (Collins)]

@ti0 Não sei se é só comigo, mas acho que algo está quebrado. O upload está travado em Autenticando e o seguinte erro é exibido no Console do Chrome

Alguns recursos estão bloqueados porque sua origem não está listada na Política de Segurança de Conteúdo (CSP) do seu site. A CSP do seu site é baseada em lista de permissões, então os recursos devem estar listados na lista de permissões para serem acessados.

A Política de Segurança de Conteúdo de um site é definida seja via um cabeçalho HTTP (recomendado) ou via uma tag meta HTML.

Para corrigir esse problema, faça uma das seguintes opções:

1. (Recomendado) Se você estiver usando uma lista de permissões para `'script-src'`, considere trocar de uma CSP baseada em lista de permissões para uma CSP estrita, pois CSPs estritas são mais robustas contra XSS. Veja como configurar uma CSP estrita.

2. Ou verifique cuidadosamente se todos os recursos bloqueados são confiáveis; se forem, inclua suas fontes na CSP do seu site. ⚠️Nunca adicione uma fonte que você não confia à CSP do seu site. Se você não confia na fonte, considere hospedar os recursos no seu próprio site.

RECURSOS AFETADOS
https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0?le=ili,ipu,ili,ipu`

bloqueado script-src-elem api.js:12

[ti0]

@linzo, isso é um problema de CSP, não tem nada a ver com o componente do tema. Por favor, leia sobre o CSP do Discourse aqui: Mitigate XSS Attacks with Content Security Policy

@Zup

Eu preferiria que os uploads do Vimeo fossem para a conta do uploader em vez da minha conta comum… é possível?

@Zup, isso é uma solicitação de recurso adicional — possível, claro, mas representa trabalho extra que precisará ser pago se você quiser que seja implementado. Me avise se quiser isso.

@Don

Então o vídeo não pode ser exibido em caixa única e reproduzido no fórum porque ainda não está pronto.

Desculpe pela resposta tardia — sim, há um processo de transcodificação após o upload, e o diálogo de upload mostrará isso antes de incorporar o vídeo. Isso está funcionando como esperado no meu lado. Ele aguarda até que a transcodificação seja concluída; só então fecha o diálogo e incorpora o vídeo. Aqui está uma demonstração:

[debryc (Deborah Chang)]

Estou muito animado com o potencial deste componente de tema. Esse componente também funciona no celular? Ou seja, se eu estiver no meu telefone, consigo fazer upload de um vídeo da minha galeria de fotos?

Tentei visualizá-lo na prévia do Criador de Temas e recebi uma mensagem de “Acesso Negado”.

[Don]

Oi Deborah,

Usamos no nosso fórum com uploads do Vimeo e funciona muito bem em todos os dispositivos. O processo de seleção é o mesmo do Discourse, mas depois de escolher o vídeo, você precisa clicar no botão “Upload Vimeo” ou “YouTube” para iniciar o upload.

[debryc (Deborah Chang)]

Seu fórum é público? Posso dar uma olhada? Adoraria vê-lo em ação! Qual é a URL?

[davidkingham]

Isso está funcionando muito bem! Seria ótimo ter a opção de fazer o upload dos vídeos para uma pasta específica no Vimeo, para que eu possa separar os uploads dos usuários dos meus próprios. Obrigado por isso!

[ti0]

Fico feliz que tenha gostado Se você estiver disposto a contribuir com essa solicitação de recurso, posso implementá-la ou você pode enviar um PR. Me avise.

[debryc (Deborah Chang)]

Os vídeos podem ser legendados automaticamente e as legendas exibidas por padrão? Isso é realmente importante para nós em termos de acessibilidade.