Explicação detalhada de ideias para implementar a função de transmissão ao vivo de vídeo em HTML5

Não muito tempo atrás, reservei um tempo para fazer algumas pesquisas e explorar a transmissão ao vivo de vídeo atualmente popular, entender seu processo geral de implementação e explorar a viabilidade da transmissão ao vivo em HTML5 para dispositivos móveis.

Verifica-se que as atuais soluções convencionais de transmissão de vídeo ao vivo na WEB são HLS e RTMP. A extremidade da WEB móvel é atualmente baseada em HLS (HLS tem problemas de latência e RTMP também pode ser usado com a ajuda de video.js). a extremidade do PC é baseada em RTMP, que tem melhor desempenho em tempo real, então começaremos a compartilhar o tema da transmissão ao vivo H5 em torno desses dois protocolos de streaming de vídeo.

HTTP Live Streaming (HLS, abreviadamente) é um protocolo de streaming de vídeo baseado em HTTP implementado pela Apple e Safari no Mac OS e Safari no iOS, todos com suporte para HLS. Alguns clientes comuns, como MPlayerX e VLC, também suportam o protocolo HLS.

O protocolo HLS é baseado em HTTP, e um servidor que fornece HLS precisa fazer duas coisas:

Codificação: Codifique imagens no formato H.263, codifique sons em MP3 ou HE-AAC e, finalmente, empacote-os em contêineres MPEG-2 TS (Transport Stream). Divisão: Corte os arquivos TS codificados em comprimentos iguais Um pequeno arquivo com o sufixo; ts e gera um arquivo de índice de texto simples .m3u8; o navegador usa arquivos m3u8. m3u8 é muito semelhante ao formato de lista de áudio m3u. Você pode simplesmente pensar em m3u8 como uma lista de reprodução contendo vários arquivos ts. O player os reproduz um por um em ordem e, em seguida, solicita o arquivo m3u8 após reproduzi-los todos e obtém a lista de reprodução contendo o arquivo ts mais recente para continuar a reprodução e o ciclo recomeça. Todo o processo de transmissão ao vivo depende de um m3u8 constantemente atualizado e vários pequenos arquivos ts m3u8 devem ser atualizados dinamicamente e os ts podem passar pelo CDN. Um formato de arquivo m3u8 típico é o seguinte:

 #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000gear1/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111gear2/prog_index.m3u8#EXT-X -STREAM -INF:ID DO PROGRAMA=1, BANDWIDTH=484444gear3/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777gear4/prog_index.m3u8

Percebe-se que a essência do protocolo HLS ainda é uma solicitação/resposta HTTP, portanto possui boa adaptabilidade e não será afetado por firewalls. Mas também tem uma fraqueza fatal: o atraso é muito óbvio. Se cada ts for dividido em 5 segundos e um m3u8 contiver 6 índices ts, causará um atraso de pelo menos 30 segundos. Se você reduzir o comprimento de cada ts e reduzir o número de índices em m3u8, o atraso será realmente reduzido, mas causará buffering mais frequente e a pressão de solicitação no servidor também aumentará exponencialmente. Portanto, só podemos encontrar um ponto de compromisso com base na situação real.

Para navegadores que suportam HLS, basta escrever isto para jogar:

 <vídeo src=./bipbopall.m3u8″ altura=300″ largura=400″ preload=auto autoplay=autoplay loop=loop webkit-playsinline=true></video>

Observação: o HLS oferece suporte apenas ao navegador Safari no PC, semelhante ao navegador Chrome usando vídeo HTML5

A tag não pode reproduzir o formato m3u8. Você pode usar diretamente algumas soluções relativamente maduras na Internet, como: sewise-player, MediaElement, videojs-contrib-hls e jwplayer.

O Real Time Messaging Protocol (RTMP, abreviadamente) é um conjunto de protocolos de transmissão de vídeo ao vivo desenvolvido pela Macromedia e agora pertence à Adobe. Esta solução requer a construção de um serviço especializado de streaming RTMP, como o Adobe Media Server, e apenas o Flash pode ser usado para implementar o player no navegador. Seu desempenho em tempo real é muito bom e o atraso é muito pequeno, mas sua desvantagem é que ele não suporta reprodução WEB móvel.

