Como posso exibir um fluxo de vídeo RTSP em uma página da web?

Eu tenho uma câmera ip que fornece um fluxo de vídeo RTSP ao vivo. Posso usar o VLC media player para visualizar o feed, fornecendo a ele o URL:

rtsp://cameraipaddress

Mas preciso exibir o feed em uma página da web. O fornecedor da câmera forneceu um controle ActiveX que comecei a funcionar, mas é muito problemático e faz o navegador travar com frequência.

Alguém sabe de algum plug-in de vídeo alternativo que eu possa usar e que suporte RTSP?

A câmera pode ser configurada para transmitir em H264 ou MPEG4.

O VLC também vem com um plug-in ActiveX que pode exibir o feed em uma página da web:

http://wiki.videolan.org/ActiveX/HTML

<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
     codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
     width="640" height="480" id="vlc" events="True">
   <param name="Src" value="rtsp://cameraipaddress" />
   <param name="ShowDisplay" value="True" />
   <param name="AutoLoop" value="False" />
   <param name="AutoPlay" value="True" />
   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://cameraipaddress" ></embed>
</OBJECT>

Não é fácil exibir stream de vídeo ao vivo de uma câmera IP em uma página da web porque você precisa de largura de banda ampla de Internet e um excelente reprodutor de vídeo compatível com os principais navegadores.

Mas, felizmente, existem alguns serviços baseados em nuvem que podem fazer esse trabalho para nós. Um dos melhores é o IPCamLive . Este serviço pode receber stream de vídeo RTSP / H264 de uma câmera IP e pode transmiti-lo aos telespectadores. IPCamLive tem componente de player de vídeo Flash / HTML5 que exibe o vídeo no PC, MAC, tablet ou celular. O melhor é que este site gera o snippet HTML necessário para incorporar o vídeo ao vivo como este:

<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>

Portanto, só precisamos copiar e colar em nosso arquivo HTML sem nenhuma modificação.

Aproximadamente, você pode ter três opções para exibir o fluxo de vídeo RTSP em uma página da web:

1. Jogador real
2. Jogador Quicktime
3. Jogador VLC

Você pode encontrar o código para incorporar o ActiveX por meio da pesquisa do Google.

Pelo que eu sei, existem algumas limitações para cada jogador.

1. O Realplayer não oferece suporte nativo para vídeo H.264, você deve instalar um plugin quicktime para o Realplayer atingir a decodificação H.264.
2. O Quicktime player não suporta transporte RTP / AVP / TCP e seu transporte RTP / AVP (UDP) não inclui perfuração NAT. Portanto, o único transporte viável é o túnel HTTP na implantação de WAN.
3. O VLC não oferece suporte a perfuração de furo NAT para transporte RTP / AVP, mas o transporte RTP / AVP / TCP está disponível.

Se você deseja transmitir RTSP diretamente para a página da web, infelizmente sua única opção é usar um visualizador de controle ActiveX que vem com a câmera. Esta é uma conexão direta IP Cam -> Viewer, e deve ser realmente a mais rápida. Não sei por que você está tendo problemas; Axis ActiveX funciona muito bem para mim.

No entanto, essa opção não é realmente eficiente em termos de largura de banda e você não pode atender a vários visualizadores simultâneos (a maioria das câmeras IP tem limite de 10 visualizadores). A melhor opção é fazer o upload de um único stream RTSP para um servidor de streaming hospedado centralmente, que converterá seu stream em RTMP / MPEG-TS e o publicará em reprodutores Flash / decodificadores.

Wowza, Erlyvideo, Unreal Media Server, Red5 são suas opções.

Encontrou uma solução simples e funcional na documentação oficial do VLC para plug-in da web

https://wiki.videolan.org/Documentation:WebPlugin/

Modifiquei um pouco o código e o fez funcionar. Aqui está o meu código-

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" autoplay="yes" loop="no" width="300" height="200" target="rtsp://10.20.50.15:554/0/888888:888888/main" />
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="display:none;"></object>

Nota: O snippet acima usa o rtspformato de url que é compatível com minha câmera IP. Portanto, você precisa obter o mesmo para sua câmera. Você pode obter essas informações consultando o suporte do fornecedor da câmera. Também tenha em mente que eu testei no Chrome (usando um plug-in ActiveX para Chrome) e outros navegadores (incluindo navegadores de celular) podem não ser compatíveis.

Você também pode tentar o código aberto WebRTC Media Server Kurento

Que pode reproduzir fluxo de vídeo RTSP e enviá-lo para WebRTC ou transcodificar para RTMP ou salvar no servidor.

Estamos usando na produção para os seguintes casos:

 - WebRTC para Webrtc (muitos para muitos)
 - WebRTC para RTMP
 - RTSP para WebRTC

Wowza

1. Re-streaming de RTSP para RTMP (Flash Player) Não funcionará com Android Chrome ou FF (Flash não é compatível)
2. Re-streaming de RTSP para HLS

Servidor de chamada da web (Flashphoner)

1. Re-streaming de RTSP para WebRTC (recurso de navegador nativo para Chrome e FF no Android ou desktop)

2. Re-streaming RTSP para Websockets (iOS Safari e Chrome / FF Desktop)

Dê uma olhada neste artigo .

Experimente o QuickTime Player! Aqui está meu JavaScript que gera o objeto incorporado em uma página da web e reproduz o fluxo:

//SET THE RTSP STREAM ADDRESS HERE
var address = "rtsp://192.168.0.101/mpeg4/1/media.3gp";

