大华监控前端实时预览(DHplayer)官方插件

Posted 小猪_佩'琪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了大华监控前端实时预览(DHplayer)官方插件相关的知识,希望对你有一定的参考价值。

介绍:采用vue2+大华官方插件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.最终效果

 总结:目前项目需求只要求实时预览功能,需要回放录像,对讲功能请参考大华播放控件开 发手册

 另外还对接了一套海康插件,需要的我可以分享一下

以上是关于大华监控前端实时预览(DHplayer)官方插件的主要内容,如果未能解决你的问题,请参考以下文章

谷歌浏览器中预览海康大华等监控视频的思路与方法

Web查看大华监控

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR中直播页面和视频列表页面的区别介绍

WEB页面实时播放海康大华等摄像头RTSP视频流完全方案

大华视频参数说明

海康大华等监控摄像头通过H5方式无插件低延时播放方案