vue用iframe播放海康视频

由于项目需要同时显示两个相机的视频，使用上一篇文章封装的组件无法完成，因为当时webVideoCtrl.js是直接定义在全局的，$相当于一整个项目的window,无论怎么使用都只能在第一次定义的dom位置显示视频（如果有更好的方法欢迎评论区告知），因此使用了iframe隔离window。

1.在public地址下添加iframe.html

2.iframe.html

<!doctype html>
<html>
<head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Cache-Control" content="no-cache, must-revalidate" /><meta http-equiv="Expires" content="0" />
</head>
<style type="text/css">
html, body {margin: 0;padding: 0;border: 0;width: 100%;height: 100%;
}
.plugin {width: 100%;height: 100%;
}
</style>
<body><div id="divPlugin" class="plugin"></div>
</body>
<script type="text/javascript" src="static/haikang/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="static/haikang/webVideoCtrl.js"></script>
<script>// 向父vue页面发送信息window.parent.postMessage({cmd: 'run',params: {success: true}}, '*');// 接受父页面发来的信息window.addEventListener("message", function(event){var data = event.data;switch (data.cmd) {case 'getFormJson':// 处理业务逻辑companyVideoData = data.paramsvideoInitPlugin()break;}});var companyVideoData = {}// 接受父页面发来的信息function videoInitPlugin() {var iRet = WebVideoCtrl.I_CheckPluginInstall();if (iRet === -1) {alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");return;}initPlugin();}//插件初始化function initPlugin() {var that = this;WebVideoCtrl.I_InitPlugin('100%', '100%', {szContainerID: 'divPlugin',bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstalliWndowType: 1, // 窗口数量n*nszColorProperty: 'plugin-background:000000; sub-background:000000; sub-border:000000; sub-border-select:000000',// bDebugMode: true,cbSelWnd: function (xmlDoc) {},});// 绑定的dom名称WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin');clickLogin(companyVideoData);}function clickLogin(data) {var that = this;WebVideoCtrl.I_Login(data.IP,1,data.Port,data.Username,data.Password,{async: false,success: function (xmlDoc) {console.log("开始预览", that.cName); //不能删除that.getChannelInfo();},error: function () {console.log("login error");},});}//获取通道function getChannelInfo() {var that = this;// this.szIP = companyVideoData.IP// 模拟通道WebVideoCtrl.I_GetAnalogChannelInfo(that.companyVideoData.IP, {async: false,success: function (xmlDoc) {var oChannels = $(xmlDoc).find("VideoInputChannel");// nAnalogChannel = oChannels.length;that.initPlay();console.log("获取模拟通道成功！", that.cName)},error: function () {console.log("获取模拟通道失败！"+WebVideoCtrl.I_GetLastError())},});// 数字通道WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.IP, {async: false,success: function (xmlDoc) {var oChannels = $(xmlDoc).find("InputProxyChannelStatus");that.initPlay();// that.$emit("func", oChannels); //获取数字通道传给父组件console.log("获取数字通道成功！")},error: function () {WebVideoCtrl.I_GetLastError();console.log("获取数字通道失败！"+WebVideoCtrl.I_GetLastError())},});// 零通道WebVideoCtrl.I_GetZeroChannelInfo(that.companyVideoData.IP, {async: false,success: function (xmlDoc) {var oChannels = $(xmlDoc).find("ZeroVideoChannel");console.log("获取零通道成功！")},error: function () {console.log("获取零通道失败！"+WebVideoCtrl.I_GetLastError())},});}//初始化视频，为了让用户进来就可以看到视频播放function initPlay() {let szIP = companyVideoData.IP; //ip地址var iStreamType = 1;// 目前只需要显示一个通道var iChannelID = parseInt(1, 10);WebVideoCtrl.I_StartRealPlay(szIP, {iStreamType: iStreamType,iChannelID: iChannelID,iWndIndex: 0,});WebVideoCtrl.I_ChangeWndNum(1); //分屏}// 点击查看具体哪个监控function startRealPlay(oChannels) {let that = this;let szIP = companyVideoData.IP; //ip地址let iChannelID = oChannels; //播放通道号var iStreamType = 1;var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);if (oWndInfo != null) {// 已经在播放了，先停止WebVideoCtrl.I_Stop();}WebVideoCtrl.I_StartRealPlay(szIP, {iStreamType: iStreamType,iChannelID: iChannelID,});}
</script>
</html>

3.组件中调用并传输数据

