视频监控

2024-03-30 20:51:14 +08:00 · 2024-03-30 20:51:14 +08:00 · 09e2b506f0
parent 4b10b7eef1
commit 09e2b506f0
10 changed files with 749 additions and 1 deletions
--- a/css/video/video.css
+++ b/css/video/video.css
@ -281,6 +281,40 @@ body {
 }

 /* 中侧样式 start */
+#balla {
+    width: 98.5%;
+    height: 98.5%;
+    margin-left: 0.5%;
+    margin-top: 0.5%;
+    float: left;
+}
+
+
+/*球机视频框*/
+
+.ballsplit {
+    width: 96.9%;
+    height: 99%;
+    margin-left: 5%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin: 0.3%;
+}
+
+/*视频框样式*/
+
+.ball-content {
+    width: 96%;
+    height: 94%;
+    margin: 4% 1% 0 1%;
+    pointer-events: none;
+    background-color: #000;
+    object-fit: fill;
+}
+

 /* 右侧样式 start */

--- a/js/pages/video/qx/FileSaver.min.js
+++ b/js/pages/video/qx/FileSaver.min.js
@ -0,0 +1,77 @@
+(function (a, b) {
+    if ("function" == typeof define && define.amd) define([], b); else if ("undefined" != typeof exports) b(); else {
+        b(), a.FileSaver = {exports: {}}.exports
+    }
+})(this, function () {
+    "use strict";
+
+    function b(a, b) {
+        return "undefined" == typeof b ? b = {autoBom: !1} : "object" != typeof b && (console.warn("Deprecated: Expected third argument to be a object"), b = {autoBom: !b}), b.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(a.type) ? new Blob(["\uFEFF", a], {type: a.type}) : a
+    }
+
+    function c(a, b, c) {
+        var d = new XMLHttpRequest;
+        d.open("GET", a), d.responseType = "blob", d.onload = function () {
+            g(d.response, b, c)
+        }, d.onerror = function () {
+            console.error("could not download file")
+        }, d.send()
+    }
+
+    function d(a) {
+        var b = new XMLHttpRequest;
+        b.open("HEAD", a, !1);
+        try {
+            b.send()
+        } catch (a) {
+        }
+        return 200 <= b.status && 299 >= b.status
+    }
+
+    function e(a) {
+        try {
+            a.dispatchEvent(new MouseEvent("click"))
+        } catch (c) {
+            var b = document.createEvent("MouseEvents");
+            b.initMouseEvent("click", !0, !0, window, 0, 0, 0, 80, 20, !1, !1, !1, !1, 0, null), a.dispatchEvent(b)
+        }
+    }
+
+    var f = "object" == typeof window && window.window === window ? window : "object" == typeof self && self.self === self ? self : "object" == typeof global && global.global === global ? global : void 0,
+        a = f.navigator && /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent),
+        g = f.saveAs || ("object" != typeof window || window !== f ? function () {
+        } : "download" in HTMLAnchorElement.prototype && !a ? function (b, g, h) {
+            var i = f.URL || f.webkitURL, j = document.createElement("a");
+            g = g || b.name || "download", j.download = g, j.rel = "noopener", "string" == typeof b ? (j.href = b, j.origin === location.origin ? e(j) : d(j.href) ? c(b, g, h) : e(j, j.target = "_blank")) : (j.href = i.createObjectURL(b), setTimeout(function () {
+                i.revokeObjectURL(j.href)
+            }, 4E4), setTimeout(function () {
+                e(j)
+            }, 0))
+        } : "msSaveOrOpenBlob" in navigator ? function (f, g, h) {
+            if (g = g || f.name || "download", "string" != typeof f) navigator.msSaveOrOpenBlob(b(f, h), g); else if (d(f)) c(f, g, h); else {
+                var i = document.createElement("a");
+                i.href = f, i.target = "_blank", setTimeout(function () {
+                    e(i)
+                })
+            }
+        } : function (b, d, e, g) {
+            if (g = g || open("", "_blank"), g && (g.document.title = g.document.body.innerText = "downloading..."), "string" == typeof b) return c(b, d, e);
+            var h = "application/octet-stream" === b.type, i = /constructor/i.test(f.HTMLElement) || f.safari,
+                j = /CriOS\/[\d]+/.test(navigator.userAgent);
+            if ((j || h && i || a) && "undefined" != typeof FileReader) {
+                var k = new FileReader;
+                k.onloadend = function () {
+                    var a = k.result;
+                    a = j ? a : a.replace(/^data:[^;]*;/, "data:attachment/file;"), g ? g.location.href = a : location = a, g = null
+                }, k.readAsDataURL(b)
+            } else {
+                var l = f.URL || f.webkitURL, m = l.createObjectURL(b);
+                g ? g.location = m : location.href = m, g = null, setTimeout(function () {
+                    l.revokeObjectURL(m)
+                }, 4E4)
+            }
+        });
+    f.saveAs = g.saveAs = g, "undefined" != typeof module && (module.exports = g)
+});
+
+//# sourceMappingURL=FileSaver.min.js.map
--- a/js/pages/video/qx/FileSaver.min.js.map
+++ b/js/pages/video/qx/FileSaver.min.js.map
@ -0,0 +1,77 @@
+(function (a, b) {
+    if ("function" == typeof define && define.amd) define([], b); else if ("undefined" != typeof exports) b(); else {
+        b(), a.FileSaver = {exports: {}}.exports
+    }
+})(this, function () {
+    "use strict";
+
+    function b(a, b) {
+        return "undefined" == typeof b ? b = {autoBom: !1} : "object" != typeof b && (console.warn("Deprecated: Expected third argument to be a object"), b = {autoBom: !b}), b.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(a.type) ? new Blob(["\uFEFF", a], {type: a.type}) : a
+    }
+
+    function c(a, b, c) {
+        var d = new XMLHttpRequest;
+        d.open("GET", a), d.responseType = "blob", d.onload = function () {
+            g(d.response, b, c)
+        }, d.onerror = function () {
+            console.error("could not download file")
+        }, d.send()
+    }
+
+    function d(a) {
+        var b = new XMLHttpRequest;
+        b.open("HEAD", a, !1);
+        try {
+            b.send()
+        } catch (a) {
+        }
+        return 200 <= b.status && 299 >= b.status
+    }
+
+    function e(a) {
+        try {
+            a.dispatchEvent(new MouseEvent("click"))
+        } catch (c) {
+            var b = document.createEvent("MouseEvents");
+            b.initMouseEvent("click", !0, !0, window, 0, 0, 0, 80, 20, !1, !1, !1, !1, 0, null), a.dispatchEvent(b)
+        }
+    }
+
+    var f = "object" == typeof window && window.window === window ? window : "object" == typeof self && self.self === self ? self : "object" == typeof global && global.global === global ? global : void 0,
+        a = f.navigator && /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent),
+        g = f.saveAs || ("object" != typeof window || window !== f ? function () {
+        } : "download" in HTMLAnchorElement.prototype && !a ? function (b, g, h) {
+            var i = f.URL || f.webkitURL, j = document.createElement("a");
+            g = g || b.name || "download", j.download = g, j.rel = "noopener", "string" == typeof b ? (j.href = b, j.origin === location.origin ? e(j) : d(j.href) ? c(b, g, h) : e(j, j.target = "_blank")) : (j.href = i.createObjectURL(b), setTimeout(function () {
+                i.revokeObjectURL(j.href)
+            }, 4E4), setTimeout(function () {
+                e(j)
+            }, 0))
+        } : "msSaveOrOpenBlob" in navigator ? function (f, g, h) {
+            if (g = g || f.name || "download", "string" != typeof f) navigator.msSaveOrOpenBlob(b(f, h), g); else if (d(f)) c(f, g, h); else {
+                var i = document.createElement("a");
+                i.href = f, i.target = "_blank", setTimeout(function () {
+                    e(i)
+                })
+            }
+        } : function (b, d, e, g) {
+            if (g = g || open("", "_blank"), g && (g.document.title = g.document.body.innerText = "downloading..."), "string" == typeof b) return c(b, d, e);
+            var h = "application/octet-stream" === b.type, i = /constructor/i.test(f.HTMLElement) || f.safari,
+                j = /CriOS\/[\d]+/.test(navigator.userAgent);
+            if ((j || h && i || a) && "undefined" != typeof FileReader) {
+                var k = new FileReader;
+                k.onloadend = function () {
+                    var a = k.result;
+                    a = j ? a : a.replace(/^data:[^;]*;/, "data:attachment/file;"), g ? g.location.href = a : location = a, g = null
+                }, k.readAsDataURL(b)
+            } else {
+                var l = f.URL || f.webkitURL, m = l.createObjectURL(b);
+                g ? g.location = m : location.href = m, g = null, setTimeout(function () {
+                    l.revokeObjectURL(m)
+                }, 4E4)
+            }
+        });
+    f.saveAs = g.saveAs = g, "undefined" != typeof module && (module.exports = g)
+});
+
+//# sourceMappingURL=FileSaver.min.js.map
--- a/js/pages/video/qx/conf.js
+++ b/js/pages/video/qx/conf.js
@ -0,0 +1,43 @@
+/**
+ * 清晰物联
+ *
+ */
+let _cf = {
+    ver: 'debug',
+    q2http_url: 'http://220.248.250.31:29605/icvs2/',// 连接icvs平台地址,如果是https协议,地址为'https://ip:port/icvs2/',ip为视频转码服务部署所在服务器的ip地址,port为q2http转码服务端口
+    websocket_url: 'ws://220.248.250.31:29605/wss',// websocket地址,如果是https协议,地址为'wss://ip:sslPort/wss',ip为视频转码服务部署所在服务器的ip地址,sslPort为SSL协议的监听端口，如果是http协议，sslPort和q2http_url使用ip和端口一致
+    q2http_urlN: 'http://10.138.219.3:29605/icvs2/',// 连接icvs平台地址,如果是https协议,地址为'https://ip:port/icvs2/',ip为视频转码服务部署所在服务器的ip地址,port为q2http转码服务端口
+    websocket_urlN: 'ws://10.138.219.3:29605/wss',// websocket地址,如果是https协议,地址为'wss://ip:sslPort/wss',ip为视频转码服务部署所在服务器的ip地址,sslPort为SSL协议的监听端口，如果是http协议，sslPort和q2http_url使用ip和端口一致
+    // - 配置登录参数
+    connParams: {
+        // - 登录平台IP
+        address: "10.138.219.3",
+        port: "29988",
+        // - 登录平台用户名
+        user: "bns4",
+        // - 登录平台密码
+        password: 'Bns@2023**',
+        // - 登录平台企业ID
+        epid: "system",
+        // - 登录平台是否通过网闸模式
+        bfix: 1
+    }
+}
+
+/**
+ * 清晰云台控制
+ * up: ['up', 'PTZ/C_PTZ_Turn', true, 'stop']
+ * 操作类型:[启动参数,请求地址,是否异步,'停止参数']
+ */
+let qxControlType = {
+    up: ['up', 'PTZ/C_PTZ_Turn', true, 'stop'],
+    down: ['down', 'PTZ/C_PTZ_Turn', true, 'stop'],
+    left: ['left', 'PTZ/C_PTZ_Turn', true, 'stop'],
+    right: ['right', 'PTZ/C_PTZ_Turn', true, 'stop'],
+    farFocus: ['faraway', 'PTZ/C_PTZ_MakeFocusFar', false, 'PTZ/C_PTZ_StopFocusMove'],
+    nearFocus: ['near', 'PTZ/C_PTZ_MakeFocusNear', false, 'PTZ/C_PTZ_StopFocusMove'],
+    shrink: ['zoominout', 'PTZ/C_PTZ_ZoomOutPicture', false, 'PTZ/C_PTZ_StopPictureZoom'],
+    amplify: ['zoomin', 'PTZ/C_PTZ_ZoomInPicture', false, 'PTZ/C_PTZ_StopPictureZoom'],
+    /*apertureMinus: ['zoominout', 0x0103],
+    apertureAdd: ['zoomin', 0x0101]*/
+}
--- a/js/pages/video/qx/flv.min.js
+++ b/js/pages/video/qx/flv.min.js
--- a/js/pages/video/qx/flv.min.js.map
+++ b/js/pages/video/qx/flv.min.js.map
--- a/js/pages/video/video.js
+++ b/js/pages/video/video.js
@ -1,8 +1,13 @@
 let layer, form;
