Vue は rtsp ビデオストリームを再生します

職場でビデオ監視を再生する必要があります. 最近, Web ページで rtsp ビデオストリームを再生する方法について初めて知りました. 以下は私の個人的な経験です. 最後に、テスト用の Web ページで rtsp ストリームを再生する方法を実現するために、vue+webrtc-streamer
を選択しました。

個人的体験

初めて vue-video-player+videojs メソッドを試してみたところ、Flash 対応のブラウザにしか適用できないことがわかりましたが、最新バージョンのブラウザはすべて Flash プラグインに対応していないため、断念しました。

npm install vue-video-player に問題があるため、vue-video-player に穴があり、css ファイルのインポート時にエラーが報告され続けることに注意してください。

長い間あらゆる種類の Baidu を使用していることに気付きましたが、vue2 バージョンで vue-video-player を使用したい場合は、バージョン 4.x をダウンロードする必要があると誰も言わなかった理由がわかりません。vue3 のダウンロードにより、プラグイン名が @videojs-player/vue に変更されました。

バージョン 4.0.1 をダウンロードして、css ファイルを正常にインポートできることを確認しますが、ブラウザーが Flash をサポートしていないため、再生がうまくいきません。

ここに画像の説明を挿入

ffmpeg を 2 回目に試してみたところ、複雑すぎることがわかり、長い時間をかけて考えても無駄でした。

webrtc-streamer を試した 3 回目で、ようやく成功しました。最初の 2 つの方法よりも簡単です。

Vue+webrtc-streamer は、Web ページでの rtsp ビデオストリームの再生を実現します。

最初に、github で入手できる webtrc-streamer の圧縮パッケージをダウンロードします。

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

Windows版をダウンロード

ここに画像の説明を挿入

webrtc-streamer.exe をダブルクリックしてサービスを開始します

ここに画像の説明を挿入

ダウンロードパッケージの html フォルダーにある webrtcstreamer.js ファイルと html/libs フォルダーにある adapter.min.js ファイルを VUE プロジェクトの public/static ディレクトリにコピーし、これら 2 つの js ファイルを index.html にインポートします。ファイル。

テストコードを書く

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

この時点で、Web ページを実行するとビデオが表示されます。

ここに画像の説明を挿入

ただし、欠点があります (まだ解決されていません)。

再生されたビデオに音声がありません
コンソールはエラーを報告しますが、通常の再生には影響しません

ここに画像の説明を挿入
どなたか解決方法をご存知の方がいらっしゃいましたらメッセージをお願いします！
上記の内容については、http://t.csdn.cn/gj93S を参照してください。