<template><div class="video-player"><iframe ref="iframe" class="divPlugin" :src="iframeSrc" frameborder="0"></iframe></div>
</template>
<script>
export default {props: {//从父组件传来的数据，IP、用户名、密码、端口号companyVideoData: {type: Object,},//分屏数量videoType: Number,// 相机名称cName: String},data() {return {// 分割线iframeWin: {},iframeSrc: 'iframe.html'};},created() {},mounted() {// this.videoInitPlugin();window.addEventListener('message', this.handleMessage)this.iframeWin = this.$refs.iframe.contentWindow},methods: {async handleMessage (event) {const data = event.dataswitch (data.cmd) {case 'run':if (data.params.success) {// 调用报名方法await this.sendMessage()} else {console.log('视频启动失败')}break}},sendMessage () {// 外部vue向iframe内部传数据this.iframeWin.postMessage({cmd: 'getFormJson',params: {...this.companyVideoData}}, '*')}}
};
</script>
<style  scoped>
.video-player {width: 100%;height: 100%;
}
.divPlugin {width: 100%;height: 100%;color: red;/* display: flex; */background: gray;/* border: 1px solid black; */justify-content: center;align-items: center;font-size: 18px;
}
.down {width: 100%;height: 100%;color: red;display: flex;justify-content: center;align-items: center;font-size: 18px;
}
.down a {color: red;
}
</style>

4.父组件调用子组件

// 此处cName是因为我需要for循环显示两个视频，如果只要显示一个，不需要传入cName，companyVideoData传入你想要的数据即可
<!-- 海康 -->
<div class="cBox" v-if="displayModeId == 1"><hai-kang-camara:cName="i==0 ? 'icamera' : 'vcamera'":companyVideoData="i==0 ? vcamera : icamera":videoType = 1></hai-kang-camara>
</div>// 登录所需的参数
vcamera: {IP: "192.168.1.64",Port: 80,Username: "admin",Password: "xxxxxxxx",},
icamera: {IP: "192.168.1.64",Port: 80,Username: "admin",Password: "xxxxxxxx"
},// videoType要展示的通道数量videoType: 1

5.效果

vue用iframe播放海康视频相关推荐

浏览器播放海康视频技术选型
以前公司的B/S在播放海康的实时流时,用的是海康SDK中的ocx控件,如果视频源换成大华或者我们自己的,就瞎了,所以考虑做一个框架可以支持任何实时h264码流. 经过几天的搜索,有如下几种方案: 1) ...
ffmpge海康视频文件格式转换
陈拓 2021/08/29-2020/08/29 1. 概述在<海康威视SDK控制台程序consoleDemo将实时码流保存为视频文件> https://zhuanlan.zhihu.c ...
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
java 前台播放视频_「纯js项目」海康视频项目,java后台+前台web显示的,望提供思路！...
纯js项目: 海康视频项目,java后台+前台web显示的,望提供思路! 如果只是实现BS架构,可以向海康要web开发包,直接使用浏览器通过ocx访问海康设备浏览视频,如果需要的功能不全,再使用JNI ...
海康视频VTM流监控浏览器实时播放调试总结
海康视频VTM流播放调试总结 VTM视频demo调用部分代码配置好地址账号密码后即可进行浏览器实时调用demo实现网域ip可在vtm服务配置中获取设备编码需注意: 设备编码取此处编码设备编号,可 ...
使用海康视频插件，启动失败解决办法（基于VUE）
问题:使用海康视频插件,插件在谷歌浏览器中启动失败问题(这个海康插件实在是坑人) 原因: 是因为海康的插件还没支持高版本谷歌,这个原因我是醉醉的. 解决办法: 使用低版本谷歌浏览器(94版本以下) ...
使用vue二次开发海康监控H5视频播放
使用vue二次开发海康监控H5视频播放西瓜播放器示例demo 阿里云的示例demo 使用海康的H5视频开发包, 海康的api 页面中的使用第一步第二步第三步第四步切记 bug 由于公司项目 ...
web端对接海康视频3.2开发包以及遇到的坑
须知: 3.0开发包功能比较全,但是只支持ie浏览器,所以使用的功能相对来说较少的3.2开发包,开发包官网上可以下载,可自行下载,并按照要求引入文件. 我的项目需求是左侧显示摄像头树状列表,中间部分显 ...
调用海康视频接口获取预览取流的URL
开始之前请参考海康官方SDK文档鉴于前段时间刚接触视频这一块,整理了自己的一些经验,具体的你们还是参考文档来吧附上文档地址 https://open.hikvision.com/docs/docI ...

vue用iframe播放海康视频

1.在public地址下添加iframe.html

2.iframe.html

3.组件中调用并传输数据

4.父组件调用子组件

5.效果

vue用iframe播放海康视频相关推荐

最新文章

热门文章