vue2hk-camera
/
index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>拍照系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="static/css/ele.css">
    <link rel="stylesheet" href="static/css/myCss.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="30vw">
            <div id="myVideo" @dblclick="fullscreen"></div>
        </el-aside>
        <el-main>
            <el-row>姓名：
                <el-input v-model="name" placeholder="请输入.." clearable autofocus style="width: 15vw;"></el-input>
            </el-row>
            <el-divider content-position="left">拍照控制</el-divider>
            <el-card shadow="hover">
                <el-row type="flex" justify="space-around">
                    <el-col :span="6">
                        <div class="box">
                            <div>
                                <el-tooltip effect="dark" content="向上" placement="top" :open-delay="500">
                                    <el-button icon="el-icon-arrow-up" @mousedown.native="ptzControl(1, false, '向上')"
                                               @mouseup.native="ptzControl(1, true, '向上')"></el-button>
                                </el-tooltip>
                            </div>
                            <div class="left">
                                <el-tooltip effect="dark" content="向左" placement="left" :open-delay="500">
                                    <el-button icon="el-icon-arrow-left" @mousedown.native="ptzControl(3, false, '向左')"
                                               @mouseup.native="ptzControl(3, true, '向左')"></el-button>
                                </el-tooltip>
                            </div>
                            <div class="right">
                                <el-tooltip effect="dark" content="向右" placement="right" :open-delay="500">
                                    <el-button icon="el-icon-arrow-right" @mousedown.native="ptzControl(4, false, '向右')"
                                               @mouseup.native="ptzControl(4, true, '向右')"></el-button>
                                </el-tooltip>
                            </div>
                            <div class="bottom">
                                <el-tooltip effect="dark" content="向下" placement="bottom" :open-delay="500">
                                    <el-button icon="el-icon-arrow-down" @mousedown.native="ptzControl(2, false, '向下')"
                                               @mouseup.native="ptzControl(2, true, '向下')"></el-button>
                                </el-tooltip>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="box">
                            <el-row type="flex" justify="space-around" class="row-bg">
                                <el-col :span="9">
                                    <el-popover
                                            placement="top"
                                            trigger="click"
                                            v-model="visible">
                                        <el-button-group>
                                            <el-button @click="choose('left')" circle>左侧</el-button>
                                            <el-button @click="choose('center')" circle>正面</el-button>
                                            <el-button @click="choose('right')" circle>右侧</el-button>
                                        </el-button-group>
                                        <el-button plain icon="el-icon-camera" slot="reference">拍照</el-button>
                                    </el-popover>
                                </el-col>
                                <el-col :span="9">
                                    <el-button plain icon="el-icon-download" @click="download">保存</el-button>
                                </el-col>
                            </el-row>
                            <el-row type="flex" justify="space-around" class="row-bg">
                                <el-col :span="9">
                                    <el-button plain icon="el-icon-plus" @mousedown.native="ptzControl(10, false, '放大')"
                                               @mouseup.native="ptzControl(11, true, '放大')">放大
                                    </el-button>
                                </el-col>
                                <el-col :span="9">
                                    <el-button plain icon="el-icon-minus"
                                               @mousedown.native="ptzControl(11, false, '缩小')"
                                               @mouseup.native="ptzControl(11, true, '缩小')">缩小
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="6"></el-col>
                </el-row>
            </el-card>
            <el-divider content-position="left">照片预览</el-divider>
            <el-row type="flex" justify="space-around">
                <el-col :span="6">
                    <el-card shadow="hover" :class="status === 'left' ? 'blink' : ''">
                        <div slot="header" class="clearfix">
                            <span>左侧</span>
                            <el-button class="remake" type="text" @click="pic1 = '';status = 'left'">重拍</el-button>
                        </div>
                        <el-image class="pic-bottom" :src="pic1">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" :class="status === 'center' ? 'blink' : ''">
                        <div slot="header" class="clearfix">
                            <span>正面</span>
                            <el-button class="remake" type="text" @click="pic0 = '';status = 'center'">重拍</el-button>
                        </div>
                        <el-image class="pic-bottom" :src="pic0">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" :class="status === 'right' ? 'blink' : ''">
                        <div slot="header" class="clearfix">
                            <span>右侧</span>
                            <el-button class="remake" type="text" @click="pic2 = '';status = 'right'">重拍</el-button>
                        </div>
                        <el-image class="pic-bottom" :src="pic2">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<script src="jquery-1.7.1.min.js"></script>
