首先启动插件包里的nginx进行测试,可以播放说明设备支持,直接上代码。
(nginx修改了配置以后保险起见把任务全部关闭再重启nginx,tmd改了俩小时才发现配置没生效)
nginx如果不用暴力带的只需要这几部分
location ~ /ISAPI|SDK/ {
if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
proxy_pass http://$cookie_webVideoCtrlProxy;
break;
}
}
location ^~ /webSocketVideoCtrlProxy {
#web socket
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
if ($http_cookie ~ "webVideoCtrlProxyWs=(.+)") {
proxy_pass http://$cookie_webVideoCtrlProxyWs/$cookie_webVideoCtrlProxyWsChannel?$args;
break;
}
if ($http_cookie ~ "webVideoCtrlProxyWss=(.+)") {
proxy_pass http://$cookie_webVideoCtrlProxyWss/$cookie_webVideoCtrlProxyWsChannel?$args;
break;
}
}
location / {
# root html/pc2;
root 放自己的前端包路径;
try_files $uri $uri/ /index.html;
}
完整代码
<template>
<div class="hello">
<div class="left">
<div :id="'divPlugin_' + index" class="plugin"></div>
</div>
</div>
</template>
<script setup>
import {nextTick, onMounted} from 'vue';
const props = defineProps({
szIP: {
type: String, // 摄像头对应ip
},
szPort: {
type: String, // 对应端口
},
szUsername: {
type: String, // 用户名
},
szPassword: {
type: String, // 密码
},
index: {
type: Number, // 调用顺序(后面单独说这个参数的用处)
},
});
onMounted(() => {
nextTick(() => {
window.WebVideoCtrl.I_InitPlugin(1000, 500, {
bWndFull: true, // 是否支持单窗口双击全屏,默认支持 true:支持 false:不支持
iPackageType: 2,
// szColorProperty:"plugin-background:0000ff; sub-background:0000ff; sub-border:00ffff; sub-border-select:0000ff", //2:PS 11:MP4
iWndowType: 1,
bNoPlugin: true,
cbInitPluginComplete() {
window.WebVideoCtrl.I_InsertOBJECTPlugin(`divPlugin_${props.index}`);
// 检查插件是否最新
if (window.WebVideoCtrl.I_CheckPluginVersion() == -1) {
alert('检测到新的插件版本,双击开发包目录里的WebComponentsKit.exe升级!');
}
},
});
login();
});
});
const login = () => {
if (props.szIP == '' || props.szPort == '') {
return;
}
const iRet = window.WebVideoCtrl.I_Login(props.szIP, 1, props.szPort, props.szUsername, props.szPassword, {
success() {
console.log('登录成功!', props.index);
// preView();
setTimeout(() => {
preView();
}, props.index * 500);
},
error() {
console.log('登录失败!');
},
});
if (iRet == -1) {
console.log('已登录过!');
preView();
// setTimeout(() => {
// preView();
// }, props.index * 500);
}
};
const preView = () => {
const szDeviceIdentify = `${props.szIP}_${props.szPort}`;
console.log('szDeviceIdentify', szDeviceIdentify);
// iWndIndex 播放窗口,如果不传,则默认使用当前选择窗口播放(默认选中窗口0)
// iStreamType 码流类型1-主码流,2-子码流,默认使用主码流预览
// iChannelID 播放通道号,默认通道1
// bZeroChannel 是否播放零通道,默认为false
// iPort RTSP端口号,可以选择传入,如果不传,开发包会自动判断设备的RTSP端口
// success 成功回调函数
// error 失败回调函数
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
iStreamType: 2,//码流类型,2为子码流
success: function () {
// that.$notify({
// title: "成功",
// message: "开始预览通道" + iChannelID + "成功",
// type: "success",
// });
},
error(status, xmlDoc2) {
console.log(xmlDoc2); //不能删除
// that.$notify({
// title: "失败",
// message: "开始预览通道" + iChannelID + "失败",
// type: "error",
// });
if (status === 403) {
console.log("szInfo 设备不支持Websocket取流!");
} else {
console.log("开始预览失败 ", status, xmlDoc2);
}
},
});
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.plugin {
width: 1000px;
height: 500px;
}
</style>
调用
<haikang
szIP="设备IP"
szPort="端口80"
szUsername="账号admin"
szPassword="密码xxxx"
:index="0"
/>
增加index的目的是可以多画面预览,这样比较简单,延迟加载,如果不延迟加载只会显示一个画面