var output = '<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">';
    output += '<param name="src" value="'+adsress+'">';
    output += '<param name="autoplay" value="true">';
    output += '<param name="controller" value="false">';
    output += '<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="'+address+'"  kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">';
    output += '</embed></object>';

    //SET THE DIV'S ID HERE
    document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output;

Eu sei que este post é antigo, mas eu estava procurando por algo muito semelhante outro dia (veja o feed de vídeo RTSP da minha IP cam em uma página html simples sem nenhum plug-in ActiveX extravagante). Sorte minha, encontrei uma solução! É baseado em ffmpeg, NodeJS, NGINX (não obrigatório, mas útil) e Node Media Server .

A descrição no link é detalhada e fácil de seguir, mas eu ainda tinha alguns ajustes para fazer antes de fazê-lo funcionar (em relação aos endpoints no servidor NodeJS). Fiz uma pergunta própria e obtive uma resposta boa e útil .

Verifique a biblioteca de fluxo de mídia da Axis que retransmite na extensão de fonte de mídia

• https://github.com/AxisCommunications/media-stream-library-js
• https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API

Eles implementam um pipeline semelhante ao Gstreamer em JS com o depósito h264 nele. Nota: o streaming consumido no js não é diretamente rtsp, mas encapsulado em um ws: // pela própria biblioteca em um proxy node.js rtsp-websocket.

Publiquei um projeto no Github que ajuda você a transmitir a câmera ip / rede para o navegador da web em tempo real sem a necessidade de plug-in, o qual contribuí para um projeto de código aberto sob a licença MIT que pode ser compatível com a sua necessidade, aqui está:

Streaming IP / Câmera de rede no navegador da web usando NodeJS

Não existe um pacote completo do framework ainda, mas é um kickstart que pode lhe dar uma maneira de prosseguir.
Como estudante, espero que isso seja útil e, por favor, contribua com este projeto.

Uma opção seria usar algum tipo de servidor / gateway de streaming. Tentei várias soluções (vlc, ffmpeg e mais algumas) e a que funcionou melhor para mim foi o servidor Janus WebRTC. É um pouco difícil de configurar, e você terá que compilá-lo a partir do código-fonte (quando tentei, a versão nos repositórios do Ubuntu não tinha suporte para RTSP), mas eles têm instruções de compilação detalhadas e documentação sobre como configurar tudo.

Consegui obter alimentação de vídeo e áudio de 3 câmeras FullHD na rede local com muito pouco atraso. Posso confirmar que funciona com câmeras Dahua e Hikvision (não tenho certeza se todos os modelos).

O que usei foi o Ubuntu Server 18.04 executando o servidor da web Apache e o Chrome como navegador (não funcionava no Firefox por padrão, mas talvez haja soluções alternativas para isso).

o Microsoft Mediaplayer pode fazer tudo o que você precisa. Eu uso o MS Mediaservices de 2003/2008 Server para entregar vídeo como transmissão e fluxo Unicast. Este serviço pode obter o fluxo da câmera e transmiti-lo. Então você tem "apenas" o problema de "exibir" essa imagem em TODOS os navegadores em todos os sistemas operacionais

Minha dica: verifique primeiro o sistema operacional, depois carregue seu plugin. no Windows é fácil - tomar WMP, em outros tomar MS Silverligt ...

Para propósitos como este, eu uso o VLC como servidor de redistribuição. Você disse que vai conseguir pegar o vídeo com o VLC? Clique com o botão direito na mídia no VLC, selecione "stream" e escolha suas opções. Você também pode fazer isso com a linha de comando, o que lhe dá benefícios potenciais de várias opções (transcodificação, dimensionamento, compactação, desentrelaçamento). Aqui está um lote que inicia a distribuição VLC da fonte para sua própria porta 555 (então você terá que digitar rstp: // myvlcserveripaddress: 555 em sua opção src na página da web para obter o fluxo)

cd \
cd C:\Program Files (x86)\VideoLAN\VLC\

vlc --logo-file C:\logo.png --logo-position 5 --logo-opacity 200 --logo-x 900 --logo-y -2 "mmsh://typeyoursourceIPhere:554" :sout=#transcode{vcodec=div3,vb=800,scale=0,acodec=mpga,ab=128,channels=2,samplerate=44100}:duplicate{dst=rtp{mux=ts,sdp=rtsp://:555/stream}} :sout-all :sout-keep

Aqui , você tem um exemplo de uma página da web que incorpora o player (com base no plugin VLC).

Todas as soluções acima não funcionam mais ou demoram muito para serem descobertas.

Esta é a resposta definitiva. Você pode inserir um link rtsp em seu site.

Copie o código abaixo em seu editor de html:

<!--- BEGIN PLAYER --->

<!-- webbot bot="HTMLMarkup" startspan ---->

<object ID="MediaPlayer" WIDTH="320" HEIGHT="270" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">

<param name="autoStart" value="True">

<param name="filename" value="rtsp://xxx.xxx.xxx:xxxx">

<param NAME="ShowControls" VALUE="False">

<param NAME="ShowStatusBar" VALUE="False">

<embed TYPE="application/x-mplayer2" SRC="rtsp://xxx.xxx.xxx:xxxx" NAME="MediaPlayer" WIDTH="320" HEIGHT="270" autostart="1" showcontrols="0"></embed></object>

<!-- webbot bot="HTMLMarkup" endspan ---->

<!--- end PLAYER --->

Se tudo isso é muito complicado e ainda não resolve, deixe-me ajudá-lo.

Eu fiz isso para meus clientes.

Clique aqui http://www.mhcreative.com.my/ipcameratowebsite/