标签：videoObj web value topWin 海康 getElementById 大华 document 摄像头

项目是在地图上摄像头打点，点击摄像头加载当前摄像头的视频

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>

标签：videoObj,web,value,topWin,海康,getElementById,大华,document,摄像头
来源： https://blog.csdn.net/qq_42129143/article/details/111321829

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。