
VUE3对接海康威视监控接口,实现实时查看监控。
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
环境搭建
- 海康官网下载H5开发包
- 请后端同事配合部署好OpenAPI安全认证库
项目集成
- 将开发包里面的bin文件夹整个复制到项目public下
- 在vue项目里找到index.html文件直接引入h5player.min.js
- 插入一个监控的容器
<div id='H5Video'></div> // 这里的id是什么初始化的szID就填什么
- 初始化监控
const initCamera = () => { const { JSPlugin } = window; curIndex = 0; // 当前窗口下标 myPlugin = new JSPlugin({ szId: "H5Video", // 监控容器的ID 需要英文字母开头 必填 szBasePath: "/public/bin", // 必填,引用H5player.min.js的js相对路径这里的路径要和index.html的路径一致 // 当容器div#play_window有固定宽高时,可不传iWidth和iHeight,窗口大小将自适应容器宽高 // 分屏播放,默认最大分屏4*4 openDebug: true, // 分屏播放 iMaxSplit: 1, iCurrentSplit: 1, // 设置样式 oStyle: { border: "#FFF", borderSelect: "#FFCC00", background: "#000", }, }); initPlugin() } function initPlugin() { myPlugin.JS_SetWindowControlCallback({ windowEventSelect(iWindIndex) { // 插件选中窗口回调 console.log("windowSelect callback: ", iWindIndex); }, pluginErrorHandler(iWindIndex, iErrorCode, oError) { // 插件错误回调 console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError); }, windowEventOver(iWindIndex) { // 鼠标移过回调 console.log("鼠标移过回调", iWindIndex); }, windowEventOut(iWindIndex) { // 鼠标移出回调 console.log("鼠标移出回调", iWindIndex); }, windowFullCcreenChange(bFull) { // 全屏切换回调 console.log("全屏切换回调", bFull); }, firstFrameDisplay(iWndIndex, iWidth, iHeight) { // 首帧显示回调 console.log("首帧显示回调", iWndIndex, iWidth, iHeight); }, performanceLack(iWndIndex) { // 性能不足回调 console.log("性能不足回调", iWndIndex); }, }); realplay(); } async function realplay() { const res2 = await getCameraWs() //后端同事提供的接口,获取ws地址 let startTime, endTime; var playURL = res2.url; //获取到的监控点预览取流URL myPlugin .JS_Play( res2.url, { playURL, // 流媒体播放时必传 mode: 1, // 解码类型:0=普通模式; 1=高级模式 默认为0 }, curIndex, //当前窗口下标 // 回放参数 startTime, endTime ) .then( () => { console.info("JS_Play success"); // do you want... }, (err) => { console.info("JS_Play failed:", err); // do you want... } ); }
最终实现监控




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)