Vue reproduce la transmisión de video rtsp

Existe la necesidad de reproducir videovigilancia en el trabajo. Recientemente, aprendí por primera vez sobre el método de reproducción de transmisiones de video rtsp en páginas web. La siguiente es mi experiencia personal.
Finalmente, elegí vue+webrtc-streamer para realizar el método de reproducción de secuencias rtsp en la página web para realizar pruebas.

experiencia personal

Probé el método vue-video-player+videojs por primera vez y descubrí que solo es aplicable a navegadores compatibles con flash, pero las últimas versiones de todos los navegadores no admiten complementos flash, así que me di por vencido.

Tenga en cuenta que vue-video-player tiene un hoyo y sigue informando errores al importar archivos css. La razón es que hay un problema con npm install vue-video-player.

Después de todo tipo de Baidu durante mucho tiempo, descubrí que estoy usando vue 2. No sé por qué nadie dijo que si quieres usar vue-video-player en la versión vue 2, debes descargar la versión 4.x. La descarga de vue3 ha cambiado el nombre del complemento a @videojs-player/vue.

Descargue la versión 4.0.1 y descubra que el archivo css se puede importar normalmente, pero el navegador no es compatible con flash, por lo que la reproducción no se realiza correctamente.

La segunda vez que probé ffmpeg, descubrí que era demasiado complicado y pasé mucho tiempo pensando en ello sin éxito.

La tercera vez que probé webrtc-streamer, finalmente tuve éxito, ¡y es más simple que los dos primeros métodos!

Vue+webrtc-streamer realiza la reproducción de secuencias de video rtsp en páginas web

1. Primero descargue el paquete comprimido de webtrc-streamer, que está disponible en github

   https://github.com/mpromonet/webrtc-streamer/releases

   descargar versión de windows

2. Haga doble clic en webrtc-streamer.exe para iniciar el servicio

3. Copie el archivo webrtcstreamer.js en la carpeta html del paquete de descarga y el archivo adapter.min.js en la carpeta html/libs al directorio public/static del proyecto VUE e importe estos dos archivos js en index.html archivo.

4. escribir código de prueba

   <template>
     <div class="home">
       <video id="video" autoplay width="600" height="400"></video>
       <video id="video1" autoplay width="600" height="400"></video>
     </div>
   </template>
   //不放心我又引入了一遍
      <script type="text/javascript" src="../../public/stactic/webrtcstreamer.js"></script>
      <script type="text/javascript" src="../../public/stactic/adapter.min.js"></script>
   <script>
   export default {
         
         
     name: "HomeView",
     data() {
         
         
       return {
         
         
         webRtcServer: null,
         webRtcServer1: null
       };
     },
     mounted() {
         
         
       //192.168.1.100是启动webrtc-streamer的服务器IP，8000是webrtc-streamer的默认端口号，可以在服务端启动的时候更改的
       this.webRtcServer = new WebRtcStreamer(
         "video",
         location.protocol + "//127.0.0.1:8000"
       );
       //需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用
       // this.webRtcServer.connect(
       //   "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
       // );
       this.webRtcServer.connect(
         "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
       );
         //第二个视频
         //根据不同的video标签来控制
       this.webRtcServer1 = new WebRtcStreamer(
         "video1",
         location.protocol + "//127.0.0.1:8000"
       );
       this.webRtcServer1.connect(
         "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
       );
     },
     methods: {
         
         },
     beforeDestroy() {
         
         
       this.webRtcServer.disconnect();
       this.webRtcServer = null;
     }
   };
   </script>
   

En este punto, el video se puede ver ejecutando la página web.

Pero hay desventajas (aún no resueltas):

• El video reproducido no tiene sonido.

• La consola informa de un error pero no afecta la reproducción normal

Si alguien sabe cómo resolverlo, por favor deje un mensaje!
Consulte http://t.csdn.cn/gj93S para ver el contenido anterior