Cómo insertar una transmisión en tu sitio web

Por qué RTSP no funciona en un navegador

RTSP está diseñado para controlar la transmisión de vídeo, pero los navegadores modernos no pueden reproducir el protocolo directamente. Si pegas un enlace RTSP en HTML o lo abres como una dirección normal, no aparecerá ningún vídeo en la página.

Para mostrarla en la web, la transmisión debe recibirse, prepararse en un formato compatible y entregarse al espectador a través de un reproductor web. Esa es la función que cumple rtsp.me.

Qué obtienes

• Código ya preparadoCódigo HTML del reproductor para colocar en una página
• Adaptación de la transmisiónReproducción en navegadores web modernos
• Dispositivos móvilesVisualización optimizada para teléfonos y tablets
• EstadísticasAcceso del propietario a las estadísticas de visitas de la transmisión

No necesitarás crear un reproductor tú mismo ni mantener un sistema aparte de conversión de vídeo.

Paso 1. Prepara la transmisión

Primero añade la cámara IP en rtsp.me y espera a que el vídeo empiece a funcionar correctamente. Si la cámara todavía no está conectada, sigue la guía «Cómo crear una transmisión en directo en un sitio web».

1. Abre rtsp.me e inicia sesión en tu cuenta.
2. Selecciona la cámara que has conectado.
3. Comprueba que la imagen está disponible y que la transmisión funciona de forma estable.
4. Abre la configuración de inserción o el código del reproductor.

Paso 2. Obtén el código HTML

rtsp.me genera un fragmento HTML ya preparado para la transmisión seleccionada. Cópialo completo sin modificar la dirección del reproductor ni los parámetros del servicio.

El código funciona en un sitio HTML sencillo, en una plantilla de CMS o en el bloque de HTML personalizado de un creador de sitios web, siempre que la plataforma permita insertar reproductores externos.

Ejemplo de código HTML

<iframe
  src="https://rtsp.me/embed/WKZb7jUsUw5T9N4f/"
  style="width:100%; aspect-ratio:4/3; border:0;"
  title="RTSP streaming player"
  allow="fullscreen; autoplay"
  allowfullscreen>
  Iframes not supported. Stream <a href="https://rtsp.me/"
    title="rtsp video streaming service">rtsp.me</a> player
</iframe>

Tu código de trabajo contendrá la dirección de tu propia transmisión. No lo sustituyas por el identificador de demostración WKZb7jUsUw5T9N4f.

Cómo se ve el reproductor insertado

Paso 3. Coloca el código

1. Abre la página en la que debe aparecer la transmisión.
2. Cambia al modo de edición HTML o añade un bloque para código insertado.
3. Pega el código del reproductor donde lo necesites.
4. Guarda y publica la página.
5. Comprueba que el vídeo se inicia en un navegador tanto en el ordenador como en el teléfono.

Una vez que se carga la página publicada, el reproductor se conecta a rtsp.me y comienza a reproducir la transmisión disponible.

Navegadores y dispositivos móviles

rtsp.me optimiza la transmisión de origen no solo para navegadores de escritorio, sino también para dispositivos móviles. Un visitante no necesita instalar software de visualización RTSP ni introducir ninguna credencial de la cámara.

El reproductor responsivo puede colocarse en un contenedor de la página para que su ancho se adapte a la pantalla. Después de publicar, comprueba tanto la orientación vertical como la horizontal en un teléfono, y la página con una conexión móvil lenta.

La calidad de visualización también depende de la configuración de la cámara y de la velocidad de subida disponible en el lugar. Las recomendaciones están en la página «Configuración recomendada para cámaras IP».

Estadísticas de visitas

El propietario de la transmisión tiene acceso a las estadísticas de visitas. Te ayudan a evaluar el interés de la audiencia y a llevar un seguimiento de cómo se usa el reproductor en el sitio.

Las estadísticas están disponibles en la interfaz de rtsp.me. Las métricas que se muestran pueden depender de la configuración de la transmisión y del plan contratado.

Integración segura mediante PHP

El código HTML normal es adecuado para una transmisión pública. Si el vídeo está destinado solo a clientes registrados, personal o usuarios concretos, el reproductor puede conectarse mediante código PHP del lado del servidor.

En esta configuración, tu servidor primero comprueba los permisos del usuario y luego le emite un enlace único de reproductor. El enlace se crea por separado para cada visitante y no se almacena de forma permanente en el HTML público de la página.

1. El usuario inicia sesión en su cuenta en tu sitio.
2. El código PHP comprueba si tiene permitida la visualización.
3. El servidor genera un enlace personal usando los parámetros de integración de rtsp.me.
4. La página pasa el enlace al reproductor únicamente para ese usuario.

Una comparación de la integración PHP con dominios permitidos, contraseña, bloqueo por IP y acceso basado en cuentas está en la guía «Cómo proteger una transmisión de la copia».

Preguntas frecuentes