フロントエンドは rtsp ビデオストリームを再生します (最終的に WebRtc を使用)

序文：

このプロジェクトでは、研究室のカメラ映像をフロントエンドページに導入する必要があるため、いくつかの一般的な方法を試しましたが、そのプロセスは困難でしたが、結果は良好でした。

試してみるべきこと:

RTSPtoWebRtcツール

RTSPtoWebRtcはice_serveで設定されているため、LAN内ではビデオにアクセスできません。
nginx+FFmepg

最初のアイデアは、rtsp ストリームを処理して rtmp に変換し、最終的に http 形式でアクセスすることです。しかし、数日間試してみたところ、次のような欠点があることがわかりました。

リアルタイムビデオ画像は遅延が大きく、GPU によるデコード後も約 10 秒の遅延が発生します。
nginxのhttp設定にはある程度の困難があります（これは私の問題だと思います）http形式でアクセスできないため、Webページに表示できません。

紆余曲折を経てWebRtcを使うことにした

最初はもっと面倒だと思っていましたが、もっと早くにやらなかったことを後悔しました…。

1.WebRtcをダウンロードする

github：リリース · mpromonet/webrtc-streamer (github.com)

間違ってダウンロードしないように注意してください

ここに画像の説明を挿入します

2.webrtc-streamer を実行します。

ダウンロード後、解凍してコマンドウィンドウを開き、以下のコマンドを実行します。

 D:\webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release\webrtc-streamer.exe -o -H 0.0.0.0:8000

D:\webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release\webrtc-streamer.exe絶対パスはどこですか

-o: トランスコードの必要がなく、CPU を削減します。

-H: ポート番号を指定

ここに画像の説明を挿入します

次に、ブラウザで127.0.0.1:8001/webrtcstreamer.html?video=rtsp://192.168.10.112:8557/h264にアクセスします。

rtspを忘れずに変更してください

3. Vue の概要

webrtc-streamer ダウンロードパッケージの html フォルダーにある webrtcstreamer.js ファイルと、html/libs フォルダーにあるadapter.min.js ファイルを、VUE プロジェクトのパブリックディレクトリにコピーします。そして、これら 2 つの js ファイルをindex.html ファイルに導入します。形式は次のとおりです。

    <script src="<%= BASE_URL %>adapter.min.js"></script>
    <script src="<%= BASE_URL %>webrtcstreamer.js"></script>

ここに画像の説明を挿入します

4. ページの作成

次のコードを直接コピーして貼り付け、必要に応じて変更できます。

<template>
  <div>
    <video id="video" autoplay width="500" height="300"></video>
  </div>
</template>

<script>
export default {
  name: 'index1',
  data() {
    return {
      webRtcServer: null
    }
  },
  mounted() {
    //video：需要绑定的video控件ID
    //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
    this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
    //需要查看的rtsp地址，记得修改rtsp地址
    this.webRtcServer.connect('rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0')
  },
  beforeDestroy() {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  },
  methods: {

  }
}
</script>

<style scoped></style>

5. 運用結果

ここに画像の説明を挿入します

参考リンク：
VUE+webrtc-streamerでリアルタイム動画再生を実現（監視デバイス-rtsp）_vue webrtc-streamer-CSDNブログ

[Vue2 + webrtc-steamer] rtsp ストリームが Web 上でリアルタイムに再生される_Is webrtc-streamersteady-CSDN ブログ