Embora não possa ser reproduzido na página H5 do iOS, você pode escrever sua própria decodificação e análise para aplicativos iOS nativos com baixa latência e bom desempenho em tempo real. Lado do navegador, vídeo HTML5

A tag não pode reproduzir vídeos do protocolo RTMP, o que pode ser feito por meio de video.js.

 <link href=http://vjs.zencdn.net/5.8.8/video-js.css rel=stylesheet><video id=example_video_1″ class=video-js vjs-default-skin controla preload=auto width=640 altura=264 loop=loop webkit-playsinline><fonte src=rtmp://10.14.221.17:1935/rtmplive/home type='rtmp/flv '></video><script src=http://vjs.zencdn.net/5.8.8/video.js>< /script><script>videojs.options.flash.swf = 'video.swf ';videojs('example_video_1′).ready(function() {this.play();});</script>

Atualmente, os formatos de exibição de transmissão ao vivo são geralmente dominados por páginas como YY Live e Yingke Live. Você pode ver que sua estrutura pode ser dividida em três camadas:

① Camada de vídeo de fundo

② Módulo de seguir e comentar

③ Gosto de animação

O H5 atual é semelhante a uma página de transmissão ao vivo e sua implementação não é tecnicamente difícil. Pode ser dividida em:

① O fundo do vídeo na parte inferior usa a tag de vídeo para reproduzir

② O módulo de acompanhamento e comentários usa WebScoket para enviar e receber novas mensagens em tempo real através de DOM e CSS3.

③ Curta e use animação CSS3

Depois de entender o formato da transmissão ao vivo, vamos entender o processo de transmissão ao vivo como um todo.

O processo geral de transmissão ao vivo pode ser dividido em:

Fim da coleta de vídeo: Pode ser o dispositivo de entrada de áudio e vídeo do computador, ou a câmera ou microfone do celular Atualmente, o vídeo do celular é o principal.

Servidor de streaming de vídeo ao vivo: um servidor Nginx coleta o fluxo de vídeo (codificação H264/ACC) transmitido pelo final da gravação de vídeo, analisa e codifica-o no lado do servidor e envia o fluxo de vídeo no formato RTMP/HLS para o final da reprodução de vídeo.

Player de vídeo: Pode ser o player do computador (QuickTime Player, VLC), o player nativo do celular, ou a tag de vídeo do H5, etc. Atualmente, o player nativo do celular é o principal.

(Grupo de intercâmbio de aprendizagem front-end da Web: 328058344. O bate-papo é proibido. Se você não estiver interessado, não entre!)

Para gravação de vídeo H5, você pode usar o poderoso webRTC (Web Real-Time Communication), que é uma tecnologia que suporta navegadores da web para conversas de voz ou vídeo em tempo real. e não muito bem em dispositivos móveis.

Processo básico de gravação de vídeo usando webRTC

① Chame window.navigator.webkitGetUserMedia()

Obtenha os dados de vídeo da câmera do PC do usuário.

② Converta os dados do stream de vídeo obtidos em window.webkitRTCPeerConnection

(um formato de dados de streaming de vídeo).

③ Use WebScoket

Transmita dados de streaming de vídeo para o servidor.

Perceber:

Embora o Google tenha promovido o WebRTC e muitos produtos maduros tenham aparecido, a maioria dos navegadores móveis ainda não suporta webRTC (o iOS 10.0 mais recente não oferece suporte), então a gravação de vídeo real ainda depende do cliente (iOS, Android), do efeito será melhor.

Suporte WebRTC

Suporte WebRTC

Aplicativo nativo do iOS chama a câmera para gravar o processo de vídeo

① Para coleta de áudio e vídeo, o fluxo de dados de áudio e vídeo original pode ser coletado usando AVCaptureSession e AVCaptureDevice.

② Codifique H264 para vídeo e AAC para áudio. Existem bibliotecas de codificação encapsuladas (codificação x264, codificação faac, codificação ffmpeg) no iOS para codificar áudio e vídeo.

③ Reúna os dados codificados de áudio e vídeo em pacotes.

