<template>
    <div :style="{position: relative,width:w,height:h}">
        <video
            :style="{ height: h,width:w}"
            style="object-fit: fill"
            :id="`camera${id}`"
            autoplay
            muted
            controls
        >
        </video>

        <div class="operation-list">
            <div class="operation-item">
                <img
                    :src="zoomSubUrl"
                    alt=""
                    @mousedown=zoomDecStart($event,id)
                    @mouseleave=zoomDecStop($event,id)
                >
                <span>变倍</span>
                <img
                    :src="zoomAddUrl"
                    alt=""
                    @mousedown=zoomAddStart($event,id)
                    @mouseleave=zoomAddStop($event,id)
                >
            </div>
            <div class="operation-item">
                <img
                    :src="focusSubUrl"
                    alt=""
                    @mousedown=focusDecStart($event,id)
                    @mouseleave=focusDecStop($event,id)
                    @mouseup=focusDecStop($event,id)
                >
                <span>变焦</span>
                <img
                    :src="focusAddUrl"
                    alt=""
                    @mousedown=focusAddStart($event,id)
                    @mouseleave=focusAddStop($event,id)
                    @mouseup=focusAddStop($event,id)
                >
            </div>
            <div class="operation-item">
                <img
                    :src="irisSubUrl"
                    alt=""
                    @mousedown=irisDecStart($event,id)
                    @mouseup=irisDecStop($event,id)
                    @mouseleave=irisDecStop($event,id)
                >
                <span>光圈</span>
                <img
                    :src="irisAddUrl"
                    alt=""
                    @mousedown=irisAddStart($event,id)
                    @mouseup=irisAddStop($event,id)
                    @mouseleave=irisAddStop($event,id)
                >
            </div>
        </div>
        <div class="direction-list">
            <div class="direction-item">
                <img
                    :src="leftUpUrl"
                    alt=""
                    @mousedown=leftUpStart($event,id)
                    @mouseup=leftUpStop($event,id)
                    @mouseleave=leftUpStop($event,id)
                >
                <img
                    :src="upUrl"
                    alt=""
                    @mousedown=upStart($event,id)
                    @mouseup=upStop($event,id)
                    @mouseleave=upStop($event,id)
                >
                <img
                    :src="rightUpUrl"
                    alt=""
                    @mousedown=rightUpStart($event,id)
                    @mouseup=rightUpStop($event,id)
                    @mouseleave=rightUpStop($event,id)
                >
            </div>
            <div class="direction-item">

                <img
                    :src="leftUrl"
                    alt=""
                    @mousedown=leftStart($event,id)
                    @mouseup=leftStop($event,id)
                    @mouseleave=leftStop($event,id)
                >
                <img
                    :src="cameraUrl"
                    alt=""
                    webkitdirectory
                    @mouseup=photograph($event,id)
                >
                <img
                    :src="rightUrl"
                    alt=""
                    @mousedown=rightStart($event,id)
                    @mouseup=rightStop($event,id)
                    @mouseleave=rightStop($event,id)
                >
            </div>
            <div class="direction-item">
                <img
                    :src="leftDownUrl"
                    alt=""
                    @mousedown=leftDownStart($event,id)
                    @mouseup=leftDownStop($event,id)
                    @mouseleave=leftDownStop($event,id)
                >
                <img
                    :src="downUrl"
                    alt=""
                    @mousedown=downStart($event,id)
                    @mouseup=downStop($event,id)
                    @mouseleave=downStop($event,id)
                >
                <img
                    :src="rightDownUrl"
                    alt=""
                    @mousedown=rightDownStart($event,id)
                    @mouseup=rightDownStop($event,id)
                    @mouseleave=rightDownStop($event,id)
                >
            </div>
        </div>
    </div>
</template>   
<script>
import WebRtcPlayer from "../../public/static/webrtcplayer";

