最新VUE3对接海康威视监控接口，实现实时查看监控。_vue3使用海康，Web开发必看

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

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

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”);

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

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

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

对重绘和回流的理解

• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

[外链图片转存中…(img-gRXW3a5d-1715252204816)]