关于视频监控介入的部分内容，使用的是海康H5web播放的模式

于 2024-09-27 09:19:43 发布
阅读量86 收藏
点赞数 1
文章标签： 前端 音视频 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/b0303/article/details/142584661
版权

这是原发直接能在系统中使用。里面的样式自己修改，主要是在引入时出现黑色的框就是引入成功，需要在public文件夹中引入h5player.min.js文件就可以。

<template>
    <div class="Shiping">
        <el-container>
        <el-header>
            <div class="cont">
                <div class="container">
                    <div class="item1">水库</div>
                    <div class="item2">视频管理系统</div>
                </div>
                <div class="container1">
                    <div class="ite" @click="zhuxiao">关闭</div>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside>
                <el-row class="tac">
                    <el-col :span="12">
                    <el-menu default-active="2" @open="handleOpen" @close="handleClose" style="padding-bottom:20px">
                        <el-submenu v-for="(item, index) in menuData" :index="String(index)" :key="item.lbname">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{ item.lbname }}</span>
                        </template>
                        <el-menu-item v-for="(subItem, subIndex) in item.list" :index="String(subIndex)" :key="subItem.lbname"  @click="selectSXT1(subItem)">{{ subItem.jknm }}</el-menu-item>
                        </el-submenu>
                    </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <div class="container">
                    <div class="top">
                        <div id="player1"></div>
                    </div>
                </div>

            </el-main>
        </el-container>
        </el-container>
    </div>
</template>

