首页 / 更多教程 / web前端对接海康大华视频
web前端对接海康大华视频
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了web前端对接海康大华视频,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2322字,纯文字阅读大概需要4分钟。
内容图文
![web前端对接海康大华视频](/upload/InfoBanner/zyjiaocheng/1034/f20669724bed4d78b3ad230938d18b95.jpg)
项目是在地图上摄像头打点,点击摄像头加载当前摄像头的视频
1下载web开发包
2整合代码,将代码放到nginx里面启动
3安装插件
4相关文件下载地址:
链接:相关地址
提取码:e247
5代码实现
我是以弹框形式的iframe加载的,代码层面的处理方式都是一样的,全都使用nginx代理一个页面直接显示。
<template>
//点击摄像头出现的弹框
<el-dialog style="z-index: 3;" :title="title" :visible.sync="dialogVisible" :show-close="false" :width="'60%'" :before-close="closePreviewClick" top="5vh">
<iframe
:src="fileUrl"
type="application/x-google-chrome-pdf"
width="100%"
id="iframe_corn"
name="iframe_corn"
height="100%" />
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">关 闭</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
fileUrl: "http://localhost:8099/DHVideo/index.html",
title:"视频信息"
}
},
methods: {
//外部调用本方法,传入nginx启动的url和视频的相关参数
openAndCloseBox(val,url,videoObj) {
let that = this;
this.fileUrl = url;
this.dialogVisible = val;
this.title = videoObj.name;
//延时加载,为什么呢,要不然第一遍拿不到iframe
setTimeout(function () {
//因为大华的摄像头需要ip端口用户名密码登录,进行赋值操作
that.giveValue(videoObj);
},3000)
},
//关闭弹框的操作
closePreviewClick() {
if(this.dialogVisible == true) {
//清空内容 并且退出大华的登录状态
var topWin = window.top.document.getElementById("iframe_corn").contentWindow;
//通过获取到的window对象操作HTML元素,这和普通页面一样
topWin.document.getElementById("loginip").value = "";
topWin.document.getElementById("port").value = "";
topWin.document.getElementById("username").value = "";
topWin.document.getElementById("password").value = "";
topWin.document.getElementById("clickLogout").click();
this.dialogVisible = false;
}
},
//赋值操作
giveValue(videoObj){
//此处一定要这样写ie才能拿到,要不然获取不到元素
var topWin = window.top.document.getElementById("iframe_corn").contentWindow;
//通过获取到的window对象操作HTML元素,这和普通页面一样
topWin.document.getElementById("loginip").value = videoObj.ip;
topWin.document.getElementById("port").value = videoObj.port;
topWin.document.getElementById("username").value = videoObj.username;
topWin.document.getElementById("password").value = videoObj.password;
}
},
}
</script>
<style scoped>
/deep/ .el-dialog__wrapper {
z-index: 10000;
}
/deep/ .el-dialog__body {
height: 70vh;
padding: 0 20px;
}
</style>
内容总结
以上是互联网集市为您收集整理的web前端对接海康大华视频全部内容,希望文章能够帮你解决web前端对接海康大华视频所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。