¿Cómo puedo mostrar una transmisión de video RTSP en una página web?

Tengo una cámara ip que proporciona una transmisión de video RTSP en vivo. Puedo usar el reproductor de medios VLC para ver el feed proporcionándole la URL:

rtsp://cameraipaddress

Pero necesito mostrar el feed en una página web. El proveedor de la cámara proporcionó un control ActiveX que hice funcionar, pero tiene muchos errores y hace que el navegador se cuelgue con frecuencia.

¿Alguien sabe de algún complemento de video alternativo que pueda usar y que sea compatible con RTSP?

La cámara se puede configurar para transmitir en H264 o MPEG4.

VLC también viene con un complemento ActiveX que puede mostrar el feed en una página 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>

No es fácil mostrar la transmisión de video en vivo desde una cámara IP en una página web porque necesita un amplio ancho de banda de Internet y un excelente reproductor de video que sea compatible con los principales navegadores.

Pero, afortunadamente, hay algunos servicios basados ​​en la nube que pueden hacer este trabajo por nosotros. Uno de los mejores es IPCamLive . Este servicio puede recibir flujo de video RTSP / H264 desde una cámara IP y puede transmitirlo a los espectadores. IPCamLive tiene un componente de reproductor de video Flash / HTML5 que mostrará el video en PC, MAC, tableta o dispositivo móvil. Lo mejor es que este sitio genera el fragmento HTML necesario para incrustar el video en vivo como este:

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

Así que solo tenemos que copiarlo y pegarlo en nuestro archivo HTML sin ninguna modificación.

Aproximadamente, puede tener 3 opciones para mostrar la transmisión de video RTSP en una página web:

1. Un jugador verdadero
2. Reproductor de Quicktime
3. Reproductor de VLC

Puede encontrar el código para incrustar el activeX a través de la búsqueda de Google.

Hasta donde yo sé, existen algunas limitaciones para cada jugador.

1. Realplayer no admite video H.264 de forma nativa, debe instalar un complemento QuickTime para Realplayer para lograr la decodificación H.264.
2. El reproductor Quicktime no admite el transporte RTP / AVP / TCP, y su transporte RTP / AVP (UDP) no incluye la perforación de agujeros NAT. Por lo tanto, el único transporte factible es el túnel HTTP en la implementación de WAN.
3. VLC tampoco admite la perforación de orificios NAT para el transporte RTP / AVP, pero el transporte RTP / AVP / TCP está disponible.

Si desea transmitir RTSP directamente a la página web, me temo que su única opción es usar un visor de control ActiveX que viene con la cámara. Esta es una cámara IP de conexión directa -> Visor, y realmente debería ser la más rápida. No estoy seguro de por qué tiene problemas; Axis ActiveX funciona bastante bien para mí.

Sin embargo, esta opción no es realmente eficiente en el ancho de banda y no puede atender a varios espectadores simultáneos (la mayoría de las cámaras IP tienen un límite de 10 espectadores). La mejor opción es cargar una única transmisión RTSP en un servidor de transmisión alojado centralmente, que convertirá su transmisión a RTMP / MPEG-TS y la publicará en reproductores Flash / decodificadores.

Wowza, Erlyvideo, Unreal Media Server, Red5 son sus opciones.

Encontré una solución simple y funcional de la documentación oficial de VLC para el complemento web

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

Modificó un poco el código y lo puso a funcionar. Aquí está mi 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: El fragmento de código anterior utiliza el rtspformato de URL compatible con mi cámara IP. Por lo tanto, debe obtener lo mismo para su cámara. Puede obtener esta información consultando el soporte del proveedor de su cámara. También tenga en cuenta que lo probé en Chrome (usando un complemento activeX para Chrome) y es posible que otros navegadores (incluidos los navegadores de teléfonos móviles) no sean compatibles.

También puede probar el servidor de medios WebRTC de código abierto Kurento

Que puede reproducir la transmisión de video RTSP y enviarla a WebRTC o transcodificarla a RTMP o guardarla en el servidor.

Lo estamos utilizando en producción para los siguientes casos:

 - WebRTC a Webrtc (muchos a muchos)
 - WebRTC a RTMP
 - RTSP a WebRTC

Wowza

1. Retransmisión de RTSP a RTMP (Flash Player) No funcionará con Android Chrome o FF (Flash no es compatible)
2. Re-transmisión de RTSP a HLS

Servidor de llamadas web (Flashphoner)