+let winDom = 'videoPlayer1';
 layui.use(['layer', 'form'], function () {
    form = layui.form;
    layer = layui.layer;
    $("#voi-photo").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
    $("body").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
    console.log("选中的标段编码：" + parent.$('#bidPro').val())
+    initVideo();
+    setTimeout(() => {
+        QXPlayVideo('201115200124261007', '0', winDom)
+    }, 2000);
 });
--- a/js/pages/video/videoConnect.js
+++ b/js/pages/video/videoConnect.js
@ -0,0 +1,478 @@
+let qxToken;
+let qxUrl;
+let tyToken;
+let flvPlayer;
+let remoteId;
+let videoObject = {
+    //设备编码
+    devCode: '',
+    //远程录像ID
+    remoteId: '',
+    //播放状态
+    playState: false,
+    //视频播放通道
+    videoType: '',
+    recordVideoState: false
+}
+
+function initVideo() {
+    getQXConnect();
+}
+
+/**
+ * @param {Object} eventContext 回调函数
+ * @param {Object} eventType
+ */
+window.callBack = function (eventType, eventContext) {
+    switch (eventType) {
+        case "104":
+            //全屏
+            window.videos.fullScreen()
+            break;
+        case "105":
+            //退出全屏
+            window.videos.exitScreen();
+            break;
+        default:
+            console.log("这是回调函数！！！")
+            break;
+    }
+}
+
+/**
+ * 创建清新平台连接
+ */
+function getQXConnect() {
+    var allDataParams = "address=" + _cf.connParams.address + "&port=" + _cf.connParams.port +
+        "&user=" + _cf.connParams.user + "&password=" + _cf.connParams.password + "&epid=" + _cf.connParams.epid + "&fixaddr=" + _cf.connParams.bfix;
+    let params = {
+        "params": videoEncrypt(allDataParams)
+    }
+    posts(_cf.q2http_url, 'login2', params, function (rv) {
+        let result = {
+            errcode: -1,
+            token: ''
+        }
+        let respJSON = JSON.parse(rv.responseText);
+        if (respJSON.hasOwnProperty('errcode')) {
+            result.errcode = respJSON.errcode;
+        }
+        if (respJSON.hasOwnProperty('token')) {
+            result.token = respJSON.token;
+            result.errcode = 0;
+            if (!isEmpty(result.token)) {
+                qxUrl = _cf.q2http_url;
+                qxToken = result.token;
+            }
+        }
+    });
+}
+/**
+ *  清新播放视频
+ * @param puId
+ * @param idx
+ * @param dom 窗口id
+ */
+function QXPlayVideo(puId, idx, dom) {
+
+    //播视频接口
+    destoryVideo(flvPlayer);
+    let url = qxUrl + "stream.flv?puid=" + puId + "&idx=" + idx + "&stream=0&token=" + qxToken;
+    console.log(url);
+    if (flvjs.isSupported()) {
+        let videoElement = document.getElementById(dom);
+        if (videoElement) {
+            flvPlayer = flvjs.createPlayer({
+                type: 'flv', // => 媒体类型 flv 或 mp4，m3u8
+                isLive: true, // => 是否为直播流
+                hasAudio: false, // => 是否开启声音
+                url: url, // => 视频流地址
+                stashInitialSize: 128 // 减少首桢显示等待时长
+            }, {
+                enableWorker: false, //不启用分离线程
+                enableStashBuffer: false, //关闭IO隐藏缓冲区
+                reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
+                autoCleanupSourceBuffer: true, //自动清除缓存
+                fixAudioTimestampGap: false//false才会音视频同步
+            });
+            flvPlayer.attachMediaElement(videoElement);
+            flvPlayer.load();
+            //init3D();
+            flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
+                if (flvPlayer) {
+                    //播放失败销毁窗口
+                    destoryVideo(flvPlayer);
+                    videoObject.playState = false;
+                }
+            });
+            flvPlayer.on(flvjs.Events.SCRIPTDATA_ARRIVED, (errorType, errorDetail, errorInfo) => {
+                if (flvPlayer) {
+                    videoObject.playState = true;
+                    $('.noVideoMask').css('background-image', 'none')
+                    //视频断流、延迟处理
+                    $('#' + dom).attr("ontimeupdate", "progress(event)")
+                    recordVideo();
+                }
+            });
+            // 【重要事件监听】http请求建立好后，该事件会一直监听flvjs实例
+            flvPlayer.on(flvjs.Events.STATISTICS_INFO, (res) => {
+                if (this.leaveRouter || this.changeLampPost) { // 离开路由或切换设备
+                    // 销毁实例
+                    destoryVideo(flvPlayer);
+                    videoObject.playState = false;
+                }
+            });
+            flvPlayer.play();
+
+        }
+
+
+    }
+}
+function init3D() {
+    try {
+        localStorage.setItem("threeD", false);
+        initDrawReact('windowbox', (ops) => {//播放视频时添加
+            var Sx = ops.beginPoint.x;
+            var Sy = ops.beginPoint.y;
+            var Ex = ops.endPoint.x;
+            var Ey = ops.endPoint.y;
+
+            $.ajax({
+                url: dataUrl + "proteam/pot/video/set3DyunConfig?token=" + token,
+                type: "POST",
+                data: {
+                    Sx: Sx,
+                    Sy: Sy,
+                    Ex: Ex,
+                    Ey: Ey,
+                    puid: puidParam
+                },
+                success: function (data) {
+                    var drawReact = document.getElementById(ops.id + '_box'); // 获取矩形框元素
+                    drawReact.style.display = 'none'; // 进入画布按下鼠标显示默认矩形框
+                },
+                error: function (error) {
+                    var drawReact = document.getElementById(ops.id + '_box'); // 获取矩形框元素
+                    drawReact.style.display = 'none'; // 进入画布按下鼠标显示默认矩形框
+                }
+            });
+        })
+    } catch (e) {
+        console.error(e.toString())
+    }
+
+}
+
+
+/**
+ * post 请求
+ * @param router
+ * @param params
+ * @param callback
+ */
+function requestPost(router, params, callback) {
+    $.ajax({
+        type: 'post',
+        url: qxUrl + router,
+        data: params,
+        traditional: true,
+        dataType: 'json',
+        async: true,
+        complete: function (rv) {
+            if (typeof callback == 'function') callback(rv)
+        }
+    })
+}
+
+/**
+ * post 请求
+ * @param url
+ * @param router
+ * @param params
+ * @param callback
+ */
+function posts(url, router, params, callback) {
+    $.ajax({
+        type: 'post',
+        url: url + router,
+        data: params,
+        traditional: true,
+        dataType: 'json',
+        complete: function (rv) {
+            if (typeof callback == 'function') callback(rv)
+        }
+    })
+}
+
+/**
+ * 远程录像/抓拍
+ * @param puid 球机puid
+ * @param type 操作类型
+ * @param typeBall 平台类型
+ */
+function remoteVideo(puid, type) {
+    //清晰
+    let params = {
+        idx: 0,
+        puid: puid,
+        type: type,
+        duration: 5
+    }
+    requestPost("CSS/C_CSS_StartManualStorage" + "?token=" + qxToken, params, function (data) {
+        if (data.responseJSON.Error === '0') {
+            if (type === 0) {
+                layer.msg("开始录像成功", { icon: 1 });
+                videoObject.remoteId = data.responseJSON.Param.ID
+            } else {
+                layer.msg("抓拍成功", { icon: 1 });
+                setTimeout(function () {
+                    stopRemote(data.responseJSON.Param.ID, 1)
+                }, 3000);
+            }
+        }
+    }
+    )
+
+}
+
+/**
+ *
+ * @param id 流播放ID
+ * @param type
+ * @param typeBall
+ */
+function stopRemote(id, type) {
+    //清晰
+    let params = {
+        id: id
+    }
+    requestPost("CSS/C_CSS_StopManualStorage" + "?token=" + qxToken, params, function (data) {
+        if (!isEmpty(data)) {
+            if (type === 0) {
+                layer.msg("停止录像成功", { icon: 1 });
+                videoObject.remoteId = null;
+            }
+        }
+    });
+}
+
+/**
+ * 平台操作
+ * @param puid
+ * @param url
+ */
+function qxControl(puid, url) {
+    let params = {
+        puid: puid,
+        idx: 0
+    }
+    requestPost(url + '?token=' + qxToken, params, rv => {
+    })
+}
+
+/**
+ *  球机旋转
+ * @param option
+ * @param puid
+ * @returns {Promise<void>}
+ */
+async function turnControl(option, puid) {
+    let params = {
+        puid: puid,
+        idx: 0,
+        motion: option
+    };
+    if (option != null) {
+        requestPost('PTZ/C_PTZ_Turn?token=' + qxToken, params)
+    }
+}
+
+/**
+ * 销毁断流方法
+ * @param flvPlayer
+ */
+function destoryVideo(flvPlayer) {
+    if (!isEmpty(flvPlayer)) {
+        //flvPlayer.pause();
+        flvPlayer.unload();
+        flvPlayer.detachMediaElement();
+        //flvPlayer.destroy();
+        flvPlayer = null;
+    }
+}
+
+/**
+ * 录制视频
+ */
+function recordVideo() {
+    let video = $("#videoPlayer1")[0];
+    let encodeType = "video/webm;codecs=vp9";
+    let chunks = [];
+    //创建MediaRecorder，设置媒体参数
+    let stream = video.captureStream();
+    let start = true;
+    let recorder = new MediaRecorder(stream, {
+        mimeType: encodeType
+    });
+    //收集录制数据
+    recorder.ondataavailable = e => {
+        chunks.push(e.data);
+    };
+    $('#videoLocal')[0].onclick = function () {
+        if (start) {
+            videoObject.recordVideoState = true;
+            layer.msg("开启本地录像", { icon: 0 });
+            chunks = [];
+            recorder.start(10);
+            $(this).attr("src", "../../img/video/videoLocal-select.png");
+            start = false;
+        } else {
+            layer.msg("关闭本地录像", { icon: 0 });
+            videoObject.recordVideoState = false;
+            recorder.stop();
+            download();
+            $(this).attr("src", "../../img/video/videoLocal.png");
+            start = true;
+        }
+    }
+
+    //下载录制内容
+    function download() {
+        let blob = new Blob(chunks, { type: 'video/webm' });
+        let file = new window.File([blob], new Date().getTime() + ".webm", { type: 'video/webm' })
+        console.log(file);
+        let formData = new FormData();
+        formData.append("multipartFile", file)
+        let loadingMsg = layer.msg('视频加载中,请稍候...', { icon: 16, scrollbar: false, time: 0 });
+        $.ajax({
+            url: dataUrl + 'system/sys/video/webmToMp4?token=' + token,
+            type: 'POST',
+            headers: {
+                "encrypt": sm3(JSON.stringify(formData))
+            },
+            data: formData,
+            dataType: 'json',
+            processData: false,// ⑧告诉jQuery不要去处理发送的数据
+            contentType: false, // ⑨告诉jQuery不要去设置Content-Type请求头
+            beforeSend: function () {
+            },
+            success: function (result) {
+                if (result.code === 200) {
+                    layer.close(loadingMsg);
+                    uploadRectFile(result.data);
+                } else {
+                    layer.msg('视频下载发生异常,请稍后重试', { icon: 16, scrollbar: false, time: 2000 });
+                }
+            },
+            error: function (result) {
+            }
+        });
+    }
+}
+
+/**
+ * 本地抓拍
+ */
+function screenshot() {
+    let video = $("#videoPlayer1")[0];
+    let canvas = $('#canvasPlayer1')[0];
+    let ctx = canvas.getContext('2d');
+    let H = window.innerHeight;
+    let W = window.innerWidth;
+    const pixelRatio = window.devicePixelRatio || 1;
+    const backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
+        ctx.mozBackingStorePixelRatio ||
+        ctx.msBackingStorePixelRatio ||
+        ctx.oBackingStorePixelRatio ||
+        ctx.backingStorePixelRatio || 1;
+    const ratio = pixelRatio / backingStoreRatio;
+    canvas.width = $(video).width() * ratio;
+    canvas.height = $(video).height() * ratio;
+    canvas.style.width = W + 'px';
+    canvas.style.height = H + 'px';
+    ctx.scale(ratio, ratio);
+    ctx.drawImage(video, 0, 0, $(video).width(), $(video).height());  // 将video中的数据绘制到canvas里
+    let image = canvas.toDataURL('image/jpg').replace('image/jpg', 'image/octet-stream');
+    saveAs(image, new Date().getTime() + '.png' || new Date().getTime() + '.png');
+}
+
+/**
+ * 播放延迟处理
+ * @param e
+ */
+function progress(e) {
+    let bf = e.srcElement.buffered;
+    let currentTime = e.srcElement.currentTime;
+    if (bf.length > 0) {
+        let end = bf.end(0);
+        if (end - currentTime > 1.5) {
+            e.srcElement.currentTime = end - 0.1;
+        }
+    }
+}
+
+/**
+ * 球机页面双击全屏
+ * @param t
+ */
+function ballScreenBig(t) {
+    let div = $('.noVideoMask')[0];
+    let fullscreenElement =
+        document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement;
+    if (fullscreenElement) {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+    } else {
+        if (div.requestFullscreen) {
+            div.requestFullscreen();
+        } else if (div.msRequestFullscreen) {
+            div = document.body;
+            div.msRequestFullscreen();
+        } else if (div.mozRequestFullScreen) {
+            div.mozRequestFullScreen();
+        } else if (div.webkitRequestFullScreen) {
+            div.webkitRequestFullScreen();
+        }
+    }
+
+}
+
+
+/*下载整改文件*/
+function uploadRectFile(obj) {
+    let loadingMsg = layer.msg('视频下载中,请稍候...', { icon: 16, scrollbar: false, time: 0 });
+    let url = dataUrl + 'proteam/pot/video/uploadRectFile?' + setData(obj) + '&token=' + token;
+    let xhr = new XMLHttpRequest();
+    xhr.open("get", url, true);
+    xhr.responseType = "blob";  // 转换流
+    xhr.onload = function () {
+        layer.close(loadingMsg);
+        if (this.status === 200) {
+            let blob = this.response;
+            let url = window.URL.createObjectURL(blob);
+            let link = document.createElement("a");
+            link.href = url;
+            link.download = obj.titleName;
+            link.style.display = "none";
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        } else if (this.status === 401) {
+            localStorage.removeItem("token");
+            backLogin();
+        } else {
+            layer.msg('视频下载发生异常,请稍后重试', { icon: 16, scrollbar: false, time: 2000 });
+        }
+    };
+    xhr.send();
+}
+
+
--- a/js/publics/public.js
+++ b/js/publics/public.js
@ -72,4 +72,8 @@ function backLoginPage() {
    } else if (zhgd_type === "1") {
        top.location.href = login_sc_page;
    }
