VUE3对接海康威视监控接口,实现实时查看监控。
vue3对接海康监控,实现实时查看监控功能。
·
环境搭建
- 海康官网下载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... } ); }
最终实现监控
更多推荐
已为社区贡献1条内容
所有评论(0)