1. Reenvío de RTSP a WebRTC (función de navegador nativa para Chrome y FF en Android o escritorio)

2. Retransmisión de RTSP a Websockets (iOS Safari y Chrome / FF Desktop)

Eche un vistazo a este artículo .

Sé que esta publicación es antigua, pero estaba buscando algo muy similar el otro día (vea la transmisión de video RTSP de mi cámara IP en una página html simple sin complementos ActiveX sofisticados). ¡Por suerte, encontré una solución! Está basado en ffmpeg, NodeJS, NGINX (no obligatorio pero útil) y Node Media Server .

La descripción en el enlace es detallada y fácil de seguir, pero todavía tenía que hacer algunos ajustes antes de que funcionara (con respecto a los puntos finales en el servidor NodeJS). Le hice una pregunta y obtuve una buena respuesta .

¡Prueba QuickTime Player! Aquí está mi JavaScript que genera el objeto incrustado en una página web y reproduce la transmisión:

//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="'+address+'">';
    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;

Compruebe la biblioteca de flujo de medios de Axis que se retransmite en la extensión de fuente de medios

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

Implementan una canalización similar a Gstreamer en JS con el h264 depay en ella. Nota: la transmisión consumida en js no es directamente rtsp, sino que la biblioteca la encapsula en un ws: // en un proxy rtsp-websocket de node.js.

He publicado un proyecto en Github que lo ayuda a transmitir la cámara IP / de red al navegador web en tiempo real sin necesidad de un complemento, que contribuí al proyecto de código abierto bajo la licencia MIT que podría adaptarse a sus necesidades, aquí tiene:

Transmisión de cámara IP / de red en el navegador web usando NodeJS

Todavía no hay un paquete completo de framework, pero es un puntapié inicial que podría brindarle una manera de continuar.
Como estudiante, espero que esto sea de ayuda y por favor contribuya a este proyecto.

Una opción sería utilizar algún tipo de servidor / puerta de enlace de transmisión. Probé varias soluciones (vlc, ffmpeg y algunas más) y la que mejor me funcionó fue el servidor Janus WebRTC. Es algo difícil de configurar, y tendrá que compilarlo desde la fuente (cuando lo probé, la versión en los repositorios de Ubuntu no tenía soporte RTSP), pero tienen instrucciones de compilación detalladas y documentación sobre cómo configurar todo.

Logré obtener alimentación de video y audio de 3 cámaras FullHD en la red local con muy poco retraso. Puedo confirmar que funciona con cámaras Dahua y Hikvision (no estoy seguro si todos los modelos).

Lo que usé fue Ubuntu Server 18.04 ejecutando el servidor web Apache y Chrome como navegador (no funcionaba en Firefox de forma predeterminada, pero tal vez haya soluciones alternativas).

Microsoft Mediaplayer puede hacer todo lo que necesita. Utilizo MS Mediaservices del servidor 2003/2008 para entregar video como transmisión y transmisión unicast. Este servicio podría OBTENER la transmisión de la cámara y transmitirla. De lo que tiene "solo" el problema de "mostrar" esa imagen en TODOS los navegadores en todos los sistemas operativos

Mi consejo: primero verifique el sistema operativo, luego cargue su complemento. en Windows es fácil: tomar WMP, en otros, MS Silverligt ...

Para propósitos como este, uso VLC como servidor de redistribución. ¿Dijiste que puedes ver el video con VLC? Haga clic derecho en el medio en VLC, seleccione "stream" y elija sus opciones. También puede hacerlo con la línea de comandos, lo que le brinda los beneficios potenciales de varias opciones (transcodificación, escalado, compresión, desentrelazado). Aquí hay un lote que inicia la distribución de VLC desde la fuente a su propio puerto 555 (por lo que tendrá que escribir rstp: // myvlcserveripaddress: 555 en su opción src en la página web para obtener la transmisión)

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

Aquí , tiene una muestra de una página web que incorpora el reproductor (basado en el complemento VLC).

Todas las soluciones anteriores ya no funcionan o requieren demasiado tiempo para descubrirlas.

Esta es la respuesta definitiva. Puede incrustar el enlace rtsp en su sitio web.

Copie el siguiente código en su editor 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 --->

Si todo esto es demasiado complicado y aún no lo resuelve, déjame ayudarte.

He hecho esto por mis clientes.

Haga clic aquí http://www.mhcreative.com.my/ipcameratowebsite/