video-streaming - qué - rtsp client

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

Question

Tengo una cámara ip que proporciona una transmisión de video RTSP en vivo. Puedo usar VLC Media Player para ver el feed al proporcionarle la URL:

rtsp://cameraipaddress

Pero necesito mostrar el feed en una página web. El proveedor de la cámara suministró un control ActiveX con el que comencé a trabajar, pero realmente tiene errores y hace que el navegador cuelgue con frecuencia.

¿Alguien sabe de algún complemento de video alternativo que pueda usar que soporte RTSP?

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

Answer 1

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. Jugador de VLC

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

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

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

Answer 2

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ó el código un poco y lo puso en funcionamiento. 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 arriba utiliza el formato rtsp url que es compatible con mi cámara IP. Entonces necesitas obtener lo mismo para tu cámara. Puede obtener esta información consultando el soporte de su proveedor de la cámara. También tenga en cuenta que lo probé en Chrome (con un complemento activeX para Chrome) y que otros navegadores (incluidos los navegadores de teléfonos móviles) podrían no ser compatibles.

Answer 3

La forma más popular y confiable de compartir videos en vivo en un sitio web es mediante RTMP (utilizando un reproductor Flash) o HLS (HTTP Live Streaming) que también funciona en dispositivos móviles en lugar de HTML5 pero implica una gran latencia.

Para transformar el flujo RTSP en RTMP / HLS, se requiere un servidor de retransmisión (para conectarse a la secuencia RTSP y luego proporcionar RTMP / HLS a los clientes web). Wowza Streaming Engine 4.2+ proporciona dicha funcionalidad y está disponible de forma gratuita con una licencia de desarrollador de uso limitado. http://www.wowza.com/streaming/ip-camera-streaming

Un script para administrar eso y publicarlo en la web está disponible en http://www.videowhisper.com/?p=PHP-IP-Camera-Stream , también con licencia limitada y gratuita. Además, la demostración en línea de esa secuencia de comandos le permite publicar sus propias transmisiones RTSP en la web durante un tiempo (24 horas).

Answer 4

Microsoft Mediaplayer puede hacer todo lo que necesite. Utilizo MS Mediaservices de 2003/2008 Server para entregar Video como Transmisión y Transmisión de Unidifusión. Este Servicio podría OBTENER el flujo de la cámara y transmitirlo. Que tiene "solo" el problema para "mostrar" esa imagen en TODOS los navegadores en todos los sistemas operativos

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

Answer 5

No es fácil mostrar la transmisión de video en vivo desde una cámara IP en una página web porque necesita ancho de banda de Internet amplio y un reproductor de video excelente que es 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 transmisión 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 de HTML necesario para incrustar el video en vivo de esta manera:

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

Entonces solo tenemos que copiar y pegarlo en nuestro archivo HTML sin ninguna modificación.

Answer 6

Para fines como este, uso VLC como servidor de redistribución. ¿Dijiste que puedes ver el video con VLC? Haga clic derecho en los medios en VLC, seleccione "secuencia" y elija sus opciones. También puede hacerlo con la línea de comando, que le brinda beneficios potenciales de varias opciones (transcodificación, escalado, compresión, desentrelazado). Aquí hay un lote que inicia la distribución de VLC desde el origen hasta 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

Here , tiene una muestra de una página web que incrusta al reproductor (basada en el plugin de VLC).

Answer 7

Prueba el reproductor QuickTime! 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="''+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;

Answer 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 conexión directa IP Cam -> Viewer, y realmente debería ser la más rápida. No estoy seguro de por qué tienes problemas; Axis ActiveX funciona bastante bien para mí.

Sin embargo, esta opción no es realmente eficiente en cuanto al ancho de banda y no puedes atender a múltiples espectadores concurrentes (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 centralmente alojado, que convertirá su transmisión en RTMP / MPEG-TS y la publicará en reproductores Flash / decodificadores.

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

Answer 9

También puedes probar opensource WebRTC Media Server Kurento

Que puede reproducir secuencias de video RTSP y enviarlas a WebRTC o transcodificar a RTMP o guardarlas en el servidor.

Lo usamos en producción para los siguientes casos:

- WebRTC to Webrtc (many to many) - WebRTC to RTMP - RTSP to WebRTC

Answer 10

Todas las soluciones anteriores no funcionan ni consumen demasiado tiempo para descubrirlas.

Esta es la respuesta final. Puede insertar un 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/

Answer 11

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>

Answer 12

Wowza

1. Volver a transmitir RTSP a RTMP (Flash Player) No funcionará con Android Chrome o FF (Flash no es compatible)
2. Reproducción de RTSP a HLS

Servidor de llamadas web (Flashphoner)

1. Re-Streaming RTSP a WebRTC (función nativa del navegador para Chrome y FF, ya sea en Android o en el escritorio)

2. Re-Streaming RTSP a Websockets (iOS Safari y Chrome / FF Desktop)

Eche un vistazo a este article .