Código de exemplo HTML5 para reproduzir vídeo RTSP

Atualmente, a maioria das câmeras web transmite fluxos de vídeo por meio do protocolo RTSP, mas o HTML não oferece suporte padrão a fluxos RTSP. Exceto o navegador Firefox, que pode reproduzir fluxos RTSP diretamente, quase nenhum outro navegador pode reproduzir fluxos RTSP diretamente. Os aplicativos Electron são baseados no kernel Chromium, portanto, não podem reproduzir fluxos RTSP diretamente.

Com a ajuda de certas ferramentas, os fluxos RTSP podem ser reproduzidos em páginas da Web. O método apresentado neste artigo pode ser aplicado a aplicativos Web tradicionais e aplicativos Electron. A única diferença é que o processo principal do aplicativo Electron é usado como servidor do aplicativo Web tradicional.

Por se tratar de uma transmissão ao vivo, o atraso precisa ser baixo. Quando a câmera fica offline, também deve haver um determinado aviso de evento. Nestes dois pontos, compararemos as soluções de reprodução RTSP existentes que foram implementadas sem adquirir uma licença (não as analisaremos por enquanto na fase principal).

Implementei todos os quatro métodos, e o quarto método tem o melhor efeito geral. Ocupa menos portas, tem baixa latência, tem velocidade de renderização rápida e é fácil de lidar com eventos offline.

flv.js é um navegador HTML5 de código aberto da Bilibili. Contando com o Media Source Extension para reprodução de vídeo, o vídeo é transmitido através do protocolo HTTP-FLV ou WebSocket-FLV, e o formato do vídeo precisa ser FLV.

O lado do servidor é escrito usando a estrutura express + express-ws. Quando uma solicitação HTTP é enviada para o endereço especificado, o programa de streaming ffmpeg é iniciado, o fluxo RTSP é encapsulado diretamente em um fluxo de vídeo no formato FLV e enviado para o. fluxo de resposta WebSocket especificado.

 importar * como expresso de expresso; importar * como expressWebSocket de express-ws; importar ffmpeg de fluent-ffmpeg; importar webSocketStream de websocket-stream/stream; importar WebSocket de websocket-stream; importar * como http de http; função localServer() { deixe app = express(); app.use(express.static(__dirname)); perMessageDeflate: true }); app.ws(/rtsp/:id/, rtspRequestHandle) app.listen(8888); console.log(expresso escutado)}function rtspRequestHandle(ws, req) { console.log(identificador de solicitação rtsp) ; const stream = webSocketStream(ws, {binário: true, browserBufferTimeout: 1000000 }, { browserBufferTimeout: 1000000 }); deixe url = req.query.url; console.log(rtsp url:, url); console.log(rtsp params:, req.params); , tcp, -buffer_size, 102400) // Você pode adicionar algum RTSP aqui Parâmetros otimizados.on(start, function () { console.log(url, Stream iniciado.); }) .on(codecData, function () { console.log(url, Stream codecData.) // Processamento online da câmera} ) .on(error, function (err) { console.log(url, Ocorreu um erro:, err.message); }) .on(end, function () { console.log(url, Stream end!); // Tratamento de desconexão da câmera}) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream } catch (error) { console.log(error }});

Para obter menor tempo de carregamento, você pode adicionar os seguintes parâmetros ao ffmpeg:

• a duração analisada pode reduzir o tempo necessário para analisar o fluxo de código
• Não me lembro bem da função específica de max_delay escrita nos dados. O efeito não é tão óbvio quanto a análise.

É claro que esta implementação ainda é relativamente difícil. Quando há várias solicitações para o mesmo endereço, a saída do ffmpeg deve ser aumentada em vez de iniciar um novo fluxo de processo ffmpeg.

O exemplo usa a estrutura Vue para design de página.

 <template> <div> <video class=demo-video ref=player></video> </div></template><script>importar flvjs de flv.js;exportar padrão { adereços: { rtsp: String, id : String }, /** * @returns {{player: flvjs.Player}} */ data () { return { player: null } }, montado () { if (flvjs.isSupported()) { let video = this.$refs.player; if (video) { this.player = flvjs.createPlayer({ type: flv, isLive: true, url: `ws://localhost:8888 /rtsp/${this.id}/?url=${this.rtsp}` }); this.player.attachMediaElement(vídeo); this.player.load(); this.player.play(); /script><style> .demo-video {largura máxima: 480px; altura máxima: 360px;

A página Electron é usada para exibir 7 câmeras Hikvison NVR, que podem atingir baixa latência, baixo uso de CPU e sem distorção de tela. Devido à confidencialidade, não postarei capturas de tela aqui.

Da mesma forma, reproduzi 9 vídeos locais em 1080p "White Deer Plain" para ver o efeito.

O efeito de reprodução é muito bom, não há atraso ou desfoque e o uso da CPU não é alto.

Repositório de código de exemplo: WhuRS-FGis/html5-rtsp Repositório de código de exemplo:

O código acima é o código de exemplo para reproduzir vídeo RTSP em HTML5 apresentado 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!

Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!