vue 对接海康 硬件产品 录像机 WEB3.3控件开发包 V3.3_vue3 海康web3.3

前提 

        先去官网下载WEB3.3控件开发包，自己先用开发包里的 dome.html 先自测可不可行

3.0 的不支持高版本的谷歌浏览器 3.2 虽然支持 但是 需要录像机 可以传 ws流 综合 我的项目 我就 使用了3.3 

选择3.3下载到本地 

打开dome页面测试 

红框为必填 输入录像机的信息 点击开始 预览如果 显示画面 就可以 使用了

下面 就是 我看文档改的代码  文档真的很有用 哪里不懂就多看看 研究一下

第一步 

        先把需要用的文件引入 项目中

 当时 为了 方便 就 把 dome 文件 全放进了项目 引入到项目是 需要 引到public文件里的 index页面里

第二步

        代码使用：

<template>
	<div>
		<div id="divPlugin" class="plugin"></div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			oLiveView: {
				iProtocol: 1, // http 协议，1 表示 http 协议 2 表示 https 协议
				szIP: '', // 设备的 IP 地址或者普通域名(比如花生壳域名)
				szPort: '', // 登录设备的 http/https 端口号，根据 iPrototocol 选择传入不同的端口
				szUsername: '', // 登录用户名称
				szPassword: '', // 登录用户密码
				iStreamType: 1, // 码流类型 1-主码流，2-子码流，默认使用主码流预览
				iChannelID: 1, // 播放通道号，默认通道 1
				bZeroChannel: false, // 是否播放零通道，默认为 false
			},
		};
	},
	mounted() {
		this.initPlugin();
	},
	methods: {
		// 初始化插件参数及插入插件
		initPlugin() {
			let this_ = this;
			let oLiveView = this.oLiveView;
			window.WebVideoCtrl.I_InitPlugin({
				bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
				iWndowType: 1,
				cbInitPluginComplete: function () {
					console.log('初始化');
					window.WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then(
						() => {
							// 检查插件是否最新
							window.WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
								if (bFlag) {
									console.log(
										'检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！'
									);
								}
								this_.clickLogin(oLiveView);
							});
						},
						() => {
							console.log(
								'插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe升级！'
							);
						}
					);
				},
			});
		},
		// 登录
		clickLogin(oLiveView) {
			let this_ = this;
			window.WebVideoCtrl.I_Login(
				oLiveView.szIP, //设备的 IP 地址
				oLiveView.iProtocol, //http 协议，1 表示 http 协议 2 表示 https 协议
				oLiveView.szPort, //登录设备的 http/https 端口号，根据 iPrototocol 选择传入不同的端口
				oLiveView.szUsername, //登录用户名称
				oLiveView.szPassword, //用户密码
				{
					timeout: 3000,
					success: function () {
						console.log(' 登录成功！');
						this_.clickGetDigitalChannelInfo(oLiveView);
					},
					error: function (oError) {
						console.log(' 登录失败！', oError.errorCode, oError.errorMsg);
					},
				}
			);
		},
		// 获取 端口 数字通道 (必须先获取端口 数字通道 或 模拟通道 才能开始预览)
		clickGetDigitalChannelInfo(oLiveView) {
			let this_ = this;
			var szDeviceIdentify = oLiveView.szIP + '_' + oLiveView.szPort;
			// 获取端口
			window.WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then(
				(oPort) => {
					console.log(' 获取端口成功！');
					// 获取数字通道
					window.WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
						async: false,
						success: function () {
							this_.clickStartRealPlay(oLiveView);
							console.log(' 获取数字通道成功！');
						},
						error: function () {
							console.log(' 获取数字通道失败！');
						},
					});
				},
				(oError) => {
					console.log(' 获取端口失败！');
				}
			);
		},
 
		// 开始预览
		clickStartRealPlay(oLiveView) {
			var szDeviceIdentify = oLiveView.szIP + '_' + oLiveView.szPort;
			window.WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
				// iWndIndex: i,
				iStreamType: oLiveView.iStreamType,
				// iChannelID: i + 1,
				bZeroChannel: oLiveView.bZeroChannel,
				success: function () {
					console.log('预览成功！');
				},
				error: function (status) {
					if (403 === status) {
						console.log('设备不支持Websocket取流！');
					} else {
						console.log('预览失败！');
					}
				},
			});
		},
	},
};
</script>
<style lang="scss">
.plugin {
	width: 665px;
	height: 878px;
}
</style>