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

94

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.

video-streaming  rtsp 
— elMarquis
fonte
1
Também tenho explorado essa possibilidade com minhas várias câmeras RTSP e não quero nenhum controle ActiveX. Eu gostaria de construir um servidor web personalizado em que a página web recupere continuamente uma imagem JPEG para exibir na página web. Dessa forma, pode ser compatível com navegadores como o Safari e visualizado em um iPhone.
— Jerry Dodge de
subconjunto: com <video:>elemento: stackoverflow.com/questions/1735933/…
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Respostas:

29

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>
— Russell
fonte
1
Para registro, a partir deste ponto, o VLC Media Player foi construído por 774 desenvolvedores.
— Jerry Dodge
15
o chrome bloqueou os plug-ins do npapi depois de 1 de setembro de 2015. não está mais funcionando.
— user2988855
1
O link axvlc.cab está morto
— hailinzeng
o que fazer se o plugin for bloqueado por alguma outra solução alternativa disponível?
— naveenkumar.s
18

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.

— Adorjan Princz
fonte
1
Isso é incrível. Uma solução muito necessária.
— Zakir HC
Atualização: Aparentemente, não funciona agora. Mostra o seguinte: "Esta câmera não pode ser incorporada. Mude para o pacote Padrão ou Profissional para incorporação."
— Muglikar
1
Tudo que você precisa fazer é atualizar sua câmera para o pacote Standard / Professional e você poderá incorporar sua câmera em sua página da web.
— Adorjan Princz
17

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.
— cifra
fonte
2
Versões recentes do Quicktime Player abandonaram o suporte a RTSP, começando com Mavericks.
— Mike
totem no linux / ubuntu também suporta fluxo rtsp
— Oki Erie Rinaldi
8

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.

— user1390208
fonte
Este é definitivamente o caminho a seguir. Melhor gerenciamento de largura de banda e também transcodificação em um formato adequado para web, por exemplo, RTMP para um flash player. Alguém tem alguma experiência com o uso de qualquer um dos servidores de mídia acima e pode falar sobre a facilidade de configuração, desempenho, latência, etc? Eu tinha tentado com o Red 5, mas achei algumas coisas um pouco complicadas de fazer funcionar.
— elMarquis
8

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.

— Swastik Padhi
fonte
3
tenha em mente que você encontrou apenas uma porcaria de ActiveX do Windows, não uma "solução" como você a chama, e não funcionará em mais nada (SOs reais, celulares, consoles, etc).
— nonchip de
@nonchip ah bom, acho que você tem uma solução melhor para o problema. Além disso, testei o plugin em telefones Android também, por isso não é apenas Windows . E de qualquer forma, eu realmente gostaria de saber qual alternativa multiplataforma você tem em mente para exibir feeds de câmeras de CFTV.
— Swastik Padhi de
desculpe, mas isso é uma mentira. o activex que você incorpora é - por definição - apenas para ganhar. o que o Chrome no Android faz é reconhecer x-vlc-plugin, ignorar as coisas proprietárias e apenas enviar um aplicativo vlc para. também, sobre as alternativas de plataforma cruzada que você mencionou: a única solução atual seria usar ffmpeg / avconv / etc em um servidor web para recompactar o fluxo rtsp para http / websocket / webrtc. em seguida, basta adicionar uma <video>tag e pronto.
— nonchip de
1
o stream não está reproduzindo, pode ser este problema (base de código) http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab404 não encontrado
— Vara Prasad
7

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
— Denis Lisitskiy
fonte
1
o link não está mais funcionando, de qualquer maneira obrigado pela informação.
— medskill
o link está de volta @medskill
— activedecay
5

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 .

— Ankitr
fonte
Este é um ótimo artigo. Flashphoner parece uma solução promissora.
— elMarquis de
4

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;
— Cipi
fonte
Obrigado. Eu explorei a opção quicktime, mas havia uma latência muito ruim com ela.
— elMarquis
Isso é por causa do buffer de 3 segundos do QuickTime ... isso me irrita também ... Ei, se você encontrar outra coisa que funcione por favor poste aqui! Tchau!
— Cipi
2
Olá, você tem um bug, "endereço" é soletrado "asdress" mais tarde. Saúde
— Clinton Green,
3
Por que isso está escrito em JavaScript?
— Thomas Bennett
3

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 .

— Hauns TM
fonte
2

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.

— Phok Chanrithisak
fonte
2

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).

— ilmix
fonte
1

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 ...

— uwe
fonte
1

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).

— Grigory Kornilov
fonte
-7

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/

— Mazlan Halim
fonte
Estranho, ele acaba incorporando o VLC Media Player, isso porque o VLC é considerado o "reprodutor de mídia padrão" para páginas da web?
— Jerry Dodge
Espere, isso é WMP, estou assumindo que só funcionaria no Windows.
— Jerry Dodge
2
a implementação do seu site não é o que você descreveu em sua resposta. Você está usando o serviço click2stream, altere sua resposta, pois estamos perdendo tempo. Você fala sobre os outros que não funcionam, mas sua solução não existe.
— stefan2410
3
Estranho que você escreva: "Esta é a resposta definitiva." Que tal ser humilde, principalmente quando deixa cair uma resposta com tanta falta de qualidade?
— Pille de
1
Esta abordagem usa um controle ativo x (para IE 10 e anteriores) e então reverte para outro plugin para outros navegadores. Como mencionado, parece incorporar VLC media player na maioria dos casos. Não é uma abordagem terrível, mas fazer com que os usuários instalem um plug-in sempre será um acerto e erro. Por outro lado, se você tem um público limitado e pode ditar sua configuração, essa abordagem pode ser adequada.
— elMarquis
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.