export default {
    data() {
        return {
            w : 700,
            h:554,
            confirmLoading: false,
            videoHeight: "576px",
            id: "12",
            mdata: [],
            camera: {},
            zoomSubUrl: require("@/assets/sub-icon.png"),
            zoomAddUrl: require("@/assets/add-icon.png"),
            focusSubUrl: require("@/assets/sub-icon.png"),
            focusAddUrl: require("@/assets/add-icon.png"),
            irisSubUrl: require("@/assets/sub-icon.png"),
            irisAddUrl: require("@/assets/add-icon.png"),
            leftUpUrl: require("@/assets/left-up-icon.png"),
            upUrl: require("@/assets/up-icon.png"),
            rightUpUrl: require("@/assets/right-up-icon.png"),
            cameraUrl: require("@/assets/camera.png"),
            leftUrl: require("@/assets/left-icon.png"),
            rightUrl: require("@/assets/right-icon.png"),
            leftDownUrl: require("@/assets/left-down-icon.png"),
            downUrl: require("@/assets/down-icon.png"),
            rightDownUrl: require("@/assets/right-down-icon.png"),
            vlcm: "",
        };
    },
    comments: {
        WebRtcPlayer,
    },
    mounted() {
        this.mdata = this.$route.path;
        console.log(this.mdata);
        var req = this.mdata.toString().split("/").pop().split("?");

        this.id = req[0];
        if(this.$route.query!= null && this.$route.query.h !=null){
            this.h = this.$route.query.h +"px"
        }
        if(this.$route.query!= null && this.$route.query.w !=null){
            this.w = this.$route.query.w +"px"
        }

        this.$axios
            .get("/camera/" + this.id, {
                data: {},
            })
            .then((res) => {
                this.camera = res.data;

                console.log(this.camera);
                this.autoPlay();
            })
            .catch((err) => {});
    },
    // beforeRouteLeave(to, form, next) {
    //     if (this.vlcm) {
    //         this.vlcm.playlist.stop();
    //         next(true)
    //     } else {
    //         next(true)
    //     }
    // },
    destroy() {
        if (this.player != null) {
            this.player.destroy();
        }
    },
    methods: {
        autoPlay() {
            this.players = [];
            let video = document.getElementById("camera" + this.id);
            if (video) {
                console.log("play:" + this.id);

                let server;
                if (this.camera.rtcServerPort != null) {
                    server =
                        this.camera.rtcServer + ":" + this.camera.rtcServerPort;
                } else {
                    server = this.camera.rtcServer;
                }

                let player = new WebRtcPlayer(
                    server,
                    video,
                    "camera" + this.id
                );
                this.players.push(player);
            }
        },
        handleCancel() {
            this.$router.push({ name: "realTimeMonitoring" });
        },
        getHdVideos(rtsp) {
            this.$nextTick(() => {
                var vlc = document.getElementById("video");
                var options = new Array(":network-caching=100"); //减少延迟
                var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
                vlc.playlist.playItem(vlcItem);
                this.vlcm = vlc;
            });
        },
        zoomDecStart() {
            console.log("变倍-按下");
            this.zoomSubUrl = require("@/assets/sub-active-icon.png");
            this.$axios
                .post("/camera/control/zoomDec/start/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        zoomDecStop() {
            console.log("变倍-抬起");
            this.zoomSubUrl = require("@/assets/sub-icon.png");
            this.$axios
                .post("/camera/control/zoomDec/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        zoomAddStart() {
            console.log("变倍+按下");
            this.zoomAddUrl = require("@/assets/add-active-icon.png");
            this.$axios
                .post("/camera/control/zoomAdd/start/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        zoomAddStop() {
            console.log("变倍+抬起");
            this.zoomAddUrl = require("@/assets/add-icon.png");
            this.$axios
                .post("/camera/control/zoomAdd/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        focusDecStart() {
            console.log("变焦-按下");
            this.focusSubUrl = require("@/assets/sub-active-icon.png");
            this.$axios
                .post("/camera/control/focusDec/start/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        focusDecStop() {
            console.log("变焦-抬起");
            this.focusSubUrl = require("@/assets/sub-icon.png");
            this.$axios
                .post("/camera/control/focusDec/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        focusAddStart() {
            console.log("变焦+按下");
            this.focusAddUrl = require("@/assets/add-active-icon.png");
            this.$axios
                .post("/camera/control/focusAdd/start/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        focusAddStop() {
            console.log("变焦+抬起");
            this.focusAddUrl = require("@/assets/add-icon.png");
            this.$axios
                .post("/camera/control/focusAdd/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        irisDecStart() {
            console.log("光圈-按下");
            this.irisSubUrl = require("@/assets/sub-active-icon.png");
            this.$axios
                .post("/camera/control/irisDec/start/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        irisDecStop() {
            console.log("光圈-抬起");
            this.irisSubUrl = require("@/assets/sub-icon.png");
            this.$axios
                .post("/camera/control/irisDec/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        irisAddStart() {
            console.log("光圈+按下");
            this.irisAddUrl = require("@/assets/add-active-icon.png");
            this.$axios
                .post("/camera/control/irisAdd/start/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        irisAddStop() {
            console.log("光圈+抬起");
            this.irisAddUrl = require("@/assets/add-icon.png");
            this.$axios
                .post("/camera/control/irisAdd/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        leftUpStart() {
            console.log("左上鼠标按下");
            this.leftUpUrl = require("@/assets/left-up-active-icon.png");
            this.$axios
                .post("/camera/control/leftUp/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        leftUpStop() {
            console.log("左上鼠标抬起");
            this.leftUpUrl = require("@/assets/left-up-icon.png");
            this.$axios
                .post("/camera/control/leftUp/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        upStart() {
            console.log("上鼠标按下");
            this.upUrl = require("@/assets/up-active-icon.png");
            this.$axios
                .post("/camera/control/up/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        upStop() {
            console.log("上鼠标抬起");
            this.upUrl = require("@/assets/up-icon.png");
            this.$axios
                .post("/camera/control/up/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        rightUpStart() {
            console.log("右上鼠标按下");
            this.rightUpUrl = require("@/assets/right-up-active-icon.png");
            this.$axios
                .post("/camera/control/rightUp/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        rightUpStop() {
            console.log("右上鼠标抬起");
            this.rightUpUrl = require("@/assets/right-up-icon.png");
            this.$axios
                .post("/camera/control/rightUp/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        leftStart() {
            // console.log(this.id)
            console.log("左转鼠标按下");
            this.leftUrl = require("@/assets/left-active-icon.png");
            this.$axios
                .post("/camera/control/left/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        leftStop() {
            this.leftUrl = require("@/assets/left-icon.png");
            console.log("左转鼠标抬起");
            this.$axios
                .post("/camera/control/left/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        rightStart() {
            console.log("右转鼠标按下");
            this.rightUrl = require("@/assets/right-active-icon.png");
            this.$axios
                .post("/camera/control/right/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        rightStop() {
            console.log("右转鼠标抬起");
            this.rightUrl = require("@/assets/right-icon.png");
            this.$axios
                .post("/camera/control/right/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        leftDownStart() {
            console.log("左下鼠标按下");
            this.leftDownUrl = require("@/assets/left-down-active-icon.png");
            this.$axios
                .post("/camera/control/leftDown/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        leftDownStop() {
            console.log("左下鼠标抬起");
            this.leftDownUrl = require("@/assets/left-down-icon.png");
            this.$axios
                .post("/camera/control/leftDown/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        downStart() {
            console.log("下鼠标按下");
            this.downUrl = require("@/assets/down-active-icon.png");
            this.$axios
                .post("/camera/control/down/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        downStop() {
            console.log("下鼠标抬起");
            this.downUrl = require("@/assets/down-icon.png");
            this.$axios
                .post("/camera/control/down/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        rightDownStart() {
            console.log("右下鼠标按下");
            this.rightDownUrl = require("@/assets/right-down-active-icon.png");
            this.$axios
                .post("/camera/control/rightDown/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        rightDownStop() {
            console.log("右下鼠标抬起");
            this.rightDownUrl = require("@/assets/right-down-icon.png");
            this.$axios
                .post("/camera/control/rightDown/stop/" + this.id, {
                    data: {},
                })
                .then((res) => {})
                .catch((err) => {});
        },
        photograph() {
            //使用 HTMLCanvasElement 绘制视频帧：在 JavaScript 中创建一个 canvas 元素，并使用 drawImage 方法从视频中绘制出一帧图像。
            const video = document.querySelector("video");
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");

            // 获取 video 尺寸并设置 canvas 尺寸
            const width = video.videoWidth;
            const height = video.videoHeight;
            canvas.width = width;
            canvas.height = height;

            // 绘制视频帧到画布上
            context.drawImage(video, 0, 0, width, height);

            // 将画布内容转换为图片格式
            canvas.toBlob((blob) => {
                // 创建下载链接并触发下载
                const a = document.createElement("a");
                a.href = URL.createObjectURL(blob);
                a.download = "screenshot.png";
                document.body.appendChild(a);
                a.click();
            }, "image/png");
        },
    },
};
</script>
 <style lang="scss" scoped>
.realTime {
    padding: 10px;
}
//全屏按钮

//播放按钮
video::-webkit-media-controls-play-button {
    display: none;
}
//进度条
video::-webkit-media-controls-timeline {
    display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display {
    display: none;
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
    display: none;
}
//音量按钮
video::-webkit-media-controls-mute-button {
    display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
    display: none;
}
//所有控件
video::-webkit-media-controls-enclosure {
    display: none;
}
.operation-list {
    position: absolute;
    right: 200px;
    bottom: 20px;
    /*width: 150px;*/
    /*border: solid 1px blue;*/
    z-index: 10;
    .operation-item {
        img {
            width: 32px;
            -webkit-user-select: none;
            -ms-user-select: none;
            -webkit-user-drag: none;
            user-select: none;
        }
        span {
            padding: 3px 6px;
            background: rgba(0, 0, 0, 0.5);
            font-size: 16px;
            color: #ffffff;
        }
    }
}
.direction-list {
    position: absolute;
    right: 30px;
    bottom: 20px;
    width: 150px;
    z-index: 10;
    /*border: solid 1px blue;*/
    .direction-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
            width: 32px;
            -webkit-user-select: none;
            -ms-user-select: none;
            -webkit-user-drag: none;
            user-select: none;
        }
    }
}
</style>
 