Dahua モニタリング フロントエンド リアルタイム プレビュー (DHplayer) 公式プラグイン

はじめに: vue2+Dahua 公式プラグイン DHplaye+rtsp を使用してストリームをプルし、フロントエンド プレビューを実現します

1. 公式ドキュメントに従ってプラグインをインストールして導入します

 

 2.vueプロジェクトにプラグインを導入する

import DHPlayer from '@/components/DHPlayer/index'

3. テンプレートで使用

<template>
  <DHPlayer
    ref="dhplayer"
    video-id="dhplayer"
    :window-type="0"
    :num="9"
    @createSuccess="createSuccess"
  />
</template>

windowType: ビデオ タイプ 0 リアルタイム、1 録画

num: サブウィンドウの数

createSuccess: プラグインが正常に作成されたときに呼び出されます。

4. バックエンドインターフェイスを調整して、表示する監視ポイントのチャネル番号と rtsp アドレスを取得します。

methods: {
    // 获取已上架监控点rtsp
    getRtsp() {
      this.$get('gardan/device/getCameraUrl', {}).then(
        r => {
          console.log(r.data)
          const data = r.data.data
          data.forEach((item, index) => {
            this.$refs.dhplayer.realByUrl({
              channelId: item.channelId, // 通道号
              path: item.path,           // rtsp地址
              redirect: false            // 是否重定向
            }, index)                    // index子窗口下标
          })
        }
      )
    },
    createSuccess() {
      console.log('创建成功')
      this.getRtsp()
    }
  }

this.$refs.dhplayer.realByUrl を呼び出すためのループ

5. 最終的な効果

 概要: 現在のプロジェクト要件では、リアルタイム プレビュー機能とビデオ再生のみが必要です。インターコム機能については、Dahua Playback Control Development Manual を参照してください。

 さらに、一連の Hikvision プラグインが接続されており、必要に応じて共有できます。