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


98

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.


1
También he estado explorando esta posibilidad con mis múltiples cámaras RTSP y no quiero ningún control ActiveX. Me gustaría crear un servidor web personalizado en el que la página web recupere continuamente una imagen JPEG para mostrarla en la página web. De esta forma, puede ser compatible con navegadores como Safari y verse en un iPhone.
Jerry Dodge


@JerryDodge He probado una idea con Java WebSocket Server que envía el nombre del archivo de imagen como una cadena, por ejemplo, "photo1.jpeg" al navegador web cada segundo. JavaScript en el navegador web utiliza el nombre del archivo para establecer el srcatributo de la <img>etiqueta de HTML. Funciona, pero es muy lento, por lo que no parece un video en vivo. ¿Ya has probado tu idea? ¿Funciona rápido?
O Connor

@OConnor Para una visualización de baja velocidad de fotogramas de nivel muy básico, es mejor que el cliente tire que el servidor empuje. También considere TCP frente a UDP. Ambos tienen sus pros y sus contras. Es más fácil que el cliente solicite una nueva imagen cuando lo necesite.
Jerry Dodge

Respuestas:


28

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>

2
Para que conste, a partir de este momento, VLC Media Player fue creado por 774 desarrolladores.
Jerry Dodge

15
Chrome bloqueó los complementos npapi después del 1 de septiembre de 2015. ya no funciona.
user2988855

1
El enlace axvlc.cab está muerto
hailinzeng

¿Qué hacer si el complemento está bloqueado? ¿Alguna otra solución alternativa disponible?
naveenkumar.s

18

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.


1
Esto es asombroso. Una solución muy necesaria.
Zakir HC

Actualización: aparentemente no funciona ahora. Muestra esto: "Esta cámara no se puede incrustar. Cambie al paquete estándar o profesional para incrustar".
muglikar

1
Todo lo que necesita hacer es actualizar su cámara al paquete Estándar / Profesional y podrá insertar su cámara en su página web.
Adorjan Princz

17

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.

2
Las versiones recientes de Quicktime Player han eliminado la compatibilidad con RTSP a partir de Mavericks.
Mike

totem en linux / ubuntu también es compatible con rtsp stream
Oki Erie Rinaldi

8

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.


Este es definitivamente el camino a seguir. Mejor gestión del ancho de banda y también transcodificación a un formato adecuado para web, por ejemplo, RTMP para un reproductor flash. ¿Alguien tiene alguna experiencia con el uso de cualquiera de los servidores de medios anteriores y puede explicar la facilidad de configuración, rendimiento, latencia, etc.? Lo había intentado con Red 5 pero encontré algunas cosas un poco difíciles de poner en funcionamiento.
elMarquis

8

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.


3
tenga en cuenta que encontró algunas porquerías de Windows sólo ActiveX, no una "solución" como usted la llama, y ​​no funcionará en ninguna otra cosa (sistemas operativos reales, móviles, consolas, etc.).
chip

@nonchip ah bueno, creo que tienes una mejor solución para el problema. Además, también probé el complemento en teléfonos Android, por lo que no es solo para Windows . Y de todos modos, realmente me gustaría saber qué alternativa multiplataforma tiene en mente para mostrar las imágenes de las cámaras de CCTV.
Swastik Padhi

lo siento, pero eso es mentira. el activex que inserte es, por definición, solo para ganar. lo que Chrome en Android hace es reconocer x-vlc-plugin, ignorar las cosas propietarias y simplemente presionar una aplicación vlc. también, sobre las alternativas multiplataforma que menciona: la única solución actual sería usar ffmpeg / avconv / etc en un servidor web para volver a empaquetar la secuencia rtsp en http / websocket / webrtc. luego simplemente agregue una <video>etiqueta y listo.
chip

1
la transmisión no se reproduce, puede ser este problema (código base) http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab404 no encontrado
Vara Prasad

7

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

1
el enlace ya no funciona, de todos modos gracias por la información.
medskill

el enlace es una copia de seguridad @medskill
activedecay

5

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 .


Ese es un gran artículo. Flashphoner parece una solución prometedora.
elMarquis

3

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 .


3

¡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;

Gracias. He explorado la opción QuickTime, pero tenía una latencia muy mala.
elMarquis

Eso se debe al búfer de 3 segundos de QuickTime ... eso también me molesta ... ¡Oye, si encuentras algo más que funcione, publícalo aquí! ¡Adiós!
Cipi

2
Hola, tienes un error, "dirección" se escribe "asdress" más adelante. Saludos
Clinton Green

3
¿Por qué está escrito en JavaScript?
Thomas Bennett

@Clinton: arreglado.
AlastairG

2

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

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.


2

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.


2

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


1

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


1

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


-7

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/


Extraño, termina incorporando VLC Media Player, ¿se debe a que VLC se considera el "reproductor multimedia predeterminado" para las páginas web?
Jerry Dodge

Espera, eso es WMP, supongo que esto solo funcionaría en Windows.
Jerry Dodge

2
la implementación de su sitio no es lo que describió en su respuesta. Está utilizando el servicio click2stream, cambie su respuesta, porque perdemos tiempo. Dices de los demás que no funcionan, pero tu solución no existe.
stefan2410

3
Es extraño que escribas: "Esta es la respuesta definitiva". ¿Qué hay de ser humilde, especialmente cuando se deja caer una respuesta con tanta falta de calidad?
Pille

1
Este enfoque utiliza un control x activo (para IE 10 y anteriores) y luego vuelve a otro complemento para otros navegadores. Como se mencionó, parece incrustar el reproductor multimedia VLC en la mayoría de los casos. No es un enfoque terrible, pero lograr que los usuarios instalen un complemento siempre será un poco impredecible. Por otro lado, si tiene una audiencia limitada y puede dictar su configuración, este enfoque podría estar bien.
elMarquis
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.