④ Estabeleça uma conexão RTMP e envie-a para o servidor.

5. Construir Ng

Instale nginx, módulo nginx-rtmp

① Primeiro clone o projeto nginx localmente:

preparar torneira homebrew/nginx

② Execute e instale o módulo nginx-rtmp

preparar instalação nginx-full –com-rtmp-module

2. Arquivo de configuração nginx.conf, configure RTMP e HLS

Encontre o arquivo de configuração nginx.conf (path/usr/local/etc/nginx/nginx.conf) e configure RTMP e HLS.

① Adicione o conteúdo de configuração rtmp antes do nó http:

② Adicionar configuração hls em http

Reinicie o serviço nginx, digite http://localhost:8080 no navegador e verifique se a interface de boas-vindas aparece para confirmar que o nginx foi reiniciado com sucesso.

nginx -s recarregar

Quando o servidor recebe o fluxo de vídeo transmitido do final da gravação de vídeo, ele precisa analisá-lo e codificá-lo e enviar o fluxo de vídeo no formato RTMP/HLS para o reprodutor de vídeo. Soluções comuns de biblioteca de codificação comumente usadas, como codificação x264, codificação faac, codificação ffmpeg, etc. Como a ferramenta FFmpeg integra múltiplas codificações de formato de áudio e vídeo, podemos dar prioridade ao uso do FFmpeg para conversão, codificação e streaming de formato.

1.Instale a ferramenta FFmpeg

preparar instalar ffmpeg

2. Envie arquivos MP4

Endereço do arquivo de vídeo:/Users/gao/Desktop/video/test.mp4

Endereços de streaming push e pull: rtmp://localhost:1935/rtmplive/home, rtmp://localhost:1935/rtmplive/home

 // Fluxo de protocolo RTMP ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home//fluxo de protocolo HLS ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile linha de base -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

Perceber:

Depois de enviar o stream, podemos instalar o VLC e o ffplay (um reprodutor de vídeo que suporta o protocolo rtmp) para extrair o stream localmente para demonstração.

① Arquivos de vídeo para transmissão ao vivo

 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile linha de base -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101: 1935/hls/testffmpeg-re-i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile linha de base -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② Câmera de streaming push + desktop + gravação de microfone para transmissão ao vivo

 ffmpeg -f avfoundation -framerate 30 -i 1:0″ /-f avfoundation -framerate 30 -video_size 640x480 -i 0 /-c:v libx264 -preset ultrafast /-filter_complex 'overlay=main_w-overlay_w-10:main_h-overlay_h -10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

Para mais comandos, consulte:

Uma lista completa de comandos FFmpeg para processamento de mídia de streaming RTMP

Comandos de streaming comumente usados ​​do FFmpeg

Os terminais móveis iOS e Android suportam naturalmente o protocolo HLS. Após o término da coleta de vídeo e a conclusão do serviço push de streaming de vídeo, você pode configurar diretamente a tag de vídeo na página H5 para reproduzir o vídeo ao vivo.

 <controles de vídeo preload=auto autoplay=autoplay loop=loop webkit-playsinline><source src=http://10.14.221.8/hls/test.m3u8″ type=application/vnd.apple.mpegurl /><p class=warning >Seu navegador não suporta vídeo HTML5.</p></video>

Este artigo detalha todo o processo de coleta e upload de vídeo, processamento de servidor de envio de vídeo e reprodução de página H5 de vídeo ao vivo. Ele detalha os princípios da implementação de transmissão ao vivo. Muitos problemas de otimização de desempenho serão encontrados durante o processo de implementação.

① A restrição H5 HLS deve ser a codificação H264 + AAC.

② O problema de reprodução do H5 HLS está travado. O lado do servidor pode implementar uma estratégia de fragmentação, colocar os arquivos ts no CDN e o front-end pode tentar implementar o cache DNS, etc.

③ Para obter uma melhor interação em tempo real, a transmissão ao vivo H5 também pode usar o protocolo RTMP e realizar a reprodução por meio de video.js.

A descrição acima é uma explicação detalhada da função de transmissão ao vivo de vídeo HTML5 introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!