<script>
import "../../../../public/js/h5player.min.js"
import { getCameraPreview, getCameraList, futureRain,getVideoURL, getBySbSpjk,getControl,getPreset,setPreset,delPreset} from "@/api/business/srceenShow";
export default {
    data(){
        return{
            //videoDialog标题currentCameraInfogetHHH
        videoTitle: "",
        //播放个数
        splitNum: 9,
        //普通模式和高级模式
        mode: 1,
        //播放对象
        player1: null,
        //图片数据存放
        imageData: null,
        //播放地址
        urls: {
            realplay: "ws://60.212.191.94:559/openUrl/gV8OTMQ",
        },
        //当前摄像头
        currentCameraInfo: {},
        //是否设置预置点位标识
        isSetPreset: false,
        //预置点位
        presetList: [
          //   {
          //   "presetPointName":"无",
          //   "presetPointIndex":0
          // }
        ],
        volume: 30,
        //云台控制请求参数
        queryControlParam: {
            cameraCodeIndex: null,
            //默认为1  停止   0为开始
            action: 1,
            //命令
            command: null,
            //移动速度 1-100  默认为50
            speed: 10,
            // 预置点下标
            presetIndex: null,
            //预置点名称
            presetName: null,
        },
        //视频监控列表子项
        cameraList:[],
        dataList: [],  // 从后端获取的数据
        menuData: []   // 转换后的菜单数据
        }
        
    },
    created() {
        getCameraList().then((response) => {
        // 处理获取到的数据
        this.dataList = response.data;

        // 将获取到的数据转换为菜单数据结构
        this.transformToMenuData(this.dataList);
        });
    },
    mounted() {
        this.getList();
        this.createPlayer()
        this.arrangeWindow()
        // this.getHHH("9f83a4c1b0cc4542bfccdfba8adf4e5d");
        // setTimeout(() => {
        //     this.realplay()
        //     this.arrangeWindow()
        // }, 2000); // 100毫秒的延迟  改为2秒。。。

    },
    methods:{
        //点击列表中数据触发 获取摄像头播放地址
        getHHH(cameraCode) {
        let query = { cameraIndexCode:cameraCode };
            this.queryControlParam.cameraCodeIndex = cameraCode
            getVideoURL(query).then(resp=>{
            this.urls.realplay = resp.data.url
            this.getPreset()
            })

        },
        //内层的点击播放视频事件
        selectSXT1(subItem) {      
            const jkcode = subItem.jkcode;
            this.getHHH(jkcode);
            setTimeout(() => {
                this.realplay()
                // this.arrangeWindow()
            }, 2000); // 100毫秒的延迟  改为2秒。。。
            this.player1.JS_SelectWnd().then(
            () => {
                console.info('JS_SelectWnd success');
                // do you want...
            },
            (err) => {
                console.info('JS_SelectWnd failed');
                // do you want...
            }
            );
        },
        transformToMenuData(dataList) {
            this.menuData = dataList.map(item => {
                return {
                lbname: item.lbname,
                list: item.list,
                total: item.total
                };
            });
        },
        getList() {
            getCameraList().then((response) => {
                this.dataList = response.data;
                // console.log(this.dataList,"----------------------------00000000000000")
                // this.cameraList = this.dataList.filter(x=>x.lbname == "溢洪闸")[0].list
            });
        },
        zhuxiao(){
            this.$router.push({ path: '/index' })
            this.stopAllPlay()
        },
        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
         //-----------------------------
        //返回预置点位
        backPreset(){
        this.queryControlParam.presetIndex = 1
        this.control("GOTO_PRESET")
        },
        //查看预置点位
        getPreset(){
        getPreset(this.queryControlParam).then(resp=>{
            this.presetList=resp.data.list
            // console.log(this.presetList,resp,"预置点位")
        })
        },
        //设置预置点位
        setPreset(){
        //查询出最大的下标编码+1并赋值
        let maxIndex = this.presetList.map(i=>{return i.presetPointIndex}).reduce((a, b)=>a>b?a:b ) || 1;

        this.queryControlParam.presetIndex = Number(maxIndex)+1

        setPreset(this.queryControlParam).then(resp=>{
                // console.log(resp,"设置预置点位")
                if(resp.code=='0'){
                    this.isSetPreset = false
                    this.$message.success("设置预置点位成功")
                    this.getPreset()
                }

        })
        },
        //删除预置点位
        delPreset(){
        // console.log(this.queryControlParam,"请求参数")
        delPreset(this.queryControlParam).then(resp=>{
            // console.log(resp,"删除预置点位")
            if(resp.code=='0'){
            this.$message.success("删除预置点位成功")
            this.getPreset()
            }
        })
        },
        //云台控制 开始 操作
        control(command) {
            if (this.player1.isOk) {
            this.$message.info("监控未打开，无法操作")
            return
            }
            this.queryControlParam.cameraCodeIndex = this.currentCameraInfo.jkcode
            this.queryControlParam.action = 0
            this.queryControlParam.command = command

            this.getControl()
            setTimeout(() => {
            this.controlStop()
            }, 3000)
        },
        //云台控制 暂停
        controlStop() {
            if (this.player1.isOk) {
            this.$message.info("监控未打开，无法操作")
            return
            }
            // setTimeout(() => {
            this.queryControlParam.cameraCodeIndex = this.currentCameraInfo.jkcode
            this.queryControlParam.action = 1
            this.getControl()
            // }, 3000); // 100毫秒的延迟  改为3秒。。。
        },
        //云台控制接口
        getControl() {
            if (this.queryControlParam.cameraCodeIndex == null) {
            this.$message.info("未获取摄像头信息，请重试")
            }
            getControl(this.queryControlParam).then(resp => {
            // console.log(resp)
            })
        },
        //控制分屏个数
        arrangeWindow() {
            let splitNum = this.splitNum
            this.player1.JS_ArrangeWindow(splitNum).then(
            () => {
                //  console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
            },
            e => {
                console.error(e)
            }
            )
        },
        //放大全屏
        wholeFullScreen() {
            this.player1.JS_FullScreenDisplay(true).then(
            () => {
                // console.log(`wholeFullScreen success`)
            },
            e => {
                console.error(e)
            }
            )
        },
        //声音控制
        openSound() {
            this.muted = false
            this.player1.JS_OpenSound().then(
            () => {
                // console.log('openSound success')
                this.muted = false
            },
            e => {
                console.error(e)
            }
            )
        },
        closeSound() {
            this.muted = true
            this.player1.JS_CloseSound().then(
            () => {
                // console.log('closeSound success')
                this.muted = true
            },
            e => {
                console.error(e)
            }
            )
        },
        setVolume(value) {
            let player1 = this.player1,
            index = player1.currentWindowIndex
            this.player1.JS_SetVolume(index, value).then(
            () => {
                // console.log('setVolume success', value)
            },
            e => {
                console.error(e)
            }
            )
        },
        init() {
            let iWidth = 1144
            let iHeight = 698
            this.player1.JS_Resize(iWidth, iHeight)
        },
        /**
         * 初始化播放器
         */
        createPlayer() {
            this.player1 = new window.JSPlugin({
            szId: "player1",
            szBasePath: "/js/",
            iMaxSplit: 3,
            iCurrentSplit: 1,
            openDebug: true,

            oStyle: {
                borderSelect: "#FFCC00",
            },
            })
            // this.init()

            //视频是否播放标识  0 播放  1 停止
            this.player1.isOk = 1
            // 事件回调绑定
            this.player1.JS_SetWindowControlCallback({
            windowEventSelect: function (iWndIndex) {
                //插件选中窗口回调
                // console.log('windowSelect callback: ', iWndIndex);
                // that.$emit('getWndPk',iWndIndex) 
            },
            pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
                //插件错误回调
                // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
                // that.showErrror(iErrorCode,iWndIndex) 
            },
            windowEventOver: function (iWndIndex) {
                //鼠标移过回调
                //console.log(iWndIndex);
            },
            windowEventOut: function (iWndIndex) {
                //鼠标移出回调
                //console.log(iWndIndex);
            },
            windowEventUp: function (iWndIndex) {
                //鼠标mouseup事件回调
                //console.log(iWndIndex);
            },
            windowFullCcreenChange: function (bFull) {
                //全屏切换回调
                // console.log('fullScreen callback: ', bFull);
            },
            firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
                //首帧显示回调
                // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
            },
            performanceLack: function () {
                //性能不足回调
                // console.log('performanceLack callback: ');
            },
            })
            // console.log(this.player1,"打印player")
        },
        cancelCapture() {
            // this.openPlay = false;
            // this.player1 = null
            this.imageData = null
        },
        // 关闭所有视频
        stopAllPlay () {
            this.player1.JS_StopRealPlayAll().then(
            () => {
                this.playback.rate = 0
                // console.log('stopAllPlay success')
                this.closeVideoTree()
            },
            e => { console.error(e) }
            )
        },
        /* 预览&对讲 */
        realplay() {
            // this.init()
            let { player1, mode, urls } = this,
            index = player1.currentWindowIndex,
            playURL = urls.realplay
            // console.log(playURL,'playURL')

            

            this.player1.JS_Play(playURL, { playURL, mode }, index).then(
            () => {
                //视频已播放
                this.player1.isOk = 0
                // console.log('realplay success')
                index = index + 1;
                if (index == this.maxSplit) { index = 0 }
                player1.JS_SelectWnd(index);
                },
            e => {
                console.error(e)
            }
            )
        },
        stopPlay() {
            this.player1.JS_Stop().then(
            () => {
                this.player1.isOk = 1
                // console.log('stop realplay success')
            },
            e => {
                console.error(e)
            }
            )
            this.queryControlParam = {
            cameraCodeIndex: null,
            //默认为1  停止   0为开始
            action: 1,
            //命令
            command: null,
            //移动速度 1-100  默认为50
            speed: 50,
            // 预置点下标
            presetIndex: null,
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.Shiping{
    width: 70vw;
    // height: 80vh;
    background-image: url("~@/assets/images/jianjie.png");
	background-size: 100% 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    .el-header, .el-footer {
        // color: #ca2d2d;
        background: linear-gradient(-90deg, #14234B, #0C3C78);
        // line-height: 40px;
        .cont{
            display: flex;
            justify-content: space-between;
            .container {
                display: grid;
                grid-template-columns: auto auto; /* 指定两列 */
                padding: 10px;

                .item1 {
                    padding: 4px;
                    color: #fbf8f8;
                    font-size: 26px;
                }

                .item2 {
                    color: #f8f5f5;
                    font-size: 16px;
                    padding: 10px;
                }
            }

            .container1 {
                display: grid;
                grid-template-rows: auto;
                padding: 20px;
                .ite {
                    color: #fbf8f8;
                    font-size: 18px;
                    cursor: pointer;

                }
                
            }
        }
        

        
    }
    
    .el-aside {
        background: #264f80;
        line-height: 190px;
        width: 300px;
        // color: #cf2626;
        span{
            font-size: 18px;
            color: #faf6f6;
        }
        .el-menu {
            width: 350px;
            height: 200px;
            background: #264f80;
            border-right: 0px ;
            ::v-deep .el-submenu__title:hover {
                background-color: #264f80;
                color: #faf6f6;
            }
            ::v-deep .el-menu-item-group__title {
                padding: 0px 0px 0px 10px;
                line-height: normal;
                font-size: 18px;
                color: #909399;
            }
            .el-submenu .el-menu-item {
                background: #264f80;
                color: #faf6f6;
                height: 40px;
            }
        
        }
            &::-webkit-scrollbar {
                width: 5px;
                height: 2px;
            }
            &::-webkit-scrollbar-track {
                background: #1b5689;
                border-radius: 10px;
            }

            &::-webkit-scrollbar-thumb {
                background: #70c0ff;
                border-radius: 10px;
            }
    }
    .el-main {
        background: #26426D;
        text-align: center;
        // line-height: 820px;
        // height: 860px;
        // padding: 10px 10px;
        .container {
            display: flex;
            flex-direction: column;
            height: 840px; /* 设置高度，方便查看效果 */
            .top{
                width: 100%;
                height: 100%;
                #player1{
                    width: 80%;
                    height: 100%;
                }
            }
        }

        .container > div {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex: 1;
        }

        .container > div > div {
            width: 480px;
            height: 480px;
            // background-color: rgb(13, 13, 13);
            margin: 10px;
        }
        &::-webkit-scrollbar {
            width: 5px;
        }
        &::-webkit-scrollbar-track {
            background: #1b5689;
            border-radius: 10px;
        }

        &::-webkit-scrollbar-thumb {
            background: #70c0ff;
            border-radius: 10px;
        }

    }
}
</style>

原文件包：海康开放平台

这是需要导入的包在bin目录下

前进的探索者
关注
web，h5海康视频接入监控视频流记录一
oliver666666的博客
03-01 3147
node experss接口取流以及云台控制，h5player播放监控视频
web，h5海康视频接入监控视频流记录三（后台node取流）
oliver666666的博客
03-01 1011
vue接入海康ws流监控视频
海康视频播放，包含h5和web插件
weixin_43896125的博客
07-01 1947
有vue2和vue3写法，一种一个，大同小异，可参考转换
使用海康H5视频播放器开发包实现监控播放
huaweichenai的博客
02-23 8257
海康H5视频播放器开发包demo下载地址：H5视频播放器开发包 使用H5视频播放器开发包实现示例： 一：H5视频播放器开发包引入项目 将H5视频播放器开发包demo中所有文件夹和h5player.min.js引入到自己的项目中 二： 引入H5视频播放器开发包 <script src="h5player.min.js"></script> 三：使用H5视频播放器开发包实现监控播放 1：html <div id="player"></div&gt
使用vue二次开发海康监控H5视频播放
Kepler_明的博客
06-09 6987
使用vue二次开发海康监控H5视频播放西瓜播放器示例demo阿里云的示例demo使用海康的H5视频开发包，海康的api页面中的使用第一步第二步第三步第四步切记bug 由于公司项目需要做监控的直播跟回放，所以接触到了这个海康的监控视频播放，本来是打算使用videojs使用rtmp流进行监控的直播，因为现在主流浏览器都不支持flash插件，而videojs使用rtmp流直播的话需要浏览器支持flash，所以果断放弃，后来决定使用hls协议调用H5播放器进行播放。然后当时找了两个H5播放器一个是西瓜播放器，另一个
vue使用海康的H5视频播放器开发包实时预览监控画面
m0_68937827的博客
05-20 1721
在项目中的public文件夹下新建一个h5player的文件夹（这里的文件夹名字可以自己取，后端引入时注意一下就好了），接着将刚才下载的开发包中的bin文件夹里面所有的文件都赋值到项目中的h5player文件夹下。// // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高。2、使用该插件很难更改其样式，只能使用其自带的窗口（1x1,2x2等），如过我要一个1x2的窗口就无法实现；// // 分屏播放，默认最大分屏4*4。
WEB端项目中接入海康监控视频播放监控画面
热门推荐
爱码代码的小马
07-29 2万+
需求： 以树形结构展示组织以及组织下的摄像头列表，点击单个摄像头进行预览 效果图： 该博客基于 海康开放平台API开发 准备工作 1. APPkey、APPsecret、服务器ip地址、端口号 2. [OpenAPI 安全认证库 （JAVA） V1.1.3](https://open.hikvision.com/download/5c67f20bb254d61550c2f63e?type=10) 3. [视频web插件 V1.4.1](https://open.hikvision.com/downloa
vue使用海康h5player
LovelyLittleCub的博客
12-01 2412
在public下面创建文件夹，文件名称可以自己起名字，我这里的是lib下面的js，然后把demo文件下的这些文件复制到所创建的文件夹下，最后在public/index.html引入所需要的文件。点击树状图然后打开相应的视频，可以指定窗口切换，并在此基础上实现视频播放、关闭视频、开启声音、关闭声音、分屏以及云台操作（包括左右移动、上下移动以及缩放）里面播放的内容就不展示了，大致效果就是这个样子了。使用的海康web插件：由。
海康实时监控预览视频流接入web
LB_bei的博客
01-26 4005
海康开放平台海康威视合作生态致力打造一个能力开放体系、两个生态圈，Hikvision AI Cloud开放平台是能力开放体系的核心内容。它是海康威视基于多年在视频及物联网核心技术积累之上，融合AI、大数据、云计算等技术，为合作伙伴提供的一个二次开发及创新的平台。我们采取的方案是后端获取视频流返回给前端，然后前端播放海康开放平台海康威视合作生态致力打造一个能力开放体系、两个生态圈，Hikvision AI Cloud开放平台是能力开放体系的核心内容。
vue2项目 使用海康视频h5player@2.0版本
weixin_53322542的博客
11-14 2811
注意： szBasePath: "/h5player", 引用的路径里必须包含第一步里所有的文件 不然就会出现各种报错（我就是 找了好长时间才发现是文件找不到报的错误）下载之后我们把下载的文件打开把bin里的文件移动到pubilc文件里，可以自己单独建一个文件放在里面。之后我们就需要在pubilc里的index.html文件里引用。这个 封装的代码样式是我项目用到的 到时候自己自行修改样式。下载h5player@2.0版本的一些用到的文件。这里是组件方法的调用播放 我当时只用到了播放。
海康h5player2.1.3监控播放插件
05-31
海康H5Player是一款专为监控视频播放设计的插件，其版本2.1.3在业界被广泛应用，尤其在安防领域。这款插件的核心功能是支持通过WebSocket协议传输流媒体数据，使得实时监控视频能在网页上流畅播放，极大地提升了用户...
海康视频H5player播放简单demo
02-27
要使用这个“海康视频H5player播放简单demo”，你需要先下载H5player_2.1.2.build20230526153601_20230526155039压缩包，解压后查看源代码，了解如何初始化播放器、配置参数、绑定事件等。通过学习这个示例，你可以...
海康平台h5播放插件。
04-06
海康平台的H5播放插件是一款专门设计用于在Web环境下播放视频的工具，尤其适用于在浏览器中展示来自海康设备的实时视频流。这款插件的核心特性是其对WebSocket网络协议的支持，使得它能够在HTML5环境中实现低延迟、...
H5播放器播放海康摄像头视频开发包和demo
01-20
本项目是关于“H5播放器播放海康摄像头视频开发包和demo”，这为开发者提供了一个方便的工具集，用于在网页端展示海康摄像头的实时视频流。 首先，我们来看“海康摄像头”。海康威视是一家知名的安防监控设备制造商...
海康视频WEB端接入Demo
06-27
"海康视频WEB端接入Demo"是海康威视提供的一款Web应用示例，旨在帮助开发者快速理解和实现通过Web浏览器对海康视频监控设备的无缝接入与控制。下面将详细解析这款Demo所涉及的技术知识点： 1. **Web前端技术**：这...
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 587
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
webview2加载本地页面
qq_25160759的博客
09-23 601
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 406
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
apply、call和bind的作用和区别
最新发布
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
09-23 690
javascript中，apply、call和bind的作用和区别介绍。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值