海康无插件版Web3.4 SDK 动态引入

这是我的第一篇文章写的不好请多多见谅。海康无插件版demo下载地址海康开放平台Vue3通常的引入做法应该是将demo中的webs下的jquery-1.7.1.min.js、require-2.3.3.min.js、sea-3.0.1.min.js还有codebase下的webVideoCtrl.jscodebase/encryption下的AES.js、encryption.js、cryptico.min.js、encryption.js、crypto-3.1.2.min.js放到public包下然后在index.html中引入代码示例如下!-- index.html -- script src/jquery-1.7.1.min.js/script script src/codebase/webVideoCtrl.js/script script src/require-2.3.3.min.js/script script src/sea-3.0.1.min.js/script script src/codebase/encryption/AES.js/script script src/codebase/encryption/encryption.js/script script src/codebase/encryption/cryptico.min.js/script script src/codebase/encryption/encryption.js/script script src/codebase/encryption/crypto-3.1.2.min.js/script这种方式是全局引入一次引入全局调用在对应的页面新建WebVideoCtrl 然后调用文档中的官方方法即可。本文通过动态引入可以减少全局引入带来的资源浪费首屏加载慢的问题适用手机H5环境代码如下const HIK_SDK_PROMISE_KEY __hikSdkLoadPromise; // 判断是否是非网页 H5环境 const isH5Runtime () typeof window ! undefined typeof document ! undefined; const trimText (val) String(val ?? ).trim(); const normalizeBase (basePath) trimText(basePath).replace(/\/$/, ); const loadScript (src) { return new Promise((resolve, reject) { if (!isH5Runtime()) { reject(new Error(Not H5 runtime)); return; } const existing document.querySelector(script[data-hik-src${src}]); if (existing) { if (existing.dataset.loaded 1) { resolve(); return; } existing.addEventListener(load, () resolve(), { once: true }); existing.addEventListener(error, () reject(new Error(Load script failed: ${src})), { once: true, }); return; } const script document.createElement(script); script.src src; script.async true; script.dataset.hikSrc src; script.onload () { script.dataset.loaded 1; resolve(); }; script.onerror () reject(new Error(Load script failed: ${src})); document.head.appendChild(script); }); }; export const ensureHikSdkLoaded async (basePath /mobile_camera_app/static/hikvision) { if (!isH5Runtime()) return false; if (window.WebVideoCtrl (window.$ || window.jQuery)) { return true; } // 多个页面同时进入 只挂载一次 if (window[HIK_SDK_PROMISE_KEY]) { await window[HIK_SDK_PROMISE_KEY]; return !!window.WebVideoCtrl; } const base normalizeBase(basePath); const scripts [ ${base}/jquery-1.7.1.min.js, ${base}/codebase/encryption/AES.js, ${base}/codebase/encryption/cryptico.min.js, ${base}/codebase/encryption/crypto-3.1.2.min.js, ${base}/codebase/webVideoCtrl.js, ]; window[HIK_SDK_PROMISE_KEY] (async () { for (const script of scripts) { await loadScript(script); } })(); await window[HIK_SDK_PROMISE_KEY]; return !!window.WebVideoCtrl; };在需要的页面中import导入后使用异步加载判断ensureHikSdkLoaded是否加载成功示例如下import { ensureHikSdkLoaded } from /mobile_camera_app/utils/hikSdkLoader; const loaded await ensureHikSdkLoaded(props.sdkBase); if (!loaded) throw new Error(海康SDK加载失败); // 加载成功后可以创建海康无插件版的对象然后进行官方方法的调用 const WebVideoCtrl window.WebVideoCtrl; // 以下是操作代码 ....