首先安装海康的web控件:
https://github.com/wuxiao-D/hikvs-web/blob/master/public/static/VideoWebPlugin.exe
安装:
npm install hikvs-web
在main.js中:
import hikComp from 'hikvs-web'
Vue.use(hikComp)
使用的页面:
<hik-comp style="width: 200px; height: 90px;" :playConfig="playConfig"
:nameId="jkInfo.nameId" :cameraIndexCode="jkInfo.cameraIndexCode" />
data() {
return {
jkInfo: {
nameId: "playWnd1", // nameId 具有唯一性,否则无效,如果循环有多个,一定不能重复
cameraIndexCode: "xxxx", // 监控点编号
}
}
},
computed: {
/** start 海康视频WEB插件,请自行修改以下配置项 */
playConfig: function () {
return {
appkey: "",
secret: "",
ip: "",
playMode: 0,
port: 443,
snapDir: "D:\\SnapDir",
videoDir: "D:\\VideoDir",
layout: "1x1",
enableHTTPS: 1,
encryptedFields: 'secret',
showToolbar: 0,
showSmart: 0,
buttonIDs: "",
toolBarButtonIDs: "4098",
}
}
/** end 海康视频WEB插件,请自行修改以上配置项 */
}
即可显示