Vue reproduz fluxo de vídeo rtsp

Há uma necessidade de reproduzir vigilância por vídeo no trabalho. Recentemente, aprendi pela primeira vez sobre o método de reprodução de fluxos de vídeo rtsp em páginas da Web. A seguir, minha experiência pessoal.
Por fim, escolhi vue+webrtc-streamer para realizar o método de reprodução do fluxo rtsp na página da web para teste.

experiência pessoal

Eu tentei o método vue-video-player+videojs pela primeira vez e descobri que ele é aplicável apenas a navegadores que suportam flash, mas as versões mais recentes de todos os navegadores não suportam plug-ins de flash, então desisti.

Observe que o vue-video-player tem um buraco e continua relatando erros ao importar arquivos css. O motivo é que há um problema com o npm install vue-video-player.

Depois de todos os tipos de Baidu por muito tempo, descobri que estou usando vue 2. Não sei por que ninguém disse que se você quiser usar o vue-video-player na versão vue2, deve baixar a versão 4.x. O download do vue3 mudou o nome do plugin para @videojs-player/vue.

Baixe a versão 4.0.1 e descubra que o arquivo css pode ser importado normalmente, mas o navegador não suporta flash, então a reprodução não é bem sucedida.

Na segunda vez que tentei o ffmpeg, achei muito complicado e fiquei muito tempo pensando nisso sem sucesso.

Na terceira vez que tentei o webrtc-streamer, finalmente consegui, e é mais simples do que os dois primeiros métodos!

Vue+webrtc-streamer realiza a reprodução de fluxo de vídeo rtsp em páginas da web

1. Primeiro baixe o pacote compactado do webtrc-streamer, que está disponível no github

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

   baixe a versão do windows

2. Clique duas vezes em webrtc-streamer.exe para iniciar o serviço

3. Copie o arquivo webrtcstreamer.js na pasta html do pacote de download e o arquivo adapter.min.js na pasta html/libs para o diretório public/static do projeto VUE e importe esses dois arquivos js para o index.html arquivo.

4. escrever código de teste

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

Neste ponto, o vídeo pode ser visto executando a página da web.

Mas há desvantagens (ainda não resolvidas):

• O vídeo reproduzido não tem som

• O console relata um erro, mas não afeta a reprodução normal

Se alguém souber como resolver, por favor, deixe uma mensagem!
Consulte http://t.csdn.cn/gj93S para o conteúdo acima