リアルタイム再生のためにHikvision Camera SDKのビデオストリームをフロントエンドVUEプロジェクトにプッシュするにはどうすればよいですか？

hikvisionカメラSDKビデオストリーミングライブ再生ビュープロジェクト

この記事では、Hikvision Camera SDKがストリーミングメディアサーバー（Zlmediakit）を介して取得したビデオをストリーミングする方法を紹介し、最終的にVueフロントエンドプロジェクトでリアルタイムで再生します。プロセス全体はクラウドビデオサービスに依存せず、カメラはローカルコンピューターに直接接続されています。

システムアーキテクチャと実装のアイデア

システムは、3層アーキテクチャを採用しています。

1. HikVision Camera and BackEnd（Spring Boot）： Hikvision SDKを使用して、カメラビデオストリーミングを取得します。
2. Streaming Media Server（Zlmediakit）：ミドルウェアとして、バックエンドによってプッシュされたビデオストリームを受信して​​転送します。
3. フロントエンド（VUE）：再生のためにZlmediakitからRTSPストリームをプルします。

バックエンド（Java）の実装の詳細

バックエンドはスプリングブートフレームワークを使用し、コアロジックはhikvision SDKコールバックのビデオデータをZlmediakitにプッシュすることです。コードスニペットは次のとおりです。

 @サービス
パブリッククラスのhikvisionserviceimplはhikvisionserviceを実装します{

    // ...他のコード...

    @PostConstruct
    public void Register（）{
        // hikvisionclient client = new hikvisionclient（）を初期化します。
        client.initpipedStream（）;
        client.clientinit（）;
        client.action（）; //プレビューを開始し、コールバックを使用してビデオストリームデータを取得}

    // hikvision sdkコールバック関数クラスrealldatacallbackはhcnetsdk.frealdatacallback_v30を実装します{
        @オーバーライド
        public void invoke（int lrealhandle、int dwdatatype、bytebyReference pbuffer、int dwbufsize、pointer puser）{
            if（dwdatatype == hcnetsdk.net_dvr_streamdata）{
                if（dwbufsize> 0）{
                    bytebuffer buffer = pbuffer.getpointer（）。getByteBuffer（0、dwbufsize）;
                    byte [] bytes = new byte [dwbufsize];
                    buffer.rewind（）;
                    buffer.get（バイト）;
                    executor.execute（（） - > pushtozlmediakit（bytes））; // zlmediakitにプッシュします
                }
            }
        }
    }

    private void pushtozlmediakit（byte [] data）{
        //データをZlmediakitにプッシュすると、この部分はZlmediakitのAPIに従って実装する必要があります。
        //データをエンコード（例：H.264）し、ネットワークを介してZlmediakitサーバーに送信する必要がある場合があります。
        // ... zlmediakitプッシュコード...
    }
}

pushToZLMediaKitメソッドが重要であり、受信したビデオデータは、Zlmediakit APIドキュメントに従って指定されたストリーミングサーバーアドレスにプッシュする必要があります。これには、データ形式の変換が含まれる場合があります（たとえば、生データをh.264ストリームに変換する）。

フロントエンド（VUE）の実装の詳細

フロントエンドはVUEフレームワークを使用し、flv.jsやhls.jsなどの適切なビデオプレーヤーライブラリを組み合わせて、Zlmediakitから取得したRTSPストリームを再生します。

 // vueコンポーネントコードスニペット<template>
  <video ref="videoPlayer" autoplay></video>
</template>

<script>
import flvjs from 'flv.js'; // 或hls.js

export default {
  mounted() {
    this.initPlayer();
  },
  methods: {
    initPlayer() {
      const rtspUrl = '/api/rtspStream'; // 后端提供的RTSP流地址接口
      fetch(rtspUrl)
        .then(response => response.json())
        .then(data => {
          const flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: data.rtspUrl // 获取到的RTSP流地址
          });
          flvPlayer.attachMediaElement(this.$refs.videoPlayer);
          flvPlayer.load();
          flvPlayer.play();
        })
        .catch(error => console.error('Error fetching RTSP URL:', error));
    }
  }
};
</script>

/api/rtspStream ZlmediaKitで生成されたRTSPストリームアドレスを返すバックエンドインターフェイスです。

完全なソリューションサプリメント

安定したビデオストリーミングを実現するには、バックエンドはFFMPEGを使用してトランスコードに使用して、Hikvision SDKによる元のビデオストリーム出力をZlmediakit（FLVなど）がサポートする形式に変換する必要がある場合があります。バックエンドは応答ストリームにデータを継続的に書き込む必要がありますが、フロントエンドはflv.jsなどのライブラリを介して解析および再生する必要があります。これには、動画の再生をスムーズに確保するために、ネットワーク伝送とデータバッファリングの慎重な処理が必要です。エラー処理とリソースのリリースも重要です。

以上がリアルタイム再生のためにHikvision Camera SDKのビデオストリームをフロントエンドVUEプロジェクトにプッシュするにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。