2024年vue3+vite+ts引入海康威视监控_vue3接入海康威视(1)，前端工程师面试该怎么准备

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

  if (state.initCount < 3) {
    setTimeout(function () {
      initPlugin();
    }, 3000);
  } else {
    console.log("插件启动失败，请检查插件是否安装！");
  }
},
cbConnectClose: function (bNormalClose) {
  // 异常断开：bNormalClose = false
  // JS\_Disconnect正常断开：bNormalClose = true
  console.log("cbConnectClose");
  state.oWebControl = null;
  console.log("插件未启动，正在尝试启动，请稍候...");
  WebControl.JS\_WakeUp("VideoWebPlugin://");
  state.initCount++;
  if (state.initCount < 3) {
    setTimeout(function () {
      initPlugin();
    }, 3000);
  } else {
    console.log("插件启动失败，请检查插件是否安装！");
  }
},

});
};
// 设置窗口控制回调
const setCallbacks = () => {
state.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: cbIntegrationCallBack,
});
};

// 推送消息
const cbIntegrationCallBack = (oData) => {
console.log(oData, “–oData”);
};

//初始化
const init = () => {
getPubKey(() => {
// 请自行修改以下变量值
var appkey = “”; //综合安防管理平台提供的appkey，必填
var secret = setEncrypt(“”); //综合安防管理平台提供的secret，必填
var ip = “”; //综合安防管理平台IP地址，必填
var playMode = 0; //初始播放模式：0-预览，1-回放
var port = 444; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = “D:\SnapDir”; //抓图存储路径
var videoDir = “D:\VideoDir”; //紧急录像或录像剪辑存储路径
var layout = “1x1”; //playMode指定模式的 布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = “secret”; //加密字段，默认加密领域为secret
var showToolbar = window.location.href.indexOf(“monitorMore”) == -1 ? 0 : 1; //是否显示工具栏，0-不显示，非0-显示
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
var buttonIDs = “0,16,256,257,258,259,260,512,513,514,515,516,517,768,769”; //自定义工具条按钮
// 请自行修改以上变量值

state.oWebControl
  .JS\_RequestInterface({
    funcName: "init",
    argument: JSON.stringify({
      appkey: appkey, //API网关提供的appkey
      secret: secret, //API网关提供的secret
      ip: ip, //API网关IP地址
      playMode: playMode, //播放模式（决定显示预览还是回放界面）
      port: port, //端口
      snapDir: snapDir, //抓图存储路径
      videoDir: videoDir, //紧急录像或录像剪辑存储路径
      layout: layout, //布局
      enableHTTPS: enableHTTPS, //是否启用HTTPS协议
      encryptedFields: encryptedFields, //加密字段
      showToolbar: showToolbar, //是否显示工具栏
      showSmart: showSmart, //是否显示智能信息
      buttonIDs: buttonIDs, //自定义工具条按钮
    }),
  })
  .then(function (oData: any) {
    console.log(oData, "oData");
    state.oWebControl.JS\_Resize(state.idWidth, state.idHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
  });

});
};

//获取公钥
const getPubKey = (callback: any) => {
state.oWebControl
.JS_RequestInterface({
funcName: “getRSAPubKey”,
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then((oData: { responseMsg: { data: string } }) => {
console.log(oData);
if (oData.responseMsg.data) {
state.pubKey = oData.responseMsg.data;
callback();
}
});
};

//RSA加密
const setEncrypt = (value: string) => {
var encrypt = new JSEncrypt();
encrypt.setPublicKey(state.pubKey);
return encrypt.encrypt(value);
};

// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener(“resize”, () => {
if (state.oWebControl != null) {
state.oWebControl.JS_Resize(state.idWidth, state.idHeight);
// setWndCover();
}
});

// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
window.addEventListener(“scroll”, () => {
if (state.oWebControl != null) {
state.oWebControl.JS_Resize(state.idWidth, state.idHeight);
// setWndCover();
}
});

//视频预览功能
const previewClick = () => {
var cameraIndexCode = props.wsUrl as any; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）

state.oWebControl.JS_RequestInterface({
funcName: “startPreview”,
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: wndId, //可指定播放窗口
}),
});
console.log(state.oWebControl.JS_RequestInterface, " ------face");
console.log(“当前的编号”, cameraIndexCode);
console.log(“执行完成”);
};

onMounted(() => {
state.idWidth = document.getElementById(state.id)?.offsetWidth;
state.idHeight = document.getElementById(state.id)?.offsetHeight;
initPlugin();
setTimeout(() => {
previewClick();
}, 16000); //一般一个监控需要延迟2秒 我这里需求显示8个 所以需要延迟16秒 具体看业务
});
onActivated(() => {
state.idWidth = document.getElementById(state.id)?.offsetWidth;
state.idHeight = document.getElementById(state.id)?.offsetHeight;
initPlugin();
setTimeout(() => {
previewClick();
}, 16000); //一般一个监控需要延迟2秒 我这里需求显示8个 所以需要延迟16秒 具体看业务
});
onDeactivated(() => {
console.log(“销毁了”);
state.oWebControl.JS_HideWnd();
state.oWebControl.JS_Disconnect().then(
function () {
//断开与插件服务连接成功
console.log(“断开与插件服务连接成功”);
},
function () {
//断开与插件服务连接失败
console.log(“断开与插件服务连接失败”);
}
);
});
watch(
() => $router.currentRoute.value.path,
(newValue, oldValue) => {
console.log(“watch”, newValue, oldValue);

setTimeout(() => {
  state.oWebControl.JS\_HideWnd();
  state.oWebControl.JS\_Disconnect().then(
    function () {
      //断开与插件服务连接成功
      console.log("断开与插件服务连接成功");
    },
    function () {
      //断开与插件服务连接失败
      console.log("断开与插件服务连接失败");
    }
  );

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）