4

Tengo una cámara de seguridad IP que transmite el contenido por rstp. Al reproducirla con VLC no tengo ningún problema, pero cuando intento insertar el stream en mi vista de vue, en el navegador me aparece lo siguiente:

introducir la descripción de la imagen aquí

El código que uso:

  <embed
    type="application/x-vlc-plugin"
    version="VideoLAN.VLCPlugin.2"
    width="200"
    height="200"
    target="rtsp://admin:[email protected]:8554/profile0"
  />

¿Cómo podría mostrar el video en mi web? Aun que no sea con VLC me serviría.

1
  • Podrías usar socket.io, nodejs y RTC. Conectas la cámara al pc y transmites lo que se está viendo en la cámara :)
    – Daniel
    el 20 ene. 2022 a las 14:27

1 respuesta 1

0

Buen día,

Podrías utilizar rtsp-relay (Documentación)

Viene un ejemplo para utilizarlo con Vue (Ejemplo copiado de la documentación)

<template>
  <canvas ref="canvas" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { loadPlayer } from 'rtsp-relay/browser';

const canvas = ref(null);

onMounted(() => {
  loadPlayer({
    url: 'ws://localhost:2000/api/stream/2',
    canvas: canvas.value,
  });
});
</script>
3
  • Vue no me reconoce el 'ref', quitándolo no me ha funcionado.
    – andyio
    el 22 mar. 2022 a las 6:30
  • Para acceder a los ref puedes intentar desde el evento mounted mounted: function() { console.log(this.$refs.icanvas); }. Si te sirve avísame para editar la respuesta el 22 mar. 2022 a las 6:33
  • No sirve @HeytalePazguato
    – andyio
    el 22 mar. 2022 a las 11:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.