+}
+//判断字符是否为空的方法
+function isEmpty(obj) {
+    return typeof obj == "undefined" || obj == null || obj == "" || obj == '00';
 }
--- a/pages/video/video.html
+++ b/pages/video/video.html
@ -13,6 +13,7 @@
    <script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
    <script src="../../plugin/toolTip/mTips.js"></script>
    <script src="../../js/publics/aescbc.js"></script>
+    <script src="../../js/publics/aes.js"></script>
    <script src="../../api/commonRequest.js" type="text/javascript"></script>
    <script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
    <title>视频监控</title>
@ -101,7 +102,12 @@
        </div>
        <div id="center-box">
            <div id="video-box">
-
+                <div id="balla" class="split split-horizontal">
+                    <div id="windowbox" class="ballsplit "
+                        style="width: 100%;height: 100%; position: relative;z-index: 9999999999;pointer-events:auto">
+                        <video id="videoPlayer1" class="ball-content"></video>
+                    </div>
+                </div>
            </div>
        </div>
        <div id="right-box">
@ -161,6 +167,10 @@
        </div>
    </div>
 </body>
+<script type="text/javascript" src="../../js/pages/video/qx/conf.js"></script>
+<script type="text/javascript" src="../../js/pages/video/qx/flv.min.js"></script>
+<script type="text/javascript" src="../../js/pages/video/qx/FileSaver.min.js"></script>
+<script type="text/javascript" src="../../js/pages/video/videoConnect.js"></script>
 <script src="../../js/pages/video/video.js" type="text/javascript"></script>

 </html>