1、摄像头准备工作
摄像头安装插件
1.首先去海康威视官网-海康开放平台
2.如果没有账号的可以先注册一个账号,有账号的直接登录
3.支持与服务-工具下载
4.产品型号选择
5.产品-资源工具
6.选择WebSDK无插件版
7.点击Web3.4控件开发包V3.4的立即下载
8.下载下来的压缩包,进行解压
9.解压下来之后进入文件夹有三个文件夹，第一个是demo，第二个是使用说明，第三个是代理
10.进入webs文件夹后再进入codebase直接点击第一个HCWebSDKPluginsUserSetup.exe进行安装
2、了解自带demo参数
1.根据docs文件夹里写的进行操作
2.demo页面参数，摄像头ip购买时自带；填写ip，用户名密码，点击登录，开始预览，就会出现监控画面
3、开始在vue项目里引入海康威视插件
1.需要导入文件分别为：webs\jquery-1.7.1.min.js和\webs\codebase\jsVideoPlugin-1.0.0.min.js和webs\codebase\webVideoCtrl.js
2.找到后一起放到public文件夹下，和index在同一层；
3.在public\index.html引入文件；
4.在需要做监控的页面的div写一个WebSDK视频插件容器（要给宽和高）
<!-- WebSDK视频插件容器 -->
<div
id="divPlugin"
class="plugin"
style="width: 100%; height: 100%"
></div>
5.查看docs\WebSDK_Plugin_V3.4.0编程指南.docx,了解函数调用顺序
6.根据函数先进行初始化插件
// 初始化海康
initWebSDK() {
WebVideoCtrl.I_InitPlugin({
iWndowType: 1,
bWndFull: true,
cbInitPluginComplete: () => {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(
() => {
WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
if (bFlag) {
alert("检测到新的插件版本，双击开发包目录里的exe升级");
}
// SDK初始化成功后，自动调用登录
setTimeout(() => {
this.Login();
}, 1000);
});
},
() => {
alert(
"插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPluginUserSetup.exe安装"
);
}
);
},
});
},
mounted() {
// 初始化海康威视WebSDK 使用的是 3.4.0版本
this.initWebSDK();
},
7.再进行登录，登录后进行预览；（登录我这里写了登录按钮，可以点击，刚进入页面是自动进行点击登录然后直接开始预览，在上面初始化函数里调用自动登录--看第六条）
<el-button size="small" type="primary" round @click="Login"
>登录</el-button
>
<el-button
size="small"
type="success"
round
@click="see"
style="display: none"
>预览</el-button
>
data() {
return {
// 海康威视WebSDK相关数据
ip: "xxx.xx.xx.xx", // 默认IP地址
Protocol: 0, // 默认协议 0:HTTP 1:HTTPS
port: "80", // 默认端口
username: "admin", // 默认用户名
password: "xxxxxxx", // 默认密码
};
},
// 登录
Login() {
// 确保WebVideoCtrl已初始化
if (!WebVideoCtrl) {
console.error("WebVideoCtrl未初始化");
alert("WebVideoCtrl未初始化，请检查插件加载情况");
return;
}
WebVideoCtrl.I_Login(
this.ip,
this.Protocol,
this.port,
this.username,
this.password,
{
success: (xmlDoc) => {
console.log("登录成功", xmlDoc);
// 登录成功后，自动调用预览
setTimeout(() => {
this.see();
}, 1000);
},
error: (oError) => {
console.error("登录失败", oError);
let errorMsg = "登录失败";
if (oError && oError.errorMsg) {
errorMsg += `: ${oError.errorMsg}`;
} else if (oError && oError.errorCode) {
errorMsg += `: 错误码 ${oError.errorCode}`;
}
console.warn(errorMsg); // 使用console.warn而不是alert，避免阻塞用户体验
},
}
);
},
// 预览
see() {
WebVideoCtrl.I_StartRealPlay(this.ip + "_" + this.port, {
success: () => {
console.log("预览成功");
},
});
},
8.点击登录的时候报错，但是控制台显示登录成功,我们只要找到报错的地方在哪，然后注释掉 （可以看到2212行reject返回了一个错误,但是我们是登录成功的，所以我们要直接消掉这个错误，我们在代码里找到这段代码直接注释掉就好了）
9.想要退出监控的话，要先停止预览，再退出，如果离开页面要进行销毁，不然会一直停留在页面上（我这里写了按钮，直接点击登出按钮，可以先进行停止预览再退出，大家顺序一定不能错了）
<el-button
size="small"
type="warning"
round
@click="stopAllPlay"
style="display: none"
>退出预览</el-button
>
<el-button size="small" type="danger" round @click="logout"
>登出</el-button
>
<button @click="breakdom">销毁插件</button>
// 停止预览
stopAllPlay() {
WebVideoCtrl.I_StopAllPlay();
console.log("停止预览成功");
},
// 退出登录
logout() {
// 先停止预览
this.stopAllPlay();
// 然后登出
WebVideoCtrl.I_Logout(this.ip + "_" + this.port);
console.log("退出登录成功");
},
// 销毁插件
breakdom() {
WebVideoCtrl.I_DestroyPlugin();
},
如此便是vue项目里使用海康威视监控的全部操作。如何还需要其他功能，可以查看官方文件。