<script id="videonode" src="codebase/webVideoCtrl.js"></script>
<script src="codebase/encryption/cryptico.min.js"></script>
<script src="static/js/vue.js"></script>
<script src="static/js/ele.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            name: "嫌疑人xx",
            hkvInfo: {
                ip: "",
                port: "",
                username: "",
                password: "",
            },
            dom: {
                width: 0,
                height: 0,
                wndIndex: 0,
                streamType: 1,
                channelID: 1,
            },
            img: "",
            visible: false,
            status: "",
            pic0: "",
            pic1: "",
            pic2: ""
        },
        methods: {
            fullscreen() {
                WebVideoCtrl.I_FullScreen(true);
            },
            initDom() {
                let vm = this;
                WebVideoCtrl.I_InitPlugin(vm.dom.width, vm.dom.height, {
                    // WebVideoCtrl.I_InitPlugin(500, 300, {
                    bWndFull: true,
                    iPackageType: 2,
                    iWndowType: 1,
                    bNoPlugin: true,
                    cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
                        let szInfo = "当前放大的窗口编号：" + iWndIndex;
                        if (!bFullScreen) {
                            // WebVideoCtrl.I_FullScreen(true);
                            szInfo = "当前还原的窗口编号：" + iWndIndex;
                        }
                        console.log(szInfo);
                    },
                    cbSelWnd: function (xmlDoc) {
                        vm.dom.wndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
                        const szInfo = "当前选择的窗口编号：" + vm.dom.wndIndex;
                        console.log(szInfo);
                    },
                    cbInitPluginComplete: function () {
                        WebVideoCtrl.I_InsertOBJECTPlugin("myVideo");
                    }
                });
            },
            initData() {
                let vm = this;
                $.ajaxSettings.async = false;
                $.getJSON('conf.json', data => vm.hkvInfo = data);
                $.ajaxSettings.async = true;
            },
            isOk() {
                return WebVideoCtrl.I_SupportNoPlugin();
            },
            login() {
                let vm = this;
                WebVideoCtrl.I_Login(vm.hkvInfo.ip, 1, vm.hkvInfo.port, vm.hkvInfo.username, vm.hkvInfo.password, {
                        async: false,
                        success: function (xmlDoc) {
                            vm.$notify.success("设备: " + vm.hkId + " 登录成功！");
                            vm.play();
                        },
                        error: function (status, xmlDoc) {
                            vm.$message.error("设备: " + vm.hkId + "登录失败，状态码: " + status, xmlDoc);
                        },
                    }
                );
            },
            play() {
                let vm = this;
                WebVideoCtrl.I_StartRealPlay(vm.hkId, {
                    iWndIndex: vm.dom.wndIndex,
                    iStreamType: vm.dom.streamType,//码流类型 1-主码流，2-子码流，默认使用主码流预览
                    iChannelID: vm.dom.channelID,
                    bZeroChannel: false,
                    success: function (xmlDoc) {
                        vm.$notify.success("预览成功！");
                    },
                    error: function (status, xmlDoc) {
                        if (403 === status) {
                            vm.$message.warning("设备不支持Websocket取流！")
                        } else {
                            vm.$message.error("预览失败！")
                        }
                    }
                });
            },
            choose(direction) {
                let vm = this;
                vm.status = direction;
                vm.visible = false;
            },
            download() {
                let vm = this;
                /* todo 无效
                 let canvas = document.getElementById(vm.status);
                 let ctx = canvas.getContext("2d");
                 let v = document.getElementById("canvas0");
                 // let dd = document.getElementsByClassName("el-image__inner");
                 console.log(v);
                 // console.log(dd[0]);

                 let width = v.width;
                 let height = v.height;
                 // ctx.drawImage(dd[0], width / 3, 0, width, height, 0, 0, width, height);
                 ctx.drawImage(v, 0, 0, width, height);*/

                let picName = vm.name + "_" + vm.newTime() + "_" + vm.status;

                WebVideoCtrl.I2_CapturePicData().then(function (data) {
                    let blob = new Blob([data], {type: 'application/octet-stream'});
                    let url = window.URL.createObjectURL(blob);

                    vm.clippingImage(url, 2560, 1440, 1, function (res) {
                        vm.status === 'center' ? vm.pic0 = res : vm.status === 'left' ? vm.pic1 = res : vm.pic2 = res;
                        vm.downImg(res, picName);
                        vm.status = '';
                        console.log("抓图上传成功！");
                    })
                    //抓原图
                    /*WebVideoCtrl.I2_CapturePic(picName, {}).then(function () {
                        console.log("抓图成功！");
                    }, function () {
                        console.error("抓图失败！");
                    });*/
                }, function () {
                    console.log("抓图上传失败！");
                });
            },
            //源码改动 todo
            //iAnalogChannelNum=1 -> iAnalogChannelNum=0
            ptzControl(index, isOk, val) {
                WebVideoCtrl.I_PTZControl(index, isOk, {
                    iPTZSpeed: 4,
                    success: function (xmlDoc) {
                        console.log(val + (isOk ? "结束" : "开始") + '成功！', xmlDoc);
                    },
                    error: function (status, xmlDoc) {
                        console.log(val + (isOk ? "结束" : "开始") + " 失败！", status, xmlDoc);
                    }
                });
            },
            newTime() {
                let date = new Date();
                return date.getFullYear() + "-" + (parseInt(date.getMonth()) + 1) + "-" + date.getDate() + " " + date.getHours() + "：" + date.getMinutes() + "：" + date.getSeconds();
            },
            clippingImage(base64Codes, width, height, quality, callback) {
                let img = new Image();
                img.src = base64Codes;
                let canvas = document.createElement('canvas');
                let ctx = canvas.getContext('2d');
                canvas.width = width / 3; // 设置宽度
                canvas.height = height;
                img.onload = function () {
                    ctx.drawImage(img, width / 3, 0, width / 3, height, 0, 0, width / 3, height);
                    let base64Result = canvas.toDataURL('image/png', quality);
                    callback(base64Result)
                }
            },
            downImg(data, fileName) {
                let a;
                a = document.createElement('a');
                a.href = data;
                a.download = fileName;
                document.body.appendChild(a);
                a.style = 'display: none';
                a.click();
                a.remove();
            }
        },
        computed: {
            hkId() {
                return this.hkvInfo.ip + '_' + this.hkvInfo.port;
            }
        },
        mounted() {
            let vm = this;
            vm.dom.width = document.body.clientWidth;
            vm.dom.height = document.body.clientHeight;
            console.log("dom:" + vm.dom);
            if (vm.isOk()) {
                vm.$notify({
                    message: "浏览器支持无插件模式",
                    duration: 1000
                });
                vm.initDom();
                vm.initData();
                vm.login();
            } else {
                vm.$message.error("此浏览器暂不支持··");
            }
        },
        destroyed() {
            WebVideoCtrl.I_Logout(this.hkId);
        }
    })
</script>
</html>