FMUSER Transmitir vídeo e áudio sem fio mais fácil!
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org -> Afrikaans
sq.fmuser.org -> albanês
ar.fmuser.org -> árabe
hy.fmuser.org -> armênio
az.fmuser.org -> Azerbaijão
eu.fmuser.org -> Basco
be.fmuser.org -> bielorrusso
bg.fmuser.org -> búlgaro
ca.fmuser.org -> catalão
zh-CN.fmuser.org -> Chinês (simplificado)
zh-TW.fmuser.org -> chinês (tradicional)
hr.fmuser.org -> croata
cs.fmuser.org -> checo
da.fmuser.org -> dinamarquês
nl.fmuser.org -> holandês
et.fmuser.org -> estoniano
tl.fmuser.org -> filipino
fi.fmuser.org -> finlandês
fr.fmuser.org -> francês
gl.fmuser.org -> galego
ka.fmuser.org -> georgiano
de.fmuser.org -> alemão
el.fmuser.org -> grego
ht.fmuser.org -> crioulo haitiano
iw.fmuser.org -> hebraico
hi.fmuser.org -> Hindi
hu.fmuser.org -> húngaro
is.fmuser.org -> islandês
id.fmuser.org -> indonésio
ga.fmuser.org -> irlandês
it.fmuser.org -> italiano
ja.fmuser.org -> Japonês
ko.fmuser.org -> coreano
lv.fmuser.org -> letão
lt.fmuser.org -> Lituano
mk.fmuser.org -> macedônio
ms.fmuser.org -> malaio
mt.fmuser.org -> maltês
no.fmuser.org - norueguês
fa.fmuser.org -> persa
pl.fmuser.org -> polonês
pt.fmuser.org -> português
ro.fmuser.org -> romeno
ru.fmuser.org -> russo
sr.fmuser.org -> Sérvio
sk.fmuser.org -> Eslovaco
sl.fmuser.org -> esloveno
es.fmuser.org -> espanhol
sw.fmuser.org -> Swahili
sv.fmuser.org -> sueco
th.fmuser.org -> Tailandês
tr.fmuser.org -> turco
uk.fmuser.org -> ucraniano
ur.fmuser.org -> Urdu
vi.fmuser.org -> vietnamita
cy.fmuser.org -> Galês
yi.fmuser.org -> iídiche
1 、 Desenvolvimento de transmissão ao vivo de vídeo móvel
Pode-se ver que, do PC ao celular, cada vez mais aplicativos de transmissão ao vivo estão online, e a transmissão móvel entrou em um estágio de explosão sem precedentes. No entanto, para a maioria das transmissões ao vivo para dispositivos móveis, ainda é implementado principalmente por clientes nativos, mas o HTML5 também desempenha um papel insubstituível na extremidade da transmissão ao vivo móvel, como o HTML5. Com as vantagens da transmissão rápida e fácil de liberar, o HTML5 também pode ser reproduzido ao vivo vídeo quando é o mais importante.
A transmissão ao vivo completa pode ser dividida em:
(1) Terminal de gravação de vídeo: Em geral, é um dispositivo de entrada de áudio e vídeo de computador ou uma câmera ou microfone no terminal móvel. Atualmente, o vídeo do celular é a parte principal.
(2) Player de vídeo: pode ser um player no computador, um player nativo no lado do telefone móvel e um rótulo de vídeo de HTML5. No momento, ainda é o principal player nativo do telefone móvel.
(3) Servidor de vídeo: geralmente, é um servidor nginx, que é usado para aceitar a fonte de vídeo fornecida pelo lado da gravação de vídeo e fornecer o serviço de streaming até o final da reprodução do vídeo.
2 、 Gravação de vídeo em HTML5:
Para gravação de vídeo HTML5, o poderoso webrtc (comunicação em tempo real WEB) é uma tecnologia que suporta conversação de voz ou vídeo em tempo real no navegador da web. A desvantagem é que ele só suporta melhor no cromo do PC e o lado móvel não é o ideal.
O processo básico de gravação de vídeo com webrtc é:
Chame window.navigator.webkitGetUserMedia (obtenha os dados de vídeo da câmera do PC do usuário).
Converta os dados adquiridos em dados de fluxo de vídeo em window.webkitRTCPeerConnection (um formato de dados de fluxo de vídeo).
Usando websocket para transferir dados de stream de vídeo para o servidor
Como muitos métodos precisam ser prefixados com o navegador, muitos navegadores móveis não suportam webrtc, então a gravação de vídeo real ainda é implementada pelo cliente (IOS, Android) e o efeito será melhor.
3 、 HTML5 transmitindo vídeo ao vivo:
Para a reprodução de vídeo, você pode usar o protocolo HLS (HTTP live streaming) para reproduzir a transmissão ao vivo. IOS e Android suportam esse protocolo naturalmente. É simples configurar e usar tags de vídeo diretamente.
Aqui está um código simples para reproduzir vídeo ao vivo usando vídeo:
(1) o que é o protocolo HLS:
Em suma, todo o fluxo é dividido em pequenos arquivos, que são baixados com base em HTTP. Apenas alguns são baixados por vez. O arquivo .M3u8 mencionado anteriormente, introduzido na transmissão de vídeo ao vivo em HTML5, é baseado no protocolo HLS, que armazena os metadados do fluxo de vídeo.
Cada arquivo.M3u8 corresponde a vários arquivos TS, que são os dados para o armazenamento de vídeo real. O arquivo m3u8 armazena apenas as informações de configuração e caminhos relacionados de alguns arquivos TS. Quando o vídeo é reproduzido, o arquivo .M3u8 é alterado dinamicamente. O rótulo do vídeo analisará o arquivo e encontrará o arquivo TS correspondente para reproduzir. Portanto, para acelerar a velocidade, o arquivo .M3u8 será usado para analisar o arquivo e localizar o arquivo TS correspondente para reprodução. Portanto, para acelerar a velocidade, o arquivo.M3u8 será usado para analisar o arquivo e localizar o arquivo TS correspondente para reprodução. Portanto, para agilizar, coloque-o no servidor web e o arquivo TS no CDN.
O arquivo.M3u8 é na verdade um arquivo M3U codificado com UTF-8. Este arquivo não pode ser reproduzido sozinho, mas apenas o arquivo de texto que contém as informações de reprodução.
(2) Processo de solicitação HLS:
O URL da solicitação HTTP m3u8.
O servidor retorna uma lista de reprodução de m3u8, que é atualizada em tempo real. Geralmente, a URL de 5 segmentos de dados é fornecida por vez.
O cliente analisa a lista de reprodução de m3u8 e, em seguida, solicita a URL de cada segmento para obter o fluxo de dados TS.
(3) Atraso de transmissão ao vivo HLS:
Sabemos que o protocolo HLS divide a transmissão ao vivo em um pequeno segmento de vídeo para baixar e reproduzir. Portanto, suponha que a lista contenha 5 arquivos TS, cada arquivo TS contém 5 segundos de conteúdo de vídeo e o atraso geral é de 25 segundos. Porque quando você vê esses vídeos, o apresentador gravou o vídeo e o carregou, então o atraso é causado por isso. Obviamente, o comprimento da lista e o tamanho de um único arquivo TS podem ser encurtados para reduzir o atraso. No extremo, o comprimento da lista pode ser reduzido para 1 e a duração do TS é 1s. No entanto, isso aumentará o número de solicitações e aumentará a pressão do servidor. Quando a velocidade da rede é lenta, mais buffer será gerado. Portanto, o tempo de TS recomendado pela Apple oficialmente dura 10s, então mudará muito o atraso de 30s. Assim, o servidor recebe o fluxo, transcodifica, salva, corta o bloco e depois o distribui ao cliente. Aqui está a causa raiz do atraso.
Para mais perguntas sobre atrasos, consulte o endereço oficial da Apple:
https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html
No entanto, o vídeo ao vivo em HTML5 tem algumas vantagens insubstituíveis:
① Boa comunicação, fácil de compartilhar e outras operações.
② Pode ser lançado dinamicamente, o que conduz à iteração em tempo real dos requisitos do produto e ao lançamento rápido.
③ Sem instalar o aplicativo, abra o navegador diretamente.
4 、 Sistema operacional de coleta (gravação) de dados de áudio e vídeo de IOS
Para aquisição e gravação de áudio e vídeo, primeiro, os seguintes conceitos são esclarecidos:
(1) Codificação de vídeo: a codificação de vídeo refere-se à maneira como um arquivo em formato de vídeo é convertido em outro arquivo de formato de vídeo por meio de uma tecnologia de compressão específica. O vídeo gravado pelo iPhone que usamos deve ser codificado, carregado e decodificado antes de ser reproduzido no player do lado do usuário.
(2) Padrão de codec: os padrões de codec mais importantes na transmissão de stream de vídeo incluem H.261, H.263 e H.264 de ITU, nos quais o protocolo HLS suporta a codificação de formato H.264.
(3) Codificação de áudio: semelhante à codificação de vídeo, o fluxo de áudio original é codificado, carregado, decodificado de acordo com certos padrões e reproduzido no player. Obviamente, o áudio também tem muitos padrões de codificação, como código PCM, código wma, código AAC, etc. o método de codificação de áudio compatível com nosso protocolo HLS é o código AAC.
A aquisição de dados de vídeo e áudio é dividida principalmente nas seguintes etapas:
(1) a aquisição de dados de vídeo e áudio usando a câmera no IOS
(2) No IOS, o fluxo de dados de áudio e vídeo original pode ser coletado por uma sessão de captura e um dispositivo de captura.
(3) O vídeo é codificado com h264 e o áudio é codificado AAC. No IOS, já existem bibliotecas de codificação empacotadas para realizar a codificação de áudio e vídeo.
(4) Os dados de áudio e vídeo após a codificação são montados e lacrados;
(5) Estabeleça a conexão RTMP e envie-a para o servidor.
A seguir está o processo específico de coleta de dados de áudio e vídeo:
(1) sobre RTMP:
O protocolo de mensagens em tempo real (RTMP) é um conjunto de protocolos de vídeo ao vivo desenvolvido pela Macromedia e agora pertence à adobe. Tal como acontece com o HLS, pode ser usado para transmissão de vídeo. A diferença é que o RTMP não pode ser reproduzido no navegador IOS baseado em flash, mas é melhor em tempo real do que o HLS. Portanto, esse protocolo é geralmente usado para fazer upload de fluxo de vídeo, ou seja, o fluxo de vídeo é enviado ao servidor.
(2) fluxo de pressão
O chamado streaming refere-se ao envio de dados de áudio e vídeo que codificamos para o servidor de stream de vídeo. No código IOS, o streaming RTMP é comumente usado. Librtmp IOS, uma biblioteca de terceiros, pode ser usada para streaming. Librtmp encapsula algumas APIs principais para os usuários chamarem. Por exemplo, envie a API e assim por diante, configure o endereço do servidor e, em seguida, envie o fluxo de vídeo de transcodificação para o servidor.
Então, como construir um servidor de streaming?
Um servidor de streaming simples é construído. Como o fluxo de vídeo que carregamos é baseado no protocolo RTMP, o servidor deve oferecer suporte a RTMP. Isso pode exigir as seguintes etapas:
(1) Instale um servidor nginx.
(2) A extensão RTMP do nginx está instalada. Configurar o arquivo conf para nginx
(3) Reinicie o nginx e escreva o endereço de streaming de RTMP como rtmp: // ip: 1935 / hls / mystream, onde HLS_ Path representa o endereço dos arquivos gerados.M3u8 e TS, HLS_ Fragment representa o comprimento da fatia e mystream representa uma instância. O nome do arquivo a ser gerado pode ser definido por si mesmo.
5 、 Interação do usuário na transmissão ao vivo:
Para a interação do usuário na transmissão ao vivo, ela pode ser dividida em:
dando presentes.
Para comentar ou jogar
Para entrega de presentes, DOM e CSS3 podem ser usados para realizar a lógica de envio de presentes e alguma animação especial de presente em HTML5. As dificuldades técnicas não são muito grandes.
Para uma barragem, para ser um pouco mais complexa, você pode precisar prestar atenção ao seguinte:
O desempenho em tempo real do projétil pode ser enviado e recebido em tempo real por webscock e renderizado.
Para navegadores que não suportam websocket, eles só podem ser degradados para longas sondagens ou pedidos de envio de cronômetro de front-end para obter pop-up em tempo real.
Animação e detecção de colisão (ou seja, sem sobreposição) e assim por diante na renderização
|
Digite o e-mail para obter uma surpresa
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org -> Afrikaans
sq.fmuser.org -> albanês
ar.fmuser.org -> árabe
hy.fmuser.org -> armênio
az.fmuser.org -> Azerbaijão
eu.fmuser.org -> Basco
be.fmuser.org -> bielorrusso
bg.fmuser.org -> búlgaro
ca.fmuser.org -> catalão
zh-CN.fmuser.org -> Chinês (simplificado)
zh-TW.fmuser.org -> chinês (tradicional)
hr.fmuser.org -> croata
cs.fmuser.org -> checo
da.fmuser.org -> dinamarquês
nl.fmuser.org -> holandês
et.fmuser.org -> estoniano
tl.fmuser.org -> filipino
fi.fmuser.org -> finlandês
fr.fmuser.org -> francês
gl.fmuser.org -> galego
ka.fmuser.org -> georgiano
de.fmuser.org -> alemão
el.fmuser.org -> grego
ht.fmuser.org -> crioulo haitiano
iw.fmuser.org -> hebraico
hi.fmuser.org -> Hindi
hu.fmuser.org -> húngaro
is.fmuser.org -> islandês
id.fmuser.org -> indonésio
ga.fmuser.org -> irlandês
it.fmuser.org -> italiano
ja.fmuser.org -> Japonês
ko.fmuser.org -> coreano
lv.fmuser.org -> letão
lt.fmuser.org -> Lituano
mk.fmuser.org -> macedônio
ms.fmuser.org -> malaio
mt.fmuser.org -> maltês
no.fmuser.org - norueguês
fa.fmuser.org -> persa
pl.fmuser.org -> polonês
pt.fmuser.org -> português
ro.fmuser.org -> romeno
ru.fmuser.org -> russo
sr.fmuser.org -> Sérvio
sk.fmuser.org -> Eslovaco
sl.fmuser.org -> esloveno
es.fmuser.org -> espanhol
sw.fmuser.org -> Swahili
sv.fmuser.org -> sueco
th.fmuser.org -> Tailandês
tr.fmuser.org -> turco
uk.fmuser.org -> ucraniano
ur.fmuser.org -> Urdu
vi.fmuser.org -> vietnamita
cy.fmuser.org -> Galês
yi.fmuser.org -> iídiche
FMUSER Transmitir vídeo e áudio sem fio mais fácil!
Contato
Endereço:
No.305 Sala HuiLan Edifício No.273 Huanpu Road Guangzhou China 510620
Categorias
Newsletter