绘制围栏

monitor_ui/public/icc/PlayerManager.js

@@ -0,0 +1,686 @@
+// WSPlayer源码调试时使用
+import WSPlayer from '../lib/WSPlayer/WSPlayer'
+import API from "./api.js";
+/**
+ * WSPlayer是核心组件
+ * API 封装了接口
+ */
+class PlayerManager {
+
+    constructor(opt) {
+        if(!opt.el) {
+            console.warn(`请初始化播放器时传入必传参数：
+new PlayerManager({
+    el: "wsplayer_id", // 播放器所在的容器ID
+    ...
+})`)
+        }
+        // 播放器所在的容器ID
+        this.el = opt.el;
+        // 实时预览播放器
+        this.realPlayer = null;
+        // 录像回放播放器
+        this.recordPlayer = null;
+        this.player = null;
+        // 实时预览还是录像回放播放器
+        this.type = "real";
+        // 窗口的数量
+        this.playNum = 1;
+        // 当前选中的窗口的索引
+        this.playIndex = 0;
+        // 当前选中窗口正在播放视频的通道
+        this.currentChannelId = "";
+        // 索引对应窗口，保存当日录像信息
+        this.recordList = [];
+
+        /**
+         * 兼容老版本字段 【已废弃】
+         * 在 ws/wss 直连模式下, serverIp 表示MTS流媒体服务 IP
+         * 在 代理 模式下, serverIp 表示的是 代理服务器的IP 地址
+         */
+         this.serverIp = opt.serverIp
+
+         /**
+          * V1.2.8 版本新增字段
+          * 解码库资源文件前缀
+          */
+         this.prefixUrl = opt.prefixUrl || './static'
+         /**
+          * V1.2.8 版本新增字段
+          * 优先级最高，该方法传入后
+          * 结构如下：
+          * eg:
+          * (rtspUrl) => {
+          *     return "wss://{ip}:9102"
+          * }
+          * 配置后：protocol, isIntranet, proxyServerIp, streamServerIp
+          */
+         this.setWSUrl = opt.setWSUrl
+        /**
+         * V1.2.8 版本新增字段
+         * websocket协议，http支持wss协议拉流，因此增加protocol配置
+         */
+        this.protocol = opt.protocol
+        /**
+         * V1.2.8 版本新增字段[组合使用]
+         * @desc 注意事项： 用于有内外网场景和分布式场景
+         * @param isIntranet 是否内网, 用于有内外网环境，多台大华服务器[分布式]拉流场景配置
+         * @param intranetMap 映射关系，结构 { "内网ip": "外网ip", ... }
+         *
+         */
+        this.isIntranet = opt.isIntranet
+        this.intranetMap = opt.intranetMap
+         /**
+          * V1.2.7 版本新增字段
+          * 用于只有内网
+          * @desc 代理 模式下，代理服务器的IP 地址
+          * 如果代理服务有端口则拼接端口
+          *
+          */
+         this.proxyServerIp = opt.proxyServerIp
+         /**
+          * V1.2.7 版本新增字段
+          * 用于只有内网
+          * @desc 流媒体服务 IP 地址
+          * 如果拉流的 9100 9320 端口发生修改，则需要后面拼接修改后的端口
+          */
+         this.streamServerIp = opt.streamServerIp
+         /**
+          * V1.2.7 版本新增字段
+          * @desc 模式类型 是直连模式/代理模式
+          */
+         this.useNginxProxy = opt.useNginxProxy || false
+
+        if(opt.importLoad) {
+            this.loadWSPlayer(() => {
+                this.initPlayer(opt)
+            })
+            return
+        }
+        this.initPlayer(opt)
+    }
+
+    loadWSPlayer(callback) {
+        let dom = document.createElement("script");
+        dom.src = `${this.prefixUrl}/WSPlayer/WSPlayer.js`;
+        document.head.appendChild(dom);
+        var loaded = false;
+        if(typeof callback === 'function') {
+            dom.onload = dom.onreadystatechange = function() {
+                if(!loaded && (!dom.readyState || /loaded|complete/.test(dom.readyState))) {
+                    dom.onload = dom.onreadystatechange = null;
+                    loaded = true;
+                    callback();
+                }
+            }
+        }
+    }
+
+    // 初始化播放器
+    initPlayer(opt) {
+
+        // 初始化播放器
+        if(WSPlayer) {
+            window.WSPlayer = WSPlayer
+        }
+        switch(opt.type) {
+            case "real":
+                this.initRealPlayer(opt);
+                break;
+            case "record":
+                this.initRecordPlayer(opt);
+                break;
+            default:
+                console.warn(`请初始化播放器时传入必传参数：
+new PlayerManager({
+    type: "real", // real-实时预览 record-录像回放
+    ...
+})`)
+                break;
+        }
+    }
+
+    /**
+     * 初始化实时预览播放器
+     */
+    initRealPlayer(opt) {
+        this.playNum = opt.num;
+        this.type = "real";
+        // eslint-disable-next-line no-undef
+        this.realPlayer = new WSPlayer({
+            el: this.el,
+            type: 'real',
+            importLoad: opt.importLoad, // 是否动态加载库
+            serverIp: this.serverIp, // V1.2.7 版本已废弃[兼容老版本]
+            prefixUrl: this.prefixUrl, // 解码库资源前缀
+            protocol: this.protocol, // 协议 ws  wss
+            isIntranet: this.isIntranet, // 传入当前是 内网还是外网, true-内网 false-外网. 内外网 + 分布式下, 使用该模式
+            intranetMap: this.intranetMap, // 传入当前的内外网关系映射 {"内网ip": "外网ip"}.  内外网 + 分布式下, 使用该模式
+            proxyServerIp: this.proxyServerIp, // V1.2.7 版本新增该配置 代理服务器的ip 【ws/wss直连时不传】
+            streamServerIp: this.streamServerIp, // V1.2.7 版本新增该配置 流媒体服务器的ip
+            rtspResponseTimeout: opt.rtspResponseTimeout, // rtsp 拉流超时时间
+            setWSUrl: this.setWSUrl, // 开放式的 传入函数， return websocket 连接地址，第三方自行处理
+            config: {
+                num: opt.num || 1,
+                maxNum: opt.maxNum || 25,
+                showControl: opt.showControl, // 默认是否显示底部工具栏
+                showTopOperate: opt.showTopOperate, // 是否显示播放顶部操作
+                useNginxProxy: this.useNginxProxy, // V1.2.7 版本新增该配置 直连时需要改为 false, 代理模式为 true
+                showIcons: opt.showIcons || {
+                    streamChangeSelect: true, // 主辅码流切换
+                    replayIcon:true, // 刷新重播按钮
+                    ivsIcon: true, // 控制智能帧按钮
+                    talkIcon: true, // 对讲功能按钮
+                    localRecordIcon: true, // 本地录像功能按钮
+                    audioIcon: true, // 开启关闭声音按钮
+                    snapshotIcon: true, // 抓图按钮
+                    closeIcon: true, // 关闭视频按钮
+                }, // V1.2.8 新增配置 顶部按钮自定义
+                onlyLoadSingleLib: typeof opt.onlyLoadSingleLib === 'boolean' ? opt.onlyLoadSingleLib : false, // 是否走单线程
+                isRTPStream: typeof opt.isRTPStream === 'boolean' ? opt.isRTPStream : false, // true-rtp标准拉流 false-私有拉流
+                openIvs: typeof opt.openIvs === 'boolean' ? opt.openIvs : true, // 默认显示智能帧
+                draggable: opt.draggable, // 1.3.0 新增，是否支持拖拽
+                downloadMp4Record: typeof opt.downloadMp4Record === 'boolean' ? opt.downloadMp4Record : true,
+                useH264MSE: typeof opt.useH264MSE === 'boolean' ? opt.useH264MSE : true,
+                useH265MSE: typeof opt.useH265MSE === 'boolean' ? opt.useH265MSE : true,
+                localeLang: opt.localeLang || 'zhCN', // zhCN 中文 enUS 英文
+                localeI18n: opt.localeI18n, // 1.3.2新增配置
+                cacheMode: opt.cacheMode || 1, //1.3.4新增 0-关闭实时流自适应缓冲模式 1-自适应缓冲 2-实时优先 3-流畅优先 4-智能缓冲模式
+                nMSEFrameCount: opt.nMSEFrameCount, // MSE硬解码每个包的帧数(用于处理卡顿下，一次给video标签推的帧数，可以有效的防止画面过于卡顿，但是会影响实时性)
+                ivsTypeArr: opt.ivsTypeArr || [1, 2], // 传入数组，支持显示的情况, 空表示没有智能信息，1-智能规则线 2-智能目标框
+                isWebView: opt.isWebView, // 是否webview引擎 true-是 false-不是
+                picCapCb: opt.picCapCb, // 是否需要抓图回调
+                recordCb: opt.recordCb // 是否需要本地录制数据回调
+            },
+            receiveMessageFromWSPlayer: opt.receiveMessageFromWSPlayer || this.__receiveMessageFromWSPlayer.bind(this),
+            getRealRtsp: API.getRealmonitor, // 获取实时预览rtsp接口 (不要做任何改动, 只传入方法, API.getRealmonitor() 是错误的， 会报错)
+            getTalkRtsp: API.getTalkRtsp, // 获取对讲rtsp接口  (不要做任何改动, 只传入方法, API.getTalkRtsp() 是错误的， 会报错)
+            stopTalk: API.stopTalk, // 关闭对讲rtsp接口  (不要做任何改动, 只传入方法, API.stopTalk() 是错误的， 会报错)
+        })
+        this.player = this.realPlayer;
+        // 初始化云台控制组件
+        if(opt.pztEl) {
+            this.realPlayer.initPanTilt({
+                // 云台控制容器的id
+                el: opt.pztEl,
+                // 云台区域控制接口
+                setPtzDirection: API.setPtzDirection,
+                // 云台镜头控制接口
+                setPtzCamera: API.setPtzCamera,
+                // 云台三维定位接口
+                controlSitPosition: API.controlSitPosition
+            })
+        }
+    }
+
+    /**
+     * 初始化录像回放播放器
+     */
+    initRecordPlayer(opt) {
+        this.playNum = opt.num;
+        this.type = "record";
+        // eslint-disable-next-line no-undef
+        this.recordPlayer = new WSPlayer({
+            el: this.el,
+            type: 'record',
+            importLoad: opt.importLoad, // 是否动态加载
+            serverIp: this.serverIp, // V1.2.7 版本已废弃[兼容老版本]
+            prefixUrl: this.prefixUrl, // 解码库资源前缀
+            protocol: this.protocol, // 协议 ws  wss
+            isIntranet: this.isIntranet, // 传入当前是 内网还是外网, true-内网 false-外网. 内外网 + 分布式下, 使用该模式
+            intranetMap: this.intranetMap, // 传入当前的内外网关系映射 {"内网ip": "外网ip"}.  内外网 + 分布式下, 使用该模式
+            proxyServerIp: this.proxyServerIp, // V1.2.7 版本新增该配置 代理服务器的ip 【ws/wss直连时不传】
+            streamServerIp: this.streamServerIp, // V1.2.7 版本新增该配置 流媒体服务器的ip
+            setWSUrl: this.setWSUrl, // 开放式的 传入函数， return websocket 连接地址，第三方自行处理
+            rtspResponseTimeout: opt.rtspResponseTimeout, // rtsp 拉流超时时间
+            config: {
+                num: opt.num,
+                maxNum: opt.maxNum,
+                showControl: opt.showControl, // 是否显示播放器底部工具栏，默认显示
+                showTopOperate: opt.showTopOperate, // 是否显示播放顶部操作
+                useNginxProxy: this.useNginxProxy, // V1.2.7 版本新增该配置 直连时需要改为 false, 【代理模式可不传】
+                showIcons: opt.showIcons || {
+                    streamChangeSelect: true, // 主辅码流切换
+                    replayIcon:true, // 刷新重播按钮
+                    ivsIcon: true, // 控制智能帧按钮
+                    talkIcon: true, // 对讲功能按钮
+                    localRecordIcon: true, // 本地录像功能按钮
+                    audioIcon: true, // 开启关闭声音按钮
+                    snapshotIcon: true, // 抓图按钮
+                    closeIcon: true, // 关闭视频按钮
+                }, // V1.2.8 新增配置 顶部按钮自定义
+                openIvs: typeof opt.openIvs === 'boolean' ? opt.openIvs : true, // 默认显示智能帧
+                onlyLoadSingleLib: typeof opt.onlyLoadSingleLib === 'boolean' ? opt.onlyLoadSingleLib : false, // 是否走单线程
+                isRTPStream: typeof opt.isRTPStream === 'boolean' ? opt.isRTPStream : false, // true-rtp标准拉流 false-私有拉流
+                showRecordProgressBar: typeof opt.showRecordProgressBar === 'boolean' ? opt.showRecordProgressBar : true, // V1.2.8 新增配置 是否显示回放进度条
+                draggable: opt.draggable, // 1.3.0 新增，是否支持拖拽
+                downloadMp4Record: typeof opt.downloadMp4Record === 'boolean' ? opt.downloadMp4Record : true,
+                useH264MSE: typeof opt.useH264MSE === 'boolean' ? opt.useH264MSE : true,
+                useH265MSE: typeof opt.useH265MSE === 'boolean' ? opt.useH265MSE : true,
+                localeLang: opt.localeLang || 'zhCN', // zhCN 中文 enUS 英文
+                localeI18n: opt.localeI18n, // 1.3.2新增配置
+                ivsTypeArr: opt.ivsTypeArr || [1, 2], // 传入数组，支持显示的情况, 空表示没有智能信息，1-智能规则线 2-智能目标框
+                isWebView: opt.isWebView, // 是否webview引擎 true-是 false-不是
+                picCapCb: opt.picCapCb, // 是否需要抓图回调
+                recordCb: opt.recordCb // 是否需要本地录制数据回调
+            },
+            receiveMessageFromWSPlayer: opt.receiveMessageFromWSPlayer || this.__receiveMessageFromWSPlayer.bind(this),
+            getRecords: API.getRecords, // 获取录像列表接口  (不要做任何改动, 只传入方法, API.getRecords() 是错误的， 会报错)
+            getRecordRtspByTime: API.getRecordRtspByTime, // 根据时间形式获取录像rtsp接口 (不要做任何改动, 只传入方法, API.getRecordRtspByTime() 是错误的， 会报错)
+            getRecordRtspByFile: API.getRecordRtspByFile, // 根据文件形式获取录像rtsp接口 (不要做任何改动, 只传入方法, API.getRecordRtspByFile() 是错误的， 会报错)
+        })
+        this.player = this.recordPlayer;
+    }
+
+    /**
+     * 播放实时预览视频
+     * @param opt.channelList: {Array<Object>} 必填，通道列表
+     * @param opt.streamType: {Number|String} 选填，码流类型，不填默认播放辅码流1，若不存在辅码流1，则自动切换到主码流  1-主码流 2-辅码流1 3-辅码流2
+     * @param opt.windowIndex: {Number} 选填，指定从哪个窗口开始播放。不填默认从选中的窗口开始播放
+     */
+    // channelList: [{
+    //     id: channelCode, // {String} 通道编码 -- 用于预览，必填
+    //     deviceCode: deviceCode, // {String} 设备编码 -- 用于对讲，对讲必填，无对讲功能可不填
+    //     deviceType: deviceType, // {String} 设备类型 -- 用于对讲，对讲必填，无对讲功能可不填
+    //     channelSeq: channelSeq, // {String|Number} 通道序号 -- 用于对讲，对讲必填，无对讲功能可不填
+    //     cameraType: cameraType, // {String|Number} 摄像头类型 -- 用于云台，云台必填，无云台功能可不填
+    //     capability: capability, // {String} 能力集 -- 用于云台，云台必填，无云台功能可不填
+    // }]
+    playRealVideo(opt) {
+        this.realPlayer && this.realPlayer.playRealVideo({
+            channelList: opt.channelList,
+            streamType: opt.streamType,
+            windowIndex: opt.windowIndex
+        })
+    }
+
+    /**
+     * 传入 wsUri 和 wsUrl 播放预览视频
+     * @param { String } opt.rtspURL 必传 rtsp流地址
+     * @param { String } opt.wsURL 必传 建立的websocket连接地址
+     * @param { String } opt.channelId 必传 通道id
+     * @param { String } opt.streamType 必传 码流类型 1-主码流 2-辅码流1  3-辅码流2
+     * @param { String } opt.streamServerIp 选传 流媒体服务ip
+     * @param { String } opt.playerAdapter 选传 是否拉伸窗口 selfAdaption 自适应 | stretching 拉伸
+     * @param { Number } opt.selectIndex 必传 窗口号 从0开始
+     * @param { Object } opt.channelData 选传 通道信息，若使用云台功能，则必传
+     */
+    realByUrl(opt) {
+        this.player && this.player.realByUrl(opt)
+    }
+
+    /**
+     * @name talkByUrl
+     * @desc 通过流地址方式进行对讲
+     * @param playTalk 流地址方式
+     * @param rtspURL rtsp的地址
+     * @param wsURL websocket地址
+     * @param selectIndex 窗口号
+     * @param audioType 音频类型
+     */
+    talkByUrl(opt) {
+        this.realPlayer && this.realPlayer.talkByUrl(opt)
+    }
+
+    /**
+     * @name 停止流地址对讲
+     * @desc 流地址停止对讲
+     */
+    stopUrlTalk(windowIndex) {
+        this.realPlayer && this.realPlayer.stopUrlTalk(windowIndex)
+    }
+
+    // 音量设置
+    /**
+     * 开启声音
+     */
+    openVolume(windowIndex) {
+        this.player.openVolume(windowIndex)
+    }
+
+    /**
+     * 关闭声音
+     */
+    closeVolume(windowIndex) {
+        this.player.closeVolume(windowIndex)
+    }
+
+    /**
+     * 设置声音
+     * @param volume 声音大小 传 0-1 小数点一位的小数
+     */
+    setVolume(windowIndex, volume) {
+        this.player.setVolume(windowIndex, volume)
+    }
+
+    /**
+     * 播放录像回放
+     * @param opt.channelList {Array<Object>} 通道集合 必填
+     * @param opt.startTime {String|Number} 开始时间  必选  timestamp到秒
+     * @param opt.endTime {String|Number} 结束时间  必选  timestamp到秒
+     * @param opt.recordSource {String|Number} 录像来源  必选 2表示设备录像  3表示中心录像
+     * @param opt.streamType {String|Number} 码流类型 可选
+     * @param opt.recordType {String|Number} 录像类型 可选
+     * @param {Boolean} opt.playRecordByFile 选传 是否根据文件播放，默认为false
+     */
+    // channelList: [{
+    //     id: channelCode, // {String} 通道编码 -- 用于回放，必填
+    // }]
+    playRecordVideo(opt) {
+        this.recordPlayer && this.recordPlayer.playRecordVideo(opt)
+    }
+
+    /**
+     * 传入 wsUri 和 wsUrl 播放回放视频
+     * @param {Object} opt
+     * @param {String} opt.wsURL 必传 拉流的websocket连接地址
+     * @param {String} opt.rtspURL 必传 rtsp地址
+     * @param {String} opt.channelId 必传 通道id
+     * @param {String} opt.startTime 必传 开始时间 到秒的时间戳
+     * @param {String} opt.endTime 必传 结束时间 到秒的时间戳
+     * @param {String} opt.playerAdapter 选传 是否拉伸窗口 selfAdaption 自适应 | stretching 拉伸
+     * @param {Number} opt.selectIndex 选传 窗口号
+     * @param {Object} opt.channelData 选传 通道信息
+     * @param {Array} opt.records 录像文件信息 [数组格式，用于渲染进度条]
+     * @param {Boolean} opt.playRecordByTime 是否设备录像播放 true-设备录像播放，false-中心录像播放
+     */
+    recordByUrl(opt) {
+        this.player && this.player.recordByUrl(opt)
+    }
+
+    // 更新窗口
+    updatePlayerWindow() {
+        this.player.__updatePlayerWindow()
+    }
+
+    // 开始对讲
+    playTalkAudio(selectIndex) {
+        this.player.playTalkAudio(selectIndex)
+    }
+
+    /**
+     * 录像暂停
+     * 只有正在播放的录像调用才有效
+     * @param { number } index 窗口号
+     */
+    pause(index) {
+        this.recordPlayer && this.recordPlayer.pause(index);
+    }
+
+    /**
+     * 录像暂停后播放
+     * 只有暂停后的录像调用才有效
+     * @param { number } index 窗口号
+     */
+    play(index) {
+        this.recordPlayer && this.recordPlayer.play(index);
+    }
+
+    /**
+     * 倍速播放
+     * @param { number } speed 速率 0.125 0.25 0.5 1 1.25 1.5 2 4 8 共7种速率
+     * @param { number } index 窗口号
+     */
+    playSpeed(speed, index) {
+        this.recordPlayer && this.recordPlayer.playSpeed(speed, index);
+    }
+
+    /**
+     * 关闭播放器
+     * @param {number} index 可选，关闭指定索引的窗口的播放器，不传则表示关闭所有播放器
+     */
+    close(index, closeReason="api") {
+        this.player && this.player.close(index, closeReason);
+    }
+
+    /**
+     * 设置全屏
+     */
+    setFullScreen() {
+        this.player.setFullScreen();
+    }
+    /**
+     * 设置退出全屏
+     */
+    setExitFullScreen() {
+        this.player.setExitFullScreen();
+    }
+
+    /**
+     * 设置窗口自适应还是拉伸
+     * @param {string} playerAdapter selfAdaption 自适应 | stretching 拉伸
+     */
+    setPlayerAdapter(playerAdapter) {
+        this.player.setPlayerAdapter(playerAdapter);
+    }
+
+    /**
+     * 控制视频播放器显示的路数: 1 2 3 4 6 8 9 16 25，不会超过最大显示路数
+     * @param {number} number
+     */
+    setPlayerNum(number) {
+        this.player.setPlayerNum(number);
+    }
+
+    /**
+     * 设置选中的播放器的索引
+     * @param {number} index 设置选中的窗口的索引
+     */
+    setSelectIndex(index) {
+        this.player.setSelectIndex(index);
+    }
+
+    /**
+     * 录像跳转播放
+     * /**
+     * 根据时间跳转播放
+     * @param {String|Number} time
+     * time格式支持情况如下：
+     * new Date("2024-11-01 01:00:00") // 时间戳对象格式 (直接跳转到当前时间)
+     * "2024-11-01 01:00:00" // 时间字符串 (同上)
+     * "2024/11/01 01:00:00" // 时间字符串 (同上)
+     * 1706979600 // 到秒时间戳, (同上)
+     * "1706979600" // 到秒时间戳字符串 (同上)
+     * 1706979600000 // 到毫秒时间戳 (同上)
+     * "1706979600000" // 到毫秒时间戳字符串 (同上)
+     * "01:00:00" // 当日时分秒跳转 (此值跳转到开始播放的当前的时间点， 如录像是 11-1号的，则跳转到 11-1号01:00:00)
+     * "3600" // 1点的时间戳 (此值根据录像的开始时间，往后推1小时，跳转到这个时间点, 如开始时间为 11-1号2点，则跳转到 11-1号3点开始播放)
+     * 3600 // 1点的时间戳字符串 (同上)
+     * @param {number} selectIndex 窗口号
+     */
+    jumpPlayByTime(time, selectIndex) {
+        this.player.jumpPlayByTime(time, selectIndex);
+    }
+
+    /**
+     * 开始本地录像
+     * @param selectIndex 选择本地录像下载的窗口索引 必填
+     * @param name 录像名称 必填
+     * @param size 单个录像文件大小（单位M） 可选，默认值为 ./config/config.js 中 localRecordSize
+     * @param downloadMp4Record 可选，默认值为全局配置。 true - 以MP4格式下载录像，false - 以dav格式下载录像
+     */
+    startLocalRecord(selectIndex, name, size, downloadMp4Record) {
+        this.player.startLocalRecord(selectIndex, name, size, downloadMp4Record)
+    }
+    /**
+     * 停止本地录像下载
+     * @param {Number} selectIndex 选择关闭本地录像下载的窗口索引
+     */
+    stopLocalRecord(selectIndex) {
+        this.player.stopLocalRecord(selectIndex)
+    }
+
+    /**
+     * 智能规则线和目标框设置
+     * @param {Boolean} showIvs 是否显示智能规则线和目标框，true-显示，false-隐藏
+     * @param {Number} selectIndex 选择的窗口号
+     * @param {Array} ivsType [1] - 智能规则线， [2] - 智能目标框， [1, 2] - 规则线和智能目标框都显示
+     */
+    setIvs(showIvs, selectIndex, ivsType) {
+        this.player.setIvs({
+            showIvs,
+            ivsType,
+            selectIndex
+        })
+    }
+
+    /**
+     * 抓图
+     * @param {Number} index 抓图的窗口索引
+     * @param {String} name 抓图的图片名称（选填）
+     */
+    picCap(index, name) {
+        this.player.picCap(index, name)
+    }
+
+    /**
+     * 在窗口里显示自定义信息
+     * @param index 窗口索引
+     * @param msg 显示的信息
+     * @param channelData 通道信息
+     */
+    showMsgInWindow(index, msg, channelData) {
+        this.player.showMsgInWindow(index, msg, channelData)
+    }
+
+    /**
+     * 创建WSPlayer蒙层
+     */
+    createWSPlayerLayer(layerId, callback) {
+        this.player.createWSPlayerLayer(layerId, callback)
+    }
+
+    /**
+     * 创建自定义dom(可自定义水印,智能帧等)
+     * @param {*} domId
+     */
+    createCustomDom(domId) {
+        this.player.createCustomDom(domId)
+    }
+
+    /**
+     * destroy 销毁播放器
+     * @param {*} method
+     * @param {*} data
+     */
+    destroy() {
+        this.player.destroy();
+    }
+
+    // ----------------- 播放器事件 ------------------------
+    __receiveMessageFromWSPlayer(method, data) {
+        switch(method) {
+            // ------------- 公共事件 ---------------------
+            case "initializationCompleted":
+                // 初始化完成，可调用播放方法（适用于动态加载解码库）
+                break;
+            case "realSuccess": // 实时预览成功
+                console.log("实时预览成功")
+                break;
+            case "realError": // 实时预览失败
+                console.log("实时预览失败", data)
+                break;
+            case "talkSuccess": // 对讲成功 V1.3.4版本新增
+                console.log("对讲成功");
+                break;
+            case "talkError": // 对讲失败
+                console.log("对讲失败");
+                break;
+            case "recordSuccess": // 录像回放成功
+                console.log("录像回放成功");
+                break;
+            case "recordError": // 录像回放失败
+                console.log("录像回放失败", data);
+                break;
+            case 'recordFinish':
+                console.log("当前录像回放完成", data)
+                break;
+            case "selectWindowChanged": // 选中的窗口发生改变
+                this.currentChannelId = data.channelId;
+                this.playIndex = data.playIndex;
+                break;
+            case "windowNumChanged": // 播放器显示的路数发生改变
+                this.playNum = data;
+                break;
+            case "closeVideo": // 视频关闭
+                // 点击关闭按钮引发的视频关闭进行提示
+                // 切换视频引发的视频关闭不进行提示
+                if(!data.changeVideoFlag) {
+                    console.log(`窗口${data.selectIndex}的视频已关闭`)
+                }
+                // 关闭原因: btnClick-按钮关闭 chromeMemoryOut-浏览器内存不足 changeStream-切换视频调用 playSDKError-解码库报错关闭 recordFinish-录像回放完成 api-调用API关闭 destroy-解码库销毁关闭 otherCustom-可自定义关闭内容
+                // console.log(data.closeReason)
+                break;
+            case "statusChanged": // 视频状态发生改变
+                break;
+            case "getVideoFrameInfo":
+                // 获取视频帧信息
+                break;
+            case "getAudioFrameInfo":
+                // 获取视频内音频帧信息
+                break;
+            case "getPlayBackStreamRange":
+                // 获取录像回放时长
+                console.log("getPlayBackStreamRange", data)
+                break;
+            case "dragWindow":
+                // 拖拽窗口
+                console.log(`窗口${data.dragIndex}的视频拖拽到窗口${data.dropIndex}上`)
+                break;
+            case "errorInfo": // 错误信息提示
+                console.log(data, "可打印查看错误消息");
+                // data = {
+                //     errorCode: xxx,
+                //     errorMsg: "",
+                //     errorData: {
+                //         channelList: [],
+                //         apiErrorInfo: {},
+                //         method: "",
+                //         arguments: [],
+                //     },
+                // }
+                console.error(data)
+                break;
+            case "customDomInfo": // 窗口大小发生变化，视频播放时均会触发
+				// data.customDomId 为每一个小窗口的自定义dom的id
+				// data.width 为当前窗口的宽度
+				// data.height 为当前窗口的高度
+				// data.currentWindowPlaying 当前窗口是否正在播放视频
+				// 根据上述内容 进行水印的添加，或其他操作
+				break;
+            case "chromeMemoryOut":
+                console.warn("浏览器资源不足！")
+                break;
+            case "fullScreen":
+                console.log("点击播放器底部的全屏按钮触发此回调")
+                break;
+            case 'picCap': // 抓图回调，配置在 new PlayerManager 中配置 picCapCb为true后即可触发
+                // data.channelData
+                // data.selectIndex 窗口索引
+                // data.base64Img 图片base64字符串
+                break;
+            case 'localRecordBuf': // 本地录像回调，一帧一帧返回
+                break;
+            case 'localRecordFile': // 本地录像停止时返回Blob数据
+                break;
+            case "notifyTalk": // 点击顶部对讲按钮，触发此回调
+                // 当采用 realByUrl 进行实时预览时，点击顶部对讲按钮，会触发此回调，需要在此回调内 获取对讲rtsp发起对讲
+                break;
+            case "switchStartTime":
+                // 在调用 recordByUrl 中配置 playRecordByTime: false 后， 每次拖拽都会触发此回调，此回调需要重新获取rtsp拉流(不支持直接拖拽跳转的设备需要重新拉流，走此回调)
+                break;
+            case "setSeekTime":
+                // 此回调不需要重新获取rtsp拉流，录像内部会自动跳转，只返回时间告知用户。如此方法跳转无效，请采用上述 switchStartTime方法
+                // 在调用 recordByUrl 中配置 playRecordByTime: true 后, 录像进度条触发拖拽跳转，默认触发此回调。返回跳转后的时间
+                break;
+            default:
+                break;
+        }
+    }
+}
+
+export {
+    PlayerManager
+}
+
+export default PlayerManager

monitor_ui/public/icc/api.js

@@ -0,0 +1,360 @@
+// 注意： 本文接口均为 ICC 接口， 接口需要三方后端转发使用，每个方法对请求进行改写，固定格式请看注释
+
+
+// 跟平台相关的业务JS
+const API = {
+    /**
+     * 请求实时视频流地址
+     * @returns Promise<>
+     * @desc 只需改写 API.ajaxRequest 内容
+     *
+     * 固定格式如下
+     * return new Promise ((resolve, reject) => {
+     *      ...
+     *      resolve({     resolve 返回格式示例如下
+     *          url: "",
+     *          token: 1,
+     *          ...
+     *      })
+     * })
+    */
+    getRealmonitor(realmonitorParam) {
+        return new Promise((resolve,reject) => {
+            API.ajaxRequest({
+                url: '/evo-apigw/admin/API/MTS/Video/StartVideo',
+                data: realmonitorParam,
+            }).then(res => {
+                resolve(res.data)
+            }).catch(res => {
+                reject(res)
+            })
+        })
+    },
+    /**
+     * 获取对讲的rtsp
+     * @returns Promise<>
+     * @desc 只需改写 API.ajaxRequest 内容
+     *
+     * 固定格式如下
+     * return new Promise ((resolve, reject) => {
+     *      ...
+     *      resolve({     resolve 返回格式示例如下
+     *          url: "",
+     *          token: 1,
+     *          ...
+     *      })
+     * })
+    */
+    getTalkRtsp(talkPram) {
+        return new Promise((resolve,reject) => {
+            API.ajaxRequest({
+                url: '/evo-apigw/admin/API/MTS/Audio/StartTalk',
+                data: talkPram,
+            }).then(res => {
+                resolve(res.data)
+            }).catch(res => {
+                reject(res)
+            })
+        })
+    },
+
+
+	/**
+	 * 停止对讲
+	 */
+	stopTalk(recordByTimeParam) {
+        return new Promise((resolve,reject) => {
+            API.ajaxRequest({
+                url: '/evo-apigw/admin/API/MTS/Audio/StopTalk',
+                data: recordByTimeParam,
+            }).then(res => {
+                resolve(res.data)
+            }).catch(res => {
+                reject(res)
+            })
+        })
+    },
+
+
+    /**
+     * 根据时间查询设备上的录像
+     * @param recordByTimeParam.recordType 录像类型：1=一般录像，2=报警录像
+     * @param recordByTimeParam.recordSource 录像来源：1=全部，2=设备，3=中心
+     * @param recordByTimeParam.streamType 码流类型：1=主码流, 2=辅码流 使用辅码流 码率低更加流畅
+     * @param recordByTimeParam.channelId 通道code
+     * @param recordByTimeParam.startTime 开始时间
+     * @param recordByTimeParam.endTime 结束时间
+
+    * @returns Promise<>
+     * @desc 只需改写 API.ajaxRequest 内容
+     *
+     * 固定格式如下
+     * return new Promise ((resolve, reject) => {
+     *      ...
+     *      resolve({     resolve 返回格式示例如下
+     *          url: "",
+     *          token: 1,
+     *          ...
+     *      })
+     * })
+    */
+    getRecordRtspByTime(recordByTimeParam) {
+        return new Promise((resolve,reject) => {
+            API.ajaxRequest({
+                url: '/evo-apigw/admin/API/SS/Playback/StartPlaybackByTime',
+                data: recordByTimeParam,
+            }).then(res => {
+                resolve(res.data)
+            }).catch(res => {
+                reject(res)
+            })
+        })
+    },
+
+    /**
+     * 根据文件形式回放录像
+     * @param recordByFileParam.recordType 录像类型：1=一般录像，2=报警录像
+     * @param recordByFileParam.streamType 码流类型：1=主码流, 2=辅码流 使用辅码流 码率低更加流畅
+     * @param recordByFileParam.recordSource 录像来源：1=全部，2=设备，3=中心
+     * @param recordByFileParam.channelId 通道code
+     * @param recordByFileParam.startTime 开始时间 timestamp到秒
+     * @param recordByFileParam.endTime 结束时间 timestamp到秒
+
+    * @returns Promise<>
+     * @desc 只需改写 API.ajaxRequest 内容
+     *
+     * 固定格式如下
+     * return new Promise ((resolve, reject) => {
+     *      ...
+     *      resolve({     resolve 返回格式示例如下
+     *          url: "",
+     *          token: 1,
+     *          ...
+     *      })
+     * })
+    */
+    getRecordRtspByFile(recordByFileParam) {
+        return new Promise((resolve, reject) => {
+            API.ajaxRequest({
+                url: '/evo-apigw/admin/API/SS/Playback/StartPlaybackByFile',
+                data: recordByFileParam,
+            }).then(res => {
+                resolve(res.data)
+            }).catch(res => {
+                reject(res)
+            })
+        })
+    },
+    /**
+     *  查询中心录像上的录像文件信息
+     * @param recordsParam.recordType 录像类型：1=一般录像，2=报警录像
+     * @param recordsParam.streamType 码流类型：1=主码流, 2=辅码流 使用辅码流 码率低更加流畅
+     * @param recordsParam.recordSource 录像来源：1=全部，2=设备，3=中心
+     * @param recordsParam.channelId 通道code
+     * @param recordsParam.startTime 开始时间 timestamp到秒
+     * @param recordsParam.endTime 结束时间 timestamp到秒
+     *
+     * @returns Promise<>
+     * @desc 只需改写 API.ajaxRequest 内容
+     *
+     * 固定格式如下
+     * return new Promise ((resolve, reject) => {
+     *      ...
+     *      resolve({     resolve 返回格式示例如下
+     *          url: "",
+     *          token: 1,
+     *          ...
+     *      })
+     * })
+     */
+    getRecords(recordsParam) {
+        return new Promise((resolve,reject) => {
+            API.ajaxRequest({
+                url: '/evo-apigw/admin/API/SS/Record/QueryRecords',
+                data: recordsParam,
+            }).then(res => {
+                resolve(res.data)
+            }).catch(res => {
+                reject(res)
+            })
+        })
+    },
+    /**
+     * 云台方向控制
+     * @param directionParam
+     * @returns {Promise<unknown>}
+     */
+    setPtzDirection(directionParam) {
+        return new Promise((resolve,reject) => {
+            API.ajaxRequest({
+                url: '/evo-apigw/admin/API/DMS/Ptz/OperateDirect',
+                data: directionParam,
+            }).then(res => {
+                resolve(res.data)
+            }).catch(res => {
+                reject(res)
+            })
+        })
+    },
+    /**
+     * 云台镜头控制
+     * @param cameraParam
+     * @returns {Promise<unknown>}
+     *
+     * @returns Promise<>
+     * @desc 只需改写 API.ajaxRequest 内容
+     *
+     * 固定格式如下
+     * return new Promise ((resolve, reject) => {
+     *      ...
+     *      resolve({     resolve 返回格式示例如下
+     *          url: "",
+     *          token: 1,
+     *          ...
+     *      })
+     * })
+     */
+    setPtzCamera(cameraParam) {
+        return new Promise((resolve,reject) => {
+            API.ajaxRequest({
+                url: '/evo-apigw/admin/API/DMS/Ptz/OperateCamera',
+                data: cameraParam,
+            }).then(res => {
+                resolve(res.data)
+            }).catch(res => {
+                reject(res)
+            })
+        })
+    },
+    /**
+     * 云台三维定位接口
+     * @param positionParam
+
+     * @returns Promise<>
+     * @desc 只需改写 API.ajaxRequest 内容
+     *
+     * 固定格式如下
+     * return new Promise ((resolve, reject) => {
+     *      ...
+     *      resolve({     resolve 返回格式示例如下
+     *          url: "",
+     *          token: 1,
+     *          ...
+     *      })
+     * })
+    */
+    controlSitPosition(positionParam) {
+        return new Promise((resolve,reject) => {
+            API.ajaxRequest({
+                url: '/evo-apigw/admin/API/DMS/Ptz/SitPosition',
+                data: positionParam,
+            }).then(res => {
+                resolve(res.data)
+            }).catch(res => {
+                reject(res)
+            })
+        })
+    },
+    /**
+     * 请求
+     * @param {*} opt
+     * @param {*} opt.url 接口地址
+     * @param {*} opt.data 参数
+
+     * 集成后，该方法请删除
+     */
+    ajaxRequest(opt) {
+        var accessToken = localStorage.getItem('accessToken')
+        var userId = accessToken.split(':')[0]
+        opt.headers = opt.headers ? opt.headers : {}
+        return new Promise((resolve, reject) => {
+            // eslint-disable-next-line no-undef
+            $.ajax({
+                url: opt.url,
+                type: opt.type ? opt.type : 'post',
+                dataType: opt.dataType ? opt.dataType : 'json',
+                data: JSON.stringify(opt.data),
+                headers: Object.assign({
+                    Authorization: "bearer " + accessToken,
+                    'User-Id': userId,
+                    'Content-Type': 'application/json',
+                    proxyip: localStorage['proxyIp']
+                }, opt.headers),
+                contentType: 'application/json;charset=utf-8',
+                crossDomain: true,
+                success: function (res) {
+                    if (res.code == 1000 || res.code == '0') {
+                        resolve(res)
+                    } else if (res.code == "27001007") {
+                        // token过期，刷新token
+                        // API.refreshToken().then(() => {
+                        //     // token刷新后，重新请求
+                        //     API.ajaxRequest(opt).then(data => {
+                        //         // 重新请求后，需要处理原始请求的resolve
+                        //         resolve(data)
+                        //     })
+                        // })
+                        console.warn("登陆失效，请重新登陆")
+                        reject(res)
+                    } else {
+                        reject(res)
+                    }
+                }
+            })
+        })
+    },
+    // 刷新token
+    // 集成后，该方法请删除
+    refreshToken() {
+        var refreshToken = localStorage.getItem('refreshToken')
+        var clientId = localStorage.getItem('checked') ? 'web_client_remember' : 'web_client'
+        var value = {
+            'refresh_token': refreshToken,
+            'grant_type': 'refresh_token',
+            'client_id': clientId,
+            "client_secret": 'web_client'
+        }
+        var param = ''
+        for (var i in value) {
+            param += '&' + i + "=" + value[i]
+        }
+        param = param.slice(1)
+        return new Promise((resolve, reject) => {
+            // eslint-disable-next-line no-undef
+            $.ajax({
+                url: '/evo-apigw/evo-oauth/oauth/token',
+                type: 'post',
+                dataType: 'json',
+                data: param,
+                headers: {
+                    'content-type': 'application/x-www-form-urlencoded',
+                    proxyip: localStorage['proxyIp']
+                },
+                success: function (res) {
+                    console.log(res)
+                    if (res.code === '0') {
+                        localStorage.setItem("accessToken", res.data.access_token)
+                        localStorage.setItem("refreshToken", res.data.refresh_token)
+                        localStorage.setItem('expiresTime', new Date().getTime() + res.data.expires_in * 1000)
+                        // 登录保活
+                        API.ajaxRequest({
+                            url: `/evo-apigw/evo-brm/1.2.0/user/keepalive`,
+                            data: {
+                                clientType: 1,
+                                magicId: localStorage.magicId,
+                                timeout: 10000
+                            }
+                        })
+                        resolve()
+                    } else {
+                        console.error(`refreshToken 失效，请登录平台`)
+                        window.open(location.origin)
+                        reject()
+                    }
+                }
+            })
+        })
+    },
+
+}
+export default API

monitor_ui/public/index.html

@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <link href="/SuperMap3D/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
+  <link rel="stylesheet" href="./lib/WSPlayer/player.css">
+  <link rel="stylesheet" href="./lib/WSPlayer/window.division.css">
   <!--<title><%= webpackConfig.name %></title>-->
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <script type="text/javascript" src="/hk/jquery-1.12.4.min.js"></script>
@@ -277,6 +279,7 @@
 <script src="./hk/jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
 <script src="./hk/web-control_1.2.5.min.js"></script>   <!-- 用于前端与插件交互 -->
 <script type="text/javascript" src="/SuperMap3D/examples/webgl/js/supermap/SuperMap.Include.js"></script>
+<script type="text/javascript" src="./lib/WSPlayer/PlaySDKInterface.js"></script>
 <div id="app">
   <div class="loading">
     <div><span></span></div>

monitor_ui/public/lib/WSPlayer/commonThread/libmavasp_litepacket.data

@@ -0,0 +1,50 @@
+[COMMON]
+Common_Frequency=8000
+Common_Offset=2
+Common_Channels=1
+Common_Depth=16
+Common_ArrayProcEnable=0
+Common_ArrayNum=1
+Common_SettingMode=1
+Common_FunctionalMode=0
+Common_SignalConversionMode=1
+Common_ModuleFileOutEnable=1
+Common_MuduleSettingMode=1
+Common_OutLenMode=0
+Common_DeteOutLen=0
+Common_LogfileEnable=0
+
+[Audio_Framework_AEC]=1
+aec_Delaymode=0
+aec_Delayvalue=0
+aec_Lfmode=0x00000010
+aec_Partitionnumber=40
+aec_Filtermode=0
+aec_Nlpmode=1
+aec_Nlpecmode=2
+aec_Nlpsuppressfactor=0.99
+aec_Procmode=0
+aec_Runmode=0
+aec_Outmode=0
+aec_Bufsizesrc=1000
+aec_Bufsizeref=1000
+aec_Bufsizeout=1000
+aec_ModulePerformanceEnable=0
+aec_ModuleUnitoftime=0
+aec_DebugInfoLevel=0
+
+[Audio_Framework_ANS]=1
+ans_LoStopFreq=0
+ans_HiStopFreq=4000
+ans_Mode=2
+ans_ModulePerformanceEnable=0
+ans_ModuleUnitoftime=0
+ans_DebugInfoLevel=0
+
+[Audio_Framework_AGC]=0
+agc_AimGainLevel=0x01000303
+agc_LimitLevel=0
+agc_MicLevel=255
+agc_ModulePerformanceEnable=0
+agc_ModuleUnitoftime=0
+agc_DebugInfoLevel=0

monitor_ui/public/lib/WSPlayer/icon/RecordHover.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="关闭" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#428AE3;}
+</style>
+<path id="联合_364" class="st0" d="M3,17c-0.8,0-1.5-0.7-1.5-1.5v-11C1.5,3.7,2.2,3,3,3l0,0h11c0.8,0,1.5,0.7,1.5,1.5l0,0v2.1
+	l0.8-0.3c0.2-0.1,0.4-0.1,0.5-0.1c0.9,0,1.7,0.8,1.7,1.7V12c0,0.9-0.8,1.7-1.7,1.7c-0.2,0-0.4,0-0.5-0.1l-0.8-0.3v2.1
+	c0,0.8-0.7,1.5-1.5,1.5L3,17z M3.5,15h10v-4.4l3,1V8.4l-3,1V5h-10V15z M7.5,10.8V9.2c0-0.4,0.3-0.7,0.7-0.7c0.1,0,0.2,0,0.3,0.1
+	l1.6,0.8c0.3,0.2,0.5,0.6,0.3,0.9c-0.1,0.1-0.2,0.2-0.3,0.3l-1.6,0.8c-0.1,0.1-0.2,0.1-0.3,0.1C7.8,11.5,7.5,11.2,7.5,10.8
+	C7.5,10.8,7.5,10.8,7.5,10.8L7.5,10.8z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/RecordNormal.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="关闭" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path id="联合_364" class="st0" d="M3,17c-0.8,0-1.5-0.7-1.5-1.5v-11C1.5,3.7,2.2,3,3,3l0,0h11c0.8,0,1.5,0.7,1.5,1.5l0,0v2.1
+	l0.8-0.3c0.2-0.1,0.4-0.1,0.5-0.1c0.9,0,1.7,0.8,1.7,1.7V12c0,0.9-0.8,1.7-1.7,1.7c-0.2,0-0.4,0-0.5-0.1l-0.8-0.3v2.1
+	c0,0.8-0.7,1.5-1.5,1.5L3,17z M3.5,15h10v-4.4l3,1V8.4l-3,1V5h-10V15z M7.5,10.8V9.2c0-0.4,0.3-0.7,0.7-0.7c0.1,0,0.2,0,0.3,0.1
+	l1.6,0.8c0.3,0.2,0.5,0.6,0.3,0.9c-0.1,0.1-0.2,0.2-0.3,0.3l-1.6,0.8c-0.1,0.1-0.2,0.1-0.3,0.1C7.8,11.5,7.5,11.2,7.5,10.8
+	C7.5,10.8,7.5,10.8,7.5,10.8L7.5,10.8z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/Recording.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="关闭" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#428AE3;}
+	.st1{fill:#E9463A;}
+</style>
+<path id="联合_364" class="st0" d="M3,17c-0.8,0-1.5-0.7-1.5-1.5v-11C1.5,3.7,2.2,3,3,3l0,0h11c0.8,0,1.5,0.7,1.5,1.5l0,0v2.1
+	l0.8-0.3c0.2-0.1,0.4-0.1,0.5-0.1c0.9,0,1.7,0.8,1.7,1.7V12c0,0.9-0.8,1.7-1.7,1.7c-0.2,0-0.4,0-0.5-0.1l-0.8-0.3v2.1
+	c0,0.8-0.7,1.5-1.5,1.5L3,17z M3.5,15h10v-4.4l3,1V8.4l-3,1V5h-10V15z M7.5,10.8V9.2c0-0.4,0.3-0.7,0.7-0.7c0.1,0,0.2,0,0.3,0.1
+	l1.6,0.8c0.3,0.2,0.5,0.6,0.3,0.9c-0.1,0.1-0.2,0.2-0.3,0.3l-1.6,0.8c-0.1,0.1-0.2,0.1-0.3,0.1C7.8,11.5,7.5,11.2,7.5,10.8L7.5,10.8
+	L7.5,10.8z"/>
+<circle class="st1" cx="15.9" cy="4.1" r="2"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/arrow-b.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="_5-2" class="st0" d="M10.1,15L18,7.1V5.5H2.2v1.6L10.1,15z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/arrow-l.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="_7-2" class="st0" d="M5.1,10l7.9,7.9h1.6V2.1H13L5.1,10z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/arrow-lb.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="_6-2" class="st0" d="M6.9,14.7h6.2c0.9,0,1.6-0.7,1.6-1.6l0,0L6.9,5.3C6,5.3,5.3,6,5.3,6.9l0,0v6.2
+	C5.3,14,6,14.7,6.9,14.7C6.9,14.7,6.9,14.7,6.9,14.7z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/arrow-lt.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="_8-2" class="st0" d="M6.9,5.5h6.2c0.9,0,1.6,0.7,1.6,1.6l0,0l-7.8,7.8c-0.9,0-1.6-0.7-1.6-1.6l0,0V7.1
+	C5.3,6.2,6,5.5,6.9,5.5C6.9,5.5,6.9,5.5,6.9,5.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/arrow-r.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="_3-2" class="st0" d="M15.1,10l-7.9,7.9H5.6V2.1h1.6L15.1,10z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/arrow-rb.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="_4-2" class="st0" d="M13.5,14.7H7.3c-0.9,0-1.6-0.7-1.6-1.6l0,0l7.8-7.8c0.9,0,1.6,0.7,1.6,1.6l0,0v6.2
+	C15.1,14,14.4,14.7,13.5,14.7C13.5,14.7,13.5,14.7,13.5,14.7z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/arrow-rt.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="_2-2" class="st0" d="M13.5,5.5H7.3c-0.9,0-1.6,0.7-1.6,1.6l0,0l7.8,7.8c0.9,0,1.6-0.7,1.6-1.6l0,0V7.1
+	C15.1,6.2,14.4,5.5,13.5,5.5C13.5,5.5,13.5,5.5,13.5,5.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/arrow-t.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="_1-2" class="st0" d="M10.1,5l7.9,7.9v1.6H2.2v-1.6L10.1,5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/close-all-hover.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 21 20.7" style="enable-background:new 0 0 21 20.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<g id="组_18025" transform="translate(-16 -2)">
+	<g id="组_18022" transform="translate(1443)">
+		<path id="联合_898" class="st0" d="M-1424.5,22.2c-1.1,0-2-0.9-2-2v-10c0-0.8,0.5-1.6,1.3-1.9V8.2c0-1.2,0.8-2.3,2-2.6V5.2
+			c0-1.5,1.2-2.7,2.7-2.7c0,0,0,0,0,0h8c1.5,0,2.7,1.2,2.7,2.7l0,0v0.4c1.2,0.3,2,1.4,2,2.6v0.1c0.8,0.3,1.3,1,1.3,1.9v10
+			c0,1.1-0.9,2-2,2H-1424.5z M-1424.5,11.2v8c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-8c0-0.6-0.4-1-1-1h-14
+			C-1424.1,10.2-1424.5,10.6-1424.5,11.2z M-1409.2,8.2c0-0.7-0.6-1.3-1.3-1.3h-12c-0.7,0-1.3,0.6-1.3,1.3H-1409.2z M-1411.2,5.5
+			V5.2c0-0.7-0.6-1.3-1.3-1.3h-8c-0.7,0-1.3,0.6-1.3,1.3v0.3H-1411.2z M-1416.5,16.6l-2.1,2.1l-1.4-1.4l2.1-2.1l-2.1-2.1l1.4-1.4
+			l2.1,2.1l2.1-2.1l1.4,1.4l-2.1,2.1l2.1,2.1l-1.4,1.4L-1416.5,16.6z"/>
+	</g>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/close-all.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 21 20.7" style="enable-background:new 0 0 21 20.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<g id="组_18025" transform="translate(-16 -2)">
+	<g id="组_18022" transform="translate(1443)">
+		<path id="联合_898" class="st0" d="M-1424.5,22.2c-1.1,0-2-0.9-2-2v-10c0-0.8,0.5-1.6,1.3-1.9V8.2c0-1.2,0.8-2.3,2-2.6V5.2
+			c0-1.5,1.2-2.7,2.7-2.7c0,0,0,0,0,0h8c1.5,0,2.7,1.2,2.7,2.7l0,0v0.4c1.2,0.3,2,1.4,2,2.6v0.1c0.8,0.3,1.3,1,1.3,1.9v10
+			c0,1.1-0.9,2-2,2H-1424.5z M-1424.5,11.2v8c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-8c0-0.6-0.4-1-1-1h-14
+			C-1424.1,10.2-1424.5,10.6-1424.5,11.2z M-1409.2,8.2c0-0.7-0.6-1.3-1.3-1.3h-12c-0.7,0-1.3,0.6-1.3,1.3H-1409.2z M-1411.2,5.5
+			V5.2c0-0.7-0.6-1.3-1.3-1.3h-8c-0.7,0-1.3,0.6-1.3,1.3v0.3H-1411.2z M-1416.5,16.6l-2.1,2.1l-1.4-1.4l2.1-2.1l-2.1-2.1l1.4-1.4
+			l2.1,2.1l2.1-2.1l1.4,1.4l-2.1,2.1l2.1,2.1l-1.4,1.4L-1416.5,16.6z"/>
+	</g>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/close.svg

@@ -0,0 +1,16 @@
+<svg id="关闭" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <path id="路径_15753" data-name="路径 15753" class="cls-1" d="M15.5,3H4.5A1.47,1.47,0,0,0,3,4.5v11A1.47,1.47,0,0,0,4.5,17h11A1.46,1.46,0,0,0,17,15.5V4.5A1.47,1.47,0,0,0,15.5,3ZM15,15H5V5H15Z"/>
+  <path id="路径_15754" data-name="路径 15754" class="cls-1" d="M7.71,13.71,10,11.41l2.29,2.3,1.42-1.42L11.41,10l2.3-2.29L12.29,6.29,10,8.59,7.71,6.29,6.29,7.71,8.59,10l-2.3,2.29Z"/>
+  <rect id="矩形_6773" data-name="矩形 6773" class="cls-2" width="20" height="20"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/close_hover.svg

@@ -0,0 +1,16 @@
+<svg id="关闭" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #428AE3;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <path id="路径_15753" data-name="路径 15753" class="cls-1" d="M15.5,3H4.5A1.47,1.47,0,0,0,3,4.5v11A1.47,1.47,0,0,0,4.5,17h11A1.46,1.46,0,0,0,17,15.5V4.5A1.47,1.47,0,0,0,15.5,3ZM15,15H5V5H15Z"/>
+  <path id="路径_15754" data-name="路径 15754" class="cls-1" d="M7.71,13.71,10,11.41l2.29,2.3,1.42-1.42L11.41,10l2.3-2.29L12.29,6.29,10,8.59,7.71,6.29,6.29,7.71,8.59,10l-2.3,2.29Z"/>
+  <rect id="矩形_6773" data-name="矩形 6773" class="cls-2" width="20" height="20"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/draw-triangle_off.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path id="路径_18919" class="st0" d="M10.9,16l0.5-0.5l0,0c-0.8-0.6-1.3-1.4-1.7-2.3l0-0.1l0-0.1c0.7-2,2.6-3.3,4.8-3.3
+	c0.6,0,1.1,0.1,1.6,0.3L16.9,9l1.1,1l-6,7L10.9,16z M11.1,13.1c0.3,0.5,0.7,1,1.1,1.4l0.6-0.7l0,0c-0.1-0.2-0.1-0.5-0.1-0.7
+	c0-1,0.8-1.8,1.8-1.8c0,0,0,0,0,0c0.1,0,0.3,0,0.4,0l-0.3,0.3l0.6-0.8l-0.2,0.2c-0.2,0-0.4-0.1-0.6-0.1C13.1,11,11.8,11.8,11.1,13.1
+	L11.1,13.1z M14.1,16.5l1.3-1.4c1.1-0.2,2-1,2.5-2c-0.1-0.2-0.2-0.4-0.3-0.6l0.9-1c0.4,0.4,0.7,0.9,0.9,1.5l0,0.1l0,0.1
+	c-0.4,1-1.1,1.9-2,2.5c-0.8,0.5-1.8,0.8-2.8,0.8C14.4,16.5,14.2,16.5,14.1,16.5L14.1,16.5z M3.5,16C2.7,16,2,15.3,2,14.5v-10
+	C2,3.7,2.7,3,3.5,3h13C17.3,3,18,3.7,18,4.5V8h-2V5H4v9h4v2H3.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/draw-triangle_off_hover.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#428AE3;}
+</style>
+<path id="路径_18919" class="st0" d="M10.9,16l0.5-0.5l0,0c-0.8-0.6-1.3-1.4-1.7-2.3l0-0.1l0-0.1c0.7-2,2.6-3.3,4.8-3.3
+	c0.6,0,1.1,0.1,1.6,0.3L16.9,9l1.1,1l-6,7L10.9,16z M11.1,13.1c0.3,0.5,0.7,1,1.1,1.4l0.6-0.7l0,0c-0.1-0.2-0.1-0.5-0.1-0.7
+	c0-1,0.8-1.8,1.8-1.8c0,0,0,0,0,0c0.1,0,0.3,0,0.4,0l-0.3,0.3l0.6-0.8l-0.2,0.2c-0.2,0-0.4-0.1-0.6-0.1C13.1,11,11.8,11.8,11.1,13.1
+	L11.1,13.1z M14.1,16.5l1.3-1.4c1.1-0.2,2-1,2.5-2c-0.1-0.2-0.2-0.4-0.3-0.6l0.9-1c0.4,0.4,0.7,0.9,0.9,1.5l0,0.1l0,0.1
+	c-0.4,1-1.1,1.9-2,2.5c-0.8,0.5-1.8,0.8-2.8,0.8C14.4,16.5,14.2,16.5,14.1,16.5L14.1,16.5z M3.5,16C2.7,16,2,15.3,2,14.5v-10
+	C2,3.7,2.7,3,3.5,3h13C17.3,3,18,3.7,18,4.5V8h-2V5H4v9h4v2H3.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/draw-triangle_on.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path id="路径_18918" class="st0" d="M11.7,15.7c-0.9-0.6-1.6-1.5-2-2.5l0-0.1l0-0.1c0.7-2,2.6-3.3,4.8-3.3c1,0,2,0.3,2.8,0.8
+	c0.9,0.6,1.6,1.5,2,2.5l0,0.1l0,0.1c-0.4,1-1.1,1.9-2,2.5c-0.8,0.5-1.8,0.8-2.8,0.8C13.5,16.5,12.5,16.2,11.7,15.7z M11.1,13.1
+	c0.6,1.3,1.9,2.1,3.4,2c1.4,0,2.7-0.8,3.4-2.1c-0.6-1.3-1.9-2.1-3.4-2C13.1,11,11.8,11.8,11.1,13.1L11.1,13.1z M3.5,16
+	C2.7,16,2,15.3,2,14.5v-10C2,3.7,2.7,3,3.5,3h13C17.3,3,18,3.7,18,4.5V8h-2V5H4v9h4v2H3.5z M12.7,13.1c0-1,0.8-1.8,1.8-1.8
+	c0,0,0,0,0,0c1,0,1.8,0.8,1.8,1.8c0,0,0,0,0,0c0,1-0.8,1.8-1.8,1.8c0,0,0,0,0,0C13.5,14.9,12.7,14.1,12.7,13.1
+	C12.7,13.1,12.7,13.1,12.7,13.1L12.7,13.1z M14,13.1c0,0.2,0.2,0.4,0.5,0.4c0.2,0,0.4-0.2,0.4-0.4c0-0.2-0.2-0.4-0.4-0.5
+	C14.3,12.7,14.1,12.9,14,13.1L14,13.1z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/draw-triangle_on_hover.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#428AE3;}
+</style>
+<path id="路径_18918" class="st0" d="M11.7,15.7c-0.9-0.6-1.6-1.5-2-2.5l0-0.1l0-0.1c0.7-2,2.6-3.3,4.8-3.3c1,0,2,0.3,2.8,0.8
+	c0.9,0.6,1.6,1.5,2,2.5l0,0.1l0,0.1c-0.4,1-1.1,1.9-2,2.5c-0.8,0.5-1.8,0.8-2.8,0.8C13.5,16.5,12.5,16.2,11.7,15.7z M11.1,13.1
+	c0.6,1.3,1.9,2.1,3.4,2c1.4,0,2.7-0.8,3.4-2.1c-0.6-1.3-1.9-2.1-3.4-2C13.1,11,11.8,11.8,11.1,13.1L11.1,13.1z M3.5,16
+	C2.7,16,2,15.3,2,14.5v-10C2,3.7,2.7,3,3.5,3h13C17.3,3,18,3.7,18,4.5V8h-2V5H4v9h4v2H3.5z M12.7,13.1c0-1,0.8-1.8,1.8-1.8
+	c0,0,0,0,0,0c1,0,1.8,0.8,1.8,1.8c0,0,0,0,0,0c0,1-0.8,1.8-1.8,1.8c0,0,0,0,0,0C13.5,14.9,12.7,14.1,12.7,13.1
+	C12.7,13.1,12.7,13.1,12.7,13.1L12.7,13.1z M14,13.1c0,0.2,0.2,0.4,0.5,0.4c0.2,0,0.4-0.2,0.4-0.4c0-0.2-0.2-0.4-0.4-0.5
+	C14.3,12.7,14.1,12.9,14,13.1L14,13.1z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/fullscreen-hover.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<g id="组_10250" transform="translate(2120 -6283)">
+	<path id="联合_381" class="st0" d="M-2118,6302c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+		H-2118z M-2118,6287v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2117.6,6286-2118,6286.4-2118,6287z
+		 M-2116.2,6298.2v-8l8,8H-2116.2z M-2112.2,6288.2h8v8L-2112.2,6288.2z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/fullscreen.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<g id="组_10250" transform="translate(2120 -6283)">
+	<path id="联合_381" class="st0" d="M-2118,6302c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+		H-2118z M-2118,6287v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2117.6,6286-2118,6286.4-2118,6287z
+		 M-2116.2,6298.2v-8l8,8H-2116.2z M-2112.2,6288.2h8v8L-2112.2,6288.2z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/more.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="组_11840" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+	<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	</style>
+<g>
+	<circle class="st0" cx="4" cy="10" r="2"/>
+	<circle class="st0" cx="10" cy="10" r="2"/>
+	<circle class="st0" cx="16" cy="10" r="2"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/ptz-icon2.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="联合_355" class="st0" d="M15.6,17.1l-2.5-2.5c-1.2,0.9-2.7,1.4-4.2,1.4c-3.9,0-7-3.1-7-7c0-3.9,3.1-7,7-7
+	c3.9,0,7,3.1,7,7c0,1.5-0.5,3-1.4,4.2l2.5,2.5c0.4,0.4,0.4,1,0,1.4c-0.2,0.2-0.4,0.3-0.7,0.3C16.1,17.4,15.8,17.3,15.6,17.1z M3.9,9
+	c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5c0-2.8-2.2-5-5-5C6.2,4,3.9,6.2,3.9,9L3.9,9z M8.2,10.5V10H7.7c-0.6,0-1-0.4-1-1s0.4-1,1-1h0.5V7.5
+	c0-0.6,0.4-1,1-1s1,0.4,1,1V8h0.5c0.6,0,1,0.4,1,1s-0.4,1-1,1h-0.5v0.5c0,0.6-0.4,1-1,1C8.6,11.5,8.2,11.1,8.2,10.5
+	C8.2,10.5,8.2,10.5,8.2,10.5L8.2,10.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/ptz-icon3.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="联合_357" class="st0" d="M15,17h-3v-2h3v-3h2v5H15z M3,17v-5h2v3h3v2H3z M9,10c0-0.6,0.4-1,1-1s1,0.4,1,1s-0.4,1-1,1
+	C9.5,11,9,10.6,9,10C9,10,9,10,9,10L9,10z M15,8V5h-3V3h5v5H15z M3,8V3h5v2H5v3H3z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/ptz-icon4.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="_4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="联合_357" class="st0" d="M15,17h-3v-2h3v-3h2v5H15z M3,17v-5h2v3h3v2H3z M8,10c0-1.1,0.9-2,2-2s2,0.9,2,2s-0.9,2-2,2
+	C8.9,12,8,11.1,8,10C8,10,8,10,8,10L8,10z M15,8V5h-3V3h5v5H15z M3,8V3h5v2H5v3H3z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/ptz-icon5.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="联合_358" class="st0" d="M5.2,15.1l2.6-4.6l3.7,6.3C11,16.9,10.5,17,10,17C8.2,17,6.5,16.3,5.2,15.1z M9.9,12.5h6.7
+	c-0.8,1.9-2.3,3.4-4.3,4.1L9.9,12.5z M3,10c0-0.6,0.1-1.3,0.3-1.9h5.1l-3.7,6.4C3.6,13.2,3,11.6,3,10L3,10z M11.7,11.8l3.6-6.3
+	C16.4,6.8,17,8.3,17,10c0,0.6-0.1,1.2-0.2,1.8H11.7z M11.3,7.8l-0.2-0.3l-0.1-0.1L8.7,3.1C9.1,3,9.5,3,10,3c1.8,0,3.5,0.7,4.8,1.9
+	l-2.6,4.4L11.3,7.8z M3.5,7.4c0.8-1.9,2.4-3.4,4.4-4l2.3,4H3.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/ptz-icon6.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<path id="减去_260" class="st0" d="M10,17c-1.8,0-3.5-0.7-4.8-1.9l1.3-2.3c0.9,1.1,2.2,1.7,3.5,1.7h0.1l1.4,2.3
+	C11,16.9,10.5,17,10,17z M12.2,16.6L12.2,16.6L11,14.4c1.1-0.2,2.2-0.9,2.8-1.9h2.8C15.8,14.5,14.2,16,12.2,16.6L12.2,16.6z
+	 M4.6,14.5L4.6,14.5C3.6,13.2,3,11.6,3,10c0-0.6,0.1-1.3,0.3-1.9h2.7C5.7,8.7,5.5,9.4,5.5,10c0,0.7,0.2,1.4,0.5,2.1L4.6,14.5
+	L4.6,14.5z M16.8,11.7h-2.6c0.2-0.6,0.4-1.1,0.4-1.8c0-0.8-0.2-1.5-0.5-2.1l1.4-2.4C16.4,6.8,17,8.3,17,10
+	C17,10.6,16.9,11.2,16.8,11.7L16.8,11.7z M6.4,7.4H3.5c0.8-1.9,2.4-3.4,4.4-4l1.3,2.3C8.1,5.8,7,6.4,6.4,7.4L6.4,7.4z M13.5,7.1
+	L13.5,7.1c-0.9-1-2.1-1.6-3.5-1.6L8.7,3.1C9.1,3,9.5,3,10,3c1.8,0,3.5,0.7,4.8,1.9L13.5,7.1L13.5,7.1z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/ptz-select-hover.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path id="select" d="M16,19.2l-3.2,3.2H11.2V11.2H22.4v1.6L19.2,16,24,20.8,20.8,24Zm-8,0H1a1,1,0,0,1-1-1V1A1,1,0,0,1,1,0H18.2a1,1,0,0,1,1,1V8H16V4.2a1,1,0,0,0-1-1H4.2a1,1,0,0,0-1,1V15a1,1,0,0,0,1,1H8v3.2H8Z" fill="#1c6bd6"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/ptz-select.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path id="select" d="M16,19.2l-3.2,3.2H11.2V11.2H22.4v1.6L19.2,16,24,20.8,20.8,24Zm-8,0H1a1,1,0,0,1-1-1V1A1,1,0,0,1,1,0H18.2a1,1,0,0,1,1,1V8H16V4.2a1,1,0,0,0-1-1H4.2a1,1,0,0,0-1,1V15a1,1,0,0,0,1,1H8v3.2H8Z" fill="#657685"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/record_pause.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
+  <g id="组_10144" data-name="组 10144" transform="translate(-985 -1010)">
+    <path id="减去_293" data-name="减去 293" d="M3484-3803a16.889,16.889,0,0,1-12.021-4.979A16.888,16.888,0,0,1,3467-3820a16.888,16.888,0,0,1,4.979-12.021A16.889,16.889,0,0,1,3484-3837a16.889,16.889,0,0,1,12.021,4.979A16.889,16.889,0,0,1,3501-3820a16.889,16.889,0,0,1-4.979,12.021A16.889,16.889,0,0,1,3484-3803Zm-3-22a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2v-6a2,2,0,0,0-2-2Z" transform="translate(-2482 4847)" fill="#657685"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/refresh-replay.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path id="联合_40" class="st0" d="M2,10c0-1.1,0.2-2.1,0.6-3.1l0,0v0L6.7,11H4.1c0.5,3.3,3.6,5.5,6.9,4.9c1.2-0.2,2.3-0.8,3.2-1.6
+	l1.4,1.4c-3.2,3.1-8.2,3-11.3-0.2C2.8,14.1,2,12.1,2,10z M13,9h2.9C15.4,5.7,12.3,3.5,9,4.1C7.8,4.3,6.6,4.9,5.7,5.8L4.3,4.4
+	c3.1-3.1,8.2-3.2,11.3-0.1C17.1,5.8,18,7.9,18,10c0,1.1-0.2,2.2-0.7,3.2l0,0v0L13,9z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/refresh-replay_hover.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<path id="联合_40" class="st0" d="M2,10c0-1.1,0.2-2.1,0.6-3.1l0,0v0L6.7,11H4.1c0.5,3.3,3.6,5.5,6.9,4.9c1.2-0.2,2.3-0.8,3.2-1.6
+	l1.4,1.4c-3.2,3.1-8.2,3-11.3-0.2C2.8,14.1,2,12.1,2,10z M13,9h2.9C15.4,5.7,12.3,3.5,9,4.1C7.8,4.3,6.6,4.9,5.7,5.8L4.3,4.4
+	c3.1-3.1,8.2-3.2,11.3-0.1C17.1,5.8,18,7.9,18,10c0,1.1-0.2,2.2-0.7,3.2l0,0v0L13,9z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_1.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<path id="联合_377" class="st0" d="M2,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2z M2,4v12
+	c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1H3C2.4,3,2,3.4,2,4z M9.2,14.5V7.4c-0.3,0.2-0.6,0.4-1,0.5
+	C7.9,8.1,7.5,8.2,7.1,8.2V6.6c1-0.3,1.9-0.7,2.8-1.4h1.2v9.3L9.2,14.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_16.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<g id="组_10252" transform="translate(2093 -6317)">
+	<path id="联合_374" class="st0" d="M-2091,6336c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+		H-2091z M-2091,6321v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2090.6,6320-2091,6320.4-2091,6321z
+		 M-2081.6,6330.5c-0.6-0.9-0.9-2-0.8-3.1c-0.1-1.3,0.3-2.6,1.1-3.7c0.7-0.9,1.8-1.5,3-1.4c0.6,0,1.1,0.1,1.6,0.2v1.6
+		c-0.5-0.3-1-0.4-1.5-0.4c-0.7,0-1.3,0.3-1.7,0.8c-0.4,0.6-0.7,1.4-0.6,2.1h0c0.4-0.7,1.2-1,1.9-1c0.7,0,1.4,0.3,1.8,0.8
+		c0.5,0.6,0.7,1.3,0.7,2c0,0.8-0.3,1.7-0.9,2.3c-0.6,0.6-1.4,0.9-2.2,0.9C-2080.2,6331.7-2081.1,6331.3-2081.6,6330.5z
+		 M-2080.2,6327.5c-0.2,0.3-0.4,0.6-0.3,1c0,0.4,0.1,0.8,0.4,1.2c0.2,0.3,0.6,0.5,0.9,0.5c0.4,0,0.7-0.2,0.9-0.5
+		c0.2-0.3,0.3-0.7,0.3-1.1c0-1-0.4-1.5-1.3-1.5C-2079.6,6327.1-2079.9,6327.2-2080.2,6327.5L-2080.2,6327.5z M-2087.3,6331.5v-7.1
+		c-0.3,0.2-0.6,0.4-1,0.5c-0.4,0.1-0.7,0.2-1.1,0.3v-1.6c1-0.3,1.9-0.7,2.8-1.4h1.2v9.3L-2087.3,6331.5z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_16_hover.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<g id="组_10252" transform="translate(2093 -6317)">
+	<path id="联合_374" class="st0" d="M-2091,6336c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+		H-2091z M-2091,6321v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2090.6,6320-2091,6320.4-2091,6321z
+		 M-2081.6,6330.5c-0.6-0.9-0.9-2-0.8-3.1c-0.1-1.3,0.3-2.6,1.1-3.7c0.7-0.9,1.8-1.5,3-1.4c0.6,0,1.1,0.1,1.6,0.2v1.6
+		c-0.5-0.3-1-0.4-1.5-0.4c-0.7,0-1.3,0.3-1.7,0.8c-0.4,0.6-0.7,1.4-0.6,2.1h0c0.4-0.7,1.2-1,1.9-1c0.7,0,1.4,0.3,1.8,0.8
+		c0.5,0.6,0.7,1.3,0.7,2c0,0.8-0.3,1.7-0.9,2.3c-0.6,0.6-1.4,0.9-2.2,0.9C-2080.2,6331.7-2081.1,6331.3-2081.6,6330.5z
+		 M-2080.2,6327.5c-0.2,0.3-0.4,0.6-0.3,1c0,0.4,0.1,0.8,0.4,1.2c0.2,0.3,0.6,0.5,0.9,0.5c0.4,0,0.7-0.2,0.9-0.5
+		c0.2-0.3,0.3-0.7,0.3-1.1c0-1-0.4-1.5-1.3-1.5C-2079.6,6327.1-2079.9,6327.2-2080.2,6327.5L-2080.2,6327.5z M-2087.3,6331.5v-7.1
+		c-0.3,0.2-0.6,0.4-1,0.5c-0.4,0.1-0.7,0.2-1.1,0.3v-1.6c1-0.3,1.9-0.7,2.8-1.4h1.2v9.3L-2087.3,6331.5z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_1_hover.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<path id="联合_377" class="st0" d="M2,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2z M2,4v12
+	c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1H3C2.4,3,2,3.4,2,4z M9.2,14.5V7.4c-0.3,0.2-0.6,0.4-1,0.5
+	C7.9,8.1,7.5,8.2,7.1,8.2V6.6c1-0.3,1.9-0.7,2.8-1.4h1.2v9.3L9.2,14.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_2.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<g id="画板_9">
+	<g id="组_10251" transform="translate(2126 -6317)">
+		<path id="联合_373" class="st0" d="M-2124,6336c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+			H-2124z M-2124,6321v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2123.6,6320-2124,6320.4-2124,6321z
+			 M-2118.9,6331.5v-0.7c0-0.4,0.1-0.9,0.3-1.3c0.2-0.4,0.4-0.8,0.7-1.1c0.4-0.4,0.9-0.8,1.4-1.2c0.5-0.3,0.9-0.7,1.2-1.2
+			c0.2-0.3,0.3-0.7,0.4-1.1c0-0.8-0.4-1.2-1.3-1.2c-0.8,0-1.6,0.4-2.2,0.9v-1.7c0.8-0.5,1.7-0.8,2.7-0.8c0.8,0,1.5,0.2,2.1,0.7
+			c0.5,0.5,0.8,1.2,0.8,1.9c0,0.4-0.1,0.8-0.2,1.2c-0.2,0.4-0.4,0.7-0.7,1c-0.4,0.4-0.9,0.8-1.4,1.2c-0.4,0.3-0.9,0.6-1.2,1
+			c-0.2,0.2-0.3,0.4-0.3,0.6h3.9v1.6L-2118.9,6331.5z"/>
+	</g>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_25.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<g id="组_10253" transform="translate(2057 -6317)">
+	<path id="联合_375" class="st0" d="M-2055,6336c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+		H-2055z M-2055,6321v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2054.6,6320-2055,6320.4-2055,6321z
+		 M-2046.1,6331.3v-1.6c0.6,0.4,1.3,0.6,2,0.6c0.5,0,0.9-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.9-0.6-1.4-1.9-1.4
+		c-0.6,0-1.1,0-1.6,0.1l0.3-5h4.8v1.6h-3.3l-0.1,1.9c0.3,0,0.6,0,0.9,0c0.8,0,1.5,0.2,2.1,0.7c0.5,0.5,0.8,1.2,0.8,2
+		c0,0.8-0.3,1.7-0.9,2.2c-0.7,0.6-1.6,0.9-2.5,0.9C-2044.6,6331.7-2045.4,6331.5-2046.1,6331.3L-2046.1,6331.3z M-2053.9,6331.5
+		v-0.7c0-0.4,0.1-0.9,0.3-1.3c0.2-0.4,0.4-0.8,0.7-1.1c0.4-0.4,0.9-0.8,1.4-1.2c0.5-0.3,0.9-0.7,1.2-1.2c0.2-0.3,0.4-0.7,0.4-1.1
+		c0-0.8-0.4-1.2-1.3-1.2c-0.8,0-1.6,0.4-2.2,0.9v-1.7c0.8-0.5,1.7-0.8,2.7-0.8c0.8,0,1.5,0.2,2.1,0.7c0.5,0.5,0.8,1.2,0.8,1.9
+		c0,0.4-0.1,0.8-0.2,1.2c-0.2,0.4-0.4,0.7-0.7,1c-0.4,0.4-0.9,0.8-1.4,1.2c-0.4,0.3-0.9,0.6-1.2,1c-0.2,0.2-0.3,0.4-0.3,0.6h3.8v1.6
+		L-2053.9,6331.5z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_25_hover.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<g id="组_10253" transform="translate(2057 -6317)">
+	<path id="联合_375" class="st0" d="M-2055,6336c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+		H-2055z M-2055,6321v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2054.6,6320-2055,6320.4-2055,6321z
+		 M-2046.1,6331.3v-1.6c0.6,0.4,1.3,0.6,2,0.6c0.5,0,0.9-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.9-0.6-1.4-1.9-1.4
+		c-0.6,0-1.1,0-1.6,0.1l0.3-5h4.8v1.6h-3.3l-0.1,1.9c0.3,0,0.6,0,0.9,0c0.8,0,1.5,0.2,2.1,0.7c0.5,0.5,0.8,1.2,0.8,2
+		c0,0.8-0.3,1.7-0.9,2.2c-0.7,0.6-1.6,0.9-2.5,0.9C-2044.6,6331.7-2045.4,6331.5-2046.1,6331.3L-2046.1,6331.3z M-2053.9,6331.5
+		v-0.7c0-0.4,0.1-0.9,0.3-1.3c0.2-0.4,0.4-0.8,0.7-1.1c0.4-0.4,0.9-0.8,1.4-1.2c0.5-0.3,0.9-0.7,1.2-1.2c0.2-0.3,0.4-0.7,0.4-1.1
+		c0-0.8-0.4-1.2-1.3-1.2c-0.8,0-1.6,0.4-2.2,0.9v-1.7c0.8-0.5,1.7-0.8,2.7-0.8c0.8,0,1.5,0.2,2.1,0.7c0.5,0.5,0.8,1.2,0.8,1.9
+		c0,0.4-0.1,0.8-0.2,1.2c-0.2,0.4-0.4,0.7-0.7,1c-0.4,0.4-0.9,0.8-1.4,1.2c-0.4,0.3-0.9,0.6-1.2,1c-0.2,0.2-0.3,0.4-0.3,0.6h3.8v1.6
+		L-2053.9,6331.5z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_2_hover.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<g id="画板_9">
+	<g id="组_10251" transform="translate(2126 -6317)">
+		<path id="联合_373" class="st0" d="M-2124,6336c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+			H-2124z M-2124,6321v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2123.6,6320-2124,6320.4-2124,6321z
+			 M-2118.9,6331.5v-0.7c0-0.4,0.1-0.9,0.3-1.3c0.2-0.4,0.4-0.8,0.7-1.1c0.4-0.4,0.9-0.8,1.4-1.2c0.5-0.3,0.9-0.7,1.2-1.2
+			c0.2-0.3,0.3-0.7,0.4-1.1c0-0.8-0.4-1.2-1.3-1.2c-0.8,0-1.6,0.4-2.2,0.9v-1.7c0.8-0.5,1.7-0.8,2.7-0.8c0.8,0,1.5,0.2,2.1,0.7
+			c0.5,0.5,0.8,1.2,0.8,1.9c0,0.4-0.1,0.8-0.2,1.2c-0.2,0.4-0.4,0.7-0.7,1c-0.4,0.4-0.9,0.8-1.4,1.2c-0.4,0.3-0.9,0.6-1.2,1
+			c-0.2,0.2-0.3,0.4-0.3,0.6h3.9v1.6L-2118.9,6331.5z"/>
+	</g>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_3.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 21 20" style="enable-background:new 0 0 21 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<path id="联合_889" class="st0" d="M2.5,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2.5z
+	 M2.5,4v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1h-14C2.9,3,2.5,3.4,2.5,4z M11.5,16c-0.3,0-0.5-0.2-0.5-0.5V11
+	c0-0.3,0.2-0.5,0.5-0.5H17c0.3,0,0.5,0.2,0.5,0.5v4.5c0,0.3-0.2,0.5-0.5,0.5H11.5z M4,16c-0.3,0-0.5-0.2-0.5-0.5v-11
+	C3.5,4.2,3.7,4,4,4h5.5C9.8,4,10,4.2,10,4.5v11c0,0.3-0.2,0.5-0.5,0.5H4z M11.5,9.5C11.2,9.5,11,9.3,11,9V4.5C11,4.2,11.2,4,11.5,4
+	H17c0.3,0,0.5,0.2,0.5,0.5V9c0,0.3-0.2,0.5-0.5,0.5H11.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_3_hover.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 21 20" style="enable-background:new 0 0 21 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<path id="联合_889" class="st0" d="M2.5,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2.5z
+	 M2.5,4v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1h-14C2.9,3,2.5,3.4,2.5,4z M11.5,16c-0.3,0-0.5-0.2-0.5-0.5V11
+	c0-0.3,0.2-0.5,0.5-0.5H17c0.3,0,0.5,0.2,0.5,0.5v4.5c0,0.3-0.2,0.5-0.5,0.5H11.5z M4,16c-0.3,0-0.5-0.2-0.5-0.5v-11
+	C3.5,4.2,3.7,4,4,4h5.5C9.8,4,10,4.2,10,4.5v11c0,0.3-0.2,0.5-0.5,0.5H4z M11.5,9.5C11.2,9.5,11,9.3,11,9V4.5C11,4.2,11.2,4,11.5,4
+	H17c0.3,0,0.5,0.2,0.5,0.5V9c0,0.3-0.2,0.5-0.5,0.5H11.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_4.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<path id="联合_379" class="st0" d="M2,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2z M2,4v12
+	c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1H3C2.4,3,2,3.4,2,4z M10.2,14.5v-1.9H6.2v-1.4c0.8-0.9,1.6-1.9,2.4-3
+	c0.6-0.9,1.2-1.8,1.7-2.8H12v5.8h1.3v1.4H12v1.9H10.2z M9.4,9.1c-0.3,0.5-0.9,1.2-1.6,2.1h2.4V7.9C10,8.3,9.7,8.7,9.4,9.1L9.4,9.1z"
+	/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_4_hover.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<path id="联合_379" class="st0" d="M2,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2z M2,4v12
+	c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1H3C2.4,3,2,3.4,2,4z M10.2,14.5v-1.9H6.2v-1.4c0.8-0.9,1.6-1.9,2.4-3
+	c0.6-0.9,1.2-1.8,1.7-2.8H12v5.8h1.3v1.4H12v1.9H10.2z M9.4,9.1c-0.3,0.5-0.9,1.2-1.6,2.1h2.4V7.9C10,8.3,9.7,8.7,9.4,9.1L9.4,9.1z"
+	/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_6.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 21 20" style="enable-background:new 0 0 21 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<path id="联合_891" class="st0" d="M2.5,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2.5z
+	 M2.5,4v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1h-14C2.9,3,2.5,3.4,2.5,4z M14.5,15.8c-0.3,0-0.5-0.2-0.5-0.5V13
+	c0-0.3,0.2-0.5,0.5-0.5H17c0.3,0,0.5,0.2,0.5,0.5v2.3c0,0.3-0.2,0.5-0.5,0.5H14.5z M9.3,15.8c-0.3,0-0.5-0.2-0.5-0.5V13
+	c0-0.3,0.2-0.5,0.5-0.5h3.2c0.3,0,0.5,0.2,0.5,0.5v2.3c0,0.3-0.2,0.5-0.5,0.5H9.3z M4,15.8c-0.3,0-0.5-0.2-0.5-0.5V13
+	c0-0.3,0.2-0.5,0.5-0.5h3.2c0.3,0,0.5,0.2,0.5,0.5v2.3c0,0.3-0.2,0.5-0.5,0.5H4z M14.5,11.7c-0.3,0-0.5-0.2-0.5-0.5V8.9
+	c0-0.3,0.2-0.5,0.5-0.5H17c0.3,0,0.5,0.2,0.5,0.5v2.3c0,0.3-0.2,0.5-0.5,0.5L14.5,11.7z M4,11.7c-0.3,0-0.5-0.2-0.5-0.5V4.7
+	c0-0.3,0.2-0.5,0.5-0.5h8.5c0.3,0,0.5,0.2,0.5,0.5v6.5c0,0.3-0.2,0.5-0.5,0.5L4,11.7z M14.5,7.7c-0.3,0-0.5-0.2-0.5-0.5V4.7
+	c0-0.3,0.2-0.5,0.5-0.5H17c0.3,0,0.5,0.2,0.5,0.5v2.5c0,0.3-0.2,0.5-0.5,0.5H14.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_6_hover.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 21 20" style="enable-background:new 0 0 21 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<path id="联合_891" class="st0" d="M2.5,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2.5z
+	 M2.5,4v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1h-14C2.9,3,2.5,3.4,2.5,4z M14.5,15.8c-0.3,0-0.5-0.2-0.5-0.5V13
+	c0-0.3,0.2-0.5,0.5-0.5H17c0.3,0,0.5,0.2,0.5,0.5v2.3c0,0.3-0.2,0.5-0.5,0.5H14.5z M9.3,15.8c-0.3,0-0.5-0.2-0.5-0.5V13
+	c0-0.3,0.2-0.5,0.5-0.5h3.2c0.3,0,0.5,0.2,0.5,0.5v2.3c0,0.3-0.2,0.5-0.5,0.5H9.3z M4,15.8c-0.3,0-0.5-0.2-0.5-0.5V13
+	c0-0.3,0.2-0.5,0.5-0.5h3.2c0.3,0,0.5,0.2,0.5,0.5v2.3c0,0.3-0.2,0.5-0.5,0.5H4z M14.5,11.7c-0.3,0-0.5-0.2-0.5-0.5V8.9
+	c0-0.3,0.2-0.5,0.5-0.5H17c0.3,0,0.5,0.2,0.5,0.5v2.3c0,0.3-0.2,0.5-0.5,0.5L14.5,11.7z M4,11.7c-0.3,0-0.5-0.2-0.5-0.5V4.7
+	c0-0.3,0.2-0.5,0.5-0.5h8.5c0.3,0,0.5,0.2,0.5,0.5v6.5c0,0.3-0.2,0.5-0.5,0.5L4,11.7z M14.5,7.7c-0.3,0-0.5-0.2-0.5-0.5V4.7
+	c0-0.3,0.2-0.5,0.5-0.5H17c0.3,0,0.5,0.2,0.5,0.5v2.5c0,0.3-0.2,0.5-0.5,0.5H14.5z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_8.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 21 20" style="enable-background:new 0 0 21 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<path id="联合_895" class="st0" d="M2.5,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2.5z
+	 M2.5,4v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1h-14C2.9,3,2.5,3.4,2.5,4z M14.9,16c-0.3,0-0.5-0.2-0.5-0.5v-1.5
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L14.9,16z M11.2,16c-0.3,0-0.5-0.2-0.5-0.5v-1.5
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L11.2,16z M7.4,16c-0.3,0-0.5-0.2-0.5-0.5v-1.5
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L7.4,16z M4,16c-0.3,0-0.5-0.2-0.5-0.5v-1.5
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L4,16z M14.9,12.8c-0.3,0-0.5-0.2-0.5-0.5v-1.5
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L14.9,12.8z M4,12.8c-0.3,0-0.5-0.2-0.5-0.5V4.7
+	c0-0.3,0.2-0.5,0.5-0.5h8.7c0.3,0,0.5,0.2,0.5,0.5v7.6c0,0.3-0.2,0.5-0.5,0.5L4,12.8z M14.9,9.7c-0.3,0-0.5-0.2-0.5-0.5V7.7
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5H14.9z M14.9,6.7c-0.3,0-0.5-0.2-0.5-0.5V4.7
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L14.9,6.7z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_8_hover.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 21 20" style="enable-background:new 0 0 21 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<path id="联合_895" class="st0" d="M2.5,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2.5z
+	 M2.5,4v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1h-14C2.9,3,2.5,3.4,2.5,4z M14.9,16c-0.3,0-0.5-0.2-0.5-0.5v-1.5
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L14.9,16z M11.2,16c-0.3,0-0.5-0.2-0.5-0.5v-1.5
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L11.2,16z M7.4,16c-0.3,0-0.5-0.2-0.5-0.5v-1.5
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L7.4,16z M4,16c-0.3,0-0.5-0.2-0.5-0.5v-1.5
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L4,16z M14.9,12.8c-0.3,0-0.5-0.2-0.5-0.5v-1.5
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L14.9,12.8z M4,12.8c-0.3,0-0.5-0.2-0.5-0.5V4.7
+	c0-0.3,0.2-0.5,0.5-0.5h8.7c0.3,0,0.5,0.2,0.5,0.5v7.6c0,0.3-0.2,0.5-0.5,0.5L4,12.8z M14.9,9.7c-0.3,0-0.5-0.2-0.5-0.5V7.7
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5H14.9z M14.9,6.7c-0.3,0-0.5-0.2-0.5-0.5V4.7
+	c0-0.3,0.2-0.5,0.5-0.5h1.9c0.3,0,0.5,0.2,0.5,0.5v1.5c0,0.3-0.2,0.5-0.5,0.5L14.9,6.7z"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_9.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<g id="组_10251" transform="translate(2126 -6317)">
+	<path id="联合_373" class="st0" d="M-2124,6336c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+		H-2124z M-2124,6321v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2123.6,6320-2124,6320.4-2124,6321z
+		 M-2118.5,6331.3v-1.6c0.5,0.3,1.1,0.5,1.7,0.5c1.5,0,2.2-1,2.2-2.9l0,0c-0.4,0.6-1.1,1-1.8,0.9c-0.7,0-1.4-0.3-1.9-0.8
+		c-0.5-0.5-0.8-1.3-0.7-2c0-0.9,0.3-1.7,0.9-2.3c0.6-0.6,1.4-0.9,2.3-0.9c0.9,0,1.8,0.4,2.3,1.1c0.6,0.9,0.9,2,0.8,3.1
+		c0.1,1.3-0.3,2.6-1,3.8c-0.7,0.9-1.8,1.4-2.9,1.4C-2117.2,6331.7-2117.9,6331.6-2118.5,6331.3z M-2116.8,6324.2
+		c-0.2,0.3-0.4,0.7-0.3,1.1c0,0.4,0.1,0.8,0.3,1.1c0.2,0.3,0.6,0.4,1,0.4c0.3,0,0.7-0.1,0.9-0.4c0.2-0.3,0.4-0.6,0.3-1
+		c0-0.4-0.1-0.9-0.3-1.2c-0.2-0.3-0.6-0.5-0.9-0.5C-2116.2,6323.7-2116.6,6323.9-2116.8,6324.2L-2116.8,6324.2z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_9_hover.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<g id="组_10251" transform="translate(2126 -6317)">
+	<path id="联合_373" class="st0" d="M-2124,6336c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+		H-2124z M-2124,6321v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2123.6,6320-2124,6320.4-2124,6321z
+		 M-2118.5,6331.3v-1.6c0.5,0.3,1.1,0.5,1.7,0.5c1.5,0,2.2-1,2.2-2.9l0,0c-0.4,0.6-1.1,1-1.8,0.9c-0.7,0-1.4-0.3-1.9-0.8
+		c-0.5-0.5-0.8-1.3-0.7-2c0-0.9,0.3-1.7,0.9-2.3c0.6-0.6,1.4-0.9,2.3-0.9c0.9,0,1.8,0.4,2.3,1.1c0.6,0.9,0.9,2,0.8,3.1
+		c0.1,1.3-0.3,2.6-1,3.8c-0.7,0.9-1.8,1.4-2.9,1.4C-2117.2,6331.7-2117.9,6331.6-2118.5,6331.3z M-2116.8,6324.2
+		c-0.2,0.3-0.4,0.7-0.3,1.1c0,0.4,0.1,0.8,0.3,1.1c0.2,0.3,0.6,0.4,1,0.4c0.3,0,0.7-0.1,0.9-0.4c0.2-0.3,0.4-0.6,0.3-1
+		c0-0.4-0.1-0.9-0.3-1.2c-0.2-0.3-0.6-0.5-0.9-0.5C-2116.2,6323.7-2116.6,6323.9-2116.8,6324.2L-2116.8,6324.2z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_custom_division.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20">
+  <g id="组_11891" data-name="组 11891" transform="translate(-1788.5 -999)">
+    <g id="组_11890" data-name="组 11890" transform="translate(1789 999)">
+      <path id="路径_18303" data-name="路径 18303" d="M6.25,14H8.62a1.5,1.5,0,0,0,1.06-.44L15.55,7.7A1.52,1.52,0,0,0,16,6.64a1.48,1.48,0,0,0-.44-1.06L13.42,3.45a1.51,1.51,0,0,0-2.12,0L5.44,9.32A1.5,1.5,0,0,0,5,10.38v2.37A1.25,1.25,0,0,0,6.25,14Z" transform="translate(-0.5 1.492)" fill="#b2bac2"/>
+      <rect id="矩形_12158" data-name="矩形 12158" width="20" height="20" fill="none"/>
+    </g>
+    <path id="联合_874" data-name="联合 874" d="M3806-5175h-16a2,2,0,0,1-2-2v-14a2,2,0,0,1,2-2h16a2,2,0,0,1,2,2v14A2,2,0,0,1,3806-5175Zm-15-16a1,1,0,0,0-1,1v12a1,1,0,0,0,1,1h14a1,1,0,0,0,1-1v-12a1,1,0,0,0-1-1Z" transform="translate(-1999 6193)" fill="#b2bac2" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_custom_division_hover.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g id="组_11891" data-name="组 11891" transform="translate(-1789 -999)">
+    <g id="组_11890" data-name="组 11890" transform="translate(1789 999)">
+      <path id="路径_18303" data-name="路径 18303" d="M6.25,14H8.62a1.5,1.5,0,0,0,1.06-.44L15.55,7.7A1.52,1.52,0,0,0,16,6.64a1.48,1.48,0,0,0-.44-1.06L13.42,3.45a1.51,1.51,0,0,0-2.12,0L5.44,9.32A1.5,1.5,0,0,0,5,10.38v2.37A1.25,1.25,0,0,0,6.25,14Z" transform="translate(-0.5 1.492)" fill="#1c6bd6"/>
+      <rect id="矩形_12158" data-name="矩形 12158" width="20" height="20" fill="none"/>
+    </g>
+    <path id="联合_874" data-name="联合 874" d="M3806-5175h-16a2,2,0,0,1-2-2v-14a2,2,0,0,1,2-2h16a2,2,0,0,1,2,2v14A2,2,0,0,1,3806-5175Zm-15-16a1,1,0,0,0-1,1v12a1,1,0,0,0,1,1h14a1,1,0,0,0,1-1v-12a1,1,0,0,0-1-1Z" transform="translate(-1999 6193)" fill="#1c6bd6"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_custom_division_merge.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20.001" viewBox="0 0 20 20.001">
+  <path id="减去_487" data-name="减去 487" d="M6893-8119h-18a1,1,0,0,1-1-1v-18a1,1,0,0,1,1-1h18a1,1,0,0,1,1,1v18A1,1,0,0,1,6893-8119Zm-9-8.585h0l3.536,3.535,1.414-1.416-3.536-3.536,3.536-3.534-1.414-1.414-3.536,3.534-3.536-3.536-1.414,1.416,3.536,3.536-3.536,3.536,1.414,1.414,3.535-3.535Z" transform="translate(-6874 8139)" fill="#c5cdd6"/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_custom_division_split.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
+  <g id="组_11896" data-name="组 11896" transform="translate(-704 -302)">
+    <rect id="矩形_12188" data-name="矩形 12188" width="28" height="28" rx="4" transform="translate(732 330) rotate(180)" fill="#1c79f4"/>
+    <path id="联合_882" data-name="联合 882" d="M6876-8121v-6h14v6Zm-2-8v-2h18v2Zm2-4v-6h14v6Z" transform="translate(-7412 -6566.999) rotate(90)" fill="#fff"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/screen_more.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<g id="组_10249" transform="translate(2120 -6283)">
+	<path id="联合_380" class="st0" d="M-2118,6302c-1.1,0-2-0.9-2-2v-14c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2
+		H-2118z M-2118,6287v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-12c0-0.6-0.4-1-1-1h-14C-2117.6,6286-2118,6286.4-2118,6287z
+		 M-2107,6293c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5S-2107,6293.8-2107,6293z M-2111.5,6293
+		c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5S-2111.5,6293.8-2111.5,6293z M-2116,6293c0-0.8,0.7-1.5,1.5-1.5
+		s1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5S-2116,6293.8-2116,6293z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/snapshot.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-4 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke: #fff;
+      }
+
+      .cls-1 {
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        stroke-width: 1.4px;
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+
+      .cls-5 {
+        stroke: none;
+      }
+    </style>
+  </defs>
+  <g id="抓图" transform="translate(-1809 -182)">
+    <path id="联合_359" data-name="联合 359" class="cls-1" d="M-1988-1170a1,1,0,0,1-1-1v-8.154a1,1,0,0,1,1-1h1.8v-.923a.958.958,0,0,1,.989-.922h3.956a.958.958,0,0,1,.989.922v.923H-1976a1,1,0,0,1,1,1V-1171a1,1,0,0,1-1,1Z" transform="translate(3801 1368)"/>
+    <g id="椭圆_1064" data-name="椭圆 1064" class="cls-2" transform="translate(1815 190)">
+      <circle class="cls-5" cx="3" cy="3" r="3"/>
+      <circle class="cls-4" cx="3" cy="3" r="2.3"/>
+    </g>
+    <circle id="椭圆_1065" data-name="椭圆 1065" class="cls-3" cx="0.7" cy="0.7" r="0.7" transform="translate(1822 190)"/>
+    <rect id="矩形_10804" data-name="矩形 10804" class="cls-4" width="20" height="20" transform="translate(1809 182)"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/snapshot_hover.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-4 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke: #428AE3;
+      }
+
+      .cls-1 {
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        stroke-width: 1.4px;
+      }
+
+      .cls-3 {
+        fill: #428AE3;
+      }
+
+      .cls-5 {
+        stroke: none;
+      }
+    </style>
+  </defs>
+  <g id="抓图" transform="translate(-1809 -182)">
+    <path id="联合_359" data-name="联合 359" class="cls-1" d="M-1988-1170a1,1,0,0,1-1-1v-8.154a1,1,0,0,1,1-1h1.8v-.923a.958.958,0,0,1,.989-.922h3.956a.958.958,0,0,1,.989.922v.923H-1976a1,1,0,0,1,1,1V-1171a1,1,0,0,1-1,1Z" transform="translate(3801 1368)"/>
+    <g id="椭圆_1064" data-name="椭圆 1064" class="cls-2" transform="translate(1815 190)">
+      <circle class="cls-5" cx="3" cy="3" r="3"/>
+      <circle class="cls-4" cx="3" cy="3" r="2.3"/>
+    </g>
+    <circle id="椭圆_1065" data-name="椭圆 1065" class="cls-3" cx="0.7" cy="0.7" r="0.7" transform="translate(1822 190)"/>
+    <rect id="矩形_10804" data-name="矩形 10804" class="cls-4" width="20" height="20" transform="translate(1809 182)"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/speed_left.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<g>
+	<path class="st0" d="M10.1,10c0-0.2,0.1-0.3,0.2-0.4l2.3-1.5V6.3c0-0.3-0.2-0.5-0.5-0.5c-0.1,0-0.2,0-0.2,0.1L4.6,9.6
+		C4.4,9.6,4.3,9.8,4.3,10s0.1,0.4,0.3,0.4l7.4,3.7c0.1,0,0.1,0.1,0.2,0.1c0.3,0,0.5-0.2,0.5-0.5v-1.8l-2.3-1.5
+		C10.2,10.3,10.1,10.2,10.1,10z"/>
+	<path class="st0" d="M15.6,8.1c-0.1-0.2-0.4-0.3-0.7-0.2l-3.4,1.7c-0.1,0-0.2,0.1-0.2,0.2c-0.1,0.2,0,0.5,0.2,0.7l3.4,1.7
+		c0.1,0,0.1,0.1,0.2,0.1c0.3,0,0.5-0.2,0.5-0.5V8.3C15.7,8.2,15.7,8.2,15.6,8.1z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/speed_right.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#657685;}
+</style>
+<g>
+	<path class="st0" d="M15.4,9.6L8,5.9C8,5.8,7.9,5.8,7.8,5.8C7.5,5.8,7.3,6,7.3,6.3v1.8l2.3,1.5C9.8,9.7,9.9,9.8,9.9,10
+		c0,0.2-0.1,0.3-0.2,0.4l-2.3,1.5v1.8c0,0.3,0.2,0.5,0.5,0.5c0.1,0,0.2,0,0.2-0.1l7.4-3.7c0.2-0.1,0.3-0.3,0.3-0.4
+		S15.6,9.6,15.4,9.6z"/>
+	<path class="st0" d="M8.6,10.2c0.1-0.2,0-0.5-0.2-0.7L5,7.9C5,7.8,4.9,7.8,4.8,7.8C4.5,7.8,4.3,8,4.3,8.3v3.4c0,0.1,0,0.2,0.1,0.2
+		c0.1,0.2,0.4,0.3,0.7,0.2l3.4-1.7C8.5,10.4,8.6,10.3,8.6,10.2z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/talk-off-hover.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="关闭" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#428AE3;}
+</style>
+<path id="联合_366" class="st0" d="M9,18v-2.1C5.6,15.4,3,12.5,3,9h2c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5h2c0,3.5-2.6,6.4-6,6.9V18H9
+	z M6,9V6c0-2.2,1.8-4,4-4s4,1.8,4,4v3c0,2.2-1.8,4-4,4S6,11.2,6,9z M8,6v3c0,1.1,0.9,2,2,2s2-0.9,2-2V6c0-1.1-0.9-2-2-2S8,4.9,8,6z"
+	/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/talk-off.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="关闭" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path id="联合_366" class="st0" d="M9,18v-2.1C5.6,15.4,3,12.5,3,9h2c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5h2c0,3.5-2.6,6.4-6,6.9V18H9
+	z M6,9V6c0-2.2,1.8-4,4-4s4,1.8,4,4v3c0,2.2-1.8,4-4,4S6,11.2,6,9z M8,6v3c0,1.1,0.9,2,2,2s2-0.9,2-2V6c0-1.1-0.9-2-2-2S8,4.9,8,6z"
+	/>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/talk-on.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g id="组_10230" data-name="组 10230" transform="translate(-69 -316)">
+    <g id="关闭" transform="translate(69 316)">
+      <rect id="矩形_6773" data-name="矩形 6773" width="20" height="20" fill="none"/>
+      <path id="联合_366" data-name="联合 366" d="M-1145-391v-2.071a7.012,7.012,0,0,1-6-6.929h2a5.006,5.006,0,0,0,5,5,5.005,5.005,0,0,0,5-5h2a7.011,7.011,0,0,1-6,6.929V-391Zm-3-9v-3a4,4,0,0,1,4-4,4,4,0,0,1,4,4v3a4,4,0,0,1-4,4A4,4,0,0,1-1148-400Zm2-3v3a2,2,0,0,0,2,2,2,2,0,0,0,2-2v-3a2,2,0,0,0-2-2A2,2,0,0,0-1146-403Z" transform="translate(1154 409)" fill="#428AE3"/>
+    </g>
+    <circle id="椭圆_1066" data-name="椭圆 1066" cx="2" cy="2" r="2" transform="translate(82 318)" fill="#ff3434"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/voice-have.svg

@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.115" height="20" viewBox="0 0 21.115 20">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        fill: none;
+      }
+
+      .cls-1, .cls-4 {
+        stroke: #fff;
+      }
+
+      .cls-1 {
+        stroke-width: 2px;
+      }
+
+      .cls-4 {
+        stroke-linecap: round;
+        stroke-width: 1.4px;
+      }
+
+      .cls-5, .cls-6 {
+        stroke: none;
+      }
+
+      .cls-6 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="声音-有" transform="translate(-1810 -163)">
+    <g id="矩形_6774" data-name="矩形 6774" class="cls-1" transform="translate(1812 168.5)">
+      <rect class="cls-5" width="5" height="9" rx="1"/>
+      <rect class="cls-3" x="1" y="1" width="3" height="7"/>
+    </g>
+    <g id="路径_15755" data-name="路径 15755" class="cls-2" transform="translate(1815 168.5)">
+      <path class="cls-5" d="M1,0,7-3A1,1,0,0,1,8-2V11a1,1,0,0,1-1,1L1,9A1,1,0,0,1,0,8V1A1,1,0,0,1,1,0Z"/>
+      <path class="cls-6" d="M 6 -0.2639350891113281 L 2 1.736064910888672 L 2 7.263935089111328 L 6 9.263935089111328 L 6 -0.2639350891113281 M 7 -3 C 7.552279949188232 -3 8 -2.552280426025391 8 -2 L 8 11 C 8 11.55228042602539 7.552279949188232 12 7 12 L 1 9 C 0.4477200508117676 9 0 8.552289962768555 0 8 L 0 1 C 0 0.4477100372314453 0.4477200508117676 0 1 0 L 7 -3 Z"/>
+    </g>
+    <rect id="矩形_10805" data-name="矩形 10805" class="cls-3" width="20" height="20" transform="translate(1810 163)"/>
+    <path id="路径_18095" data-name="路径 18095" class="cls-4" d="M3943.165,1393.065c-.72,6.668-6.82,4.666-6.82,4.666" transform="translate(-1533.907 2658.859) rotate(-56)"/>
+    <path id="路径_18096" data-name="路径 18096" class="cls-4" d="M3938.805,1393.065a1.807,1.807,0,0,1-2.46,1.774" transform="translate(-1532.972 2657.955) rotate(-56)"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/voice-have_hover.svg

@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.115" height="20" viewBox="0 0 21.115 20">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        fill: none;
+      }
+
+      .cls-1, .cls-4 {
+        stroke: #428AE3;
+      }
+
+      .cls-1 {
+        stroke-width: 2px;
+      }
+
+      .cls-4 {
+        stroke-linecap: round;
+        stroke-width: 1.4px;
+      }
+
+      .cls-5, .cls-6 {
+        stroke: none;
+      }
+
+      .cls-6 {
+        fill: #428AE3;
+      }
+    </style>
+  </defs>
+  <g id="声音-有" transform="translate(-1810 -163)">
+    <g id="矩形_6774" data-name="矩形 6774" class="cls-1" transform="translate(1812 168.5)">
+      <rect class="cls-5" width="5" height="9" rx="1"/>
+      <rect class="cls-3" x="1" y="1" width="3" height="7"/>
+    </g>
+    <g id="路径_15755" data-name="路径 15755" class="cls-2" transform="translate(1815 168.5)">
+      <path class="cls-5" d="M1,0,7-3A1,1,0,0,1,8-2V11a1,1,0,0,1-1,1L1,9A1,1,0,0,1,0,8V1A1,1,0,0,1,1,0Z"/>
+      <path class="cls-6" d="M 6 -0.2639350891113281 L 2 1.736064910888672 L 2 7.263935089111328 L 6 9.263935089111328 L 6 -0.2639350891113281 M 7 -3 C 7.552279949188232 -3 8 -2.552280426025391 8 -2 L 8 11 C 8 11.55228042602539 7.552279949188232 12 7 12 L 1 9 C 0.4477200508117676 9 0 8.552289962768555 0 8 L 0 1 C 0 0.4477100372314453 0.4477200508117676 0 1 0 L 7 -3 Z"/>
+    </g>
+    <rect id="矩形_10805" data-name="矩形 10805" class="cls-3" width="20" height="20" transform="translate(1810 163)"/>
+    <path id="路径_18095" data-name="路径 18095" class="cls-4" d="M3943.165,1393.065c-.72,6.668-6.82,4.666-6.82,4.666" transform="translate(-1533.907 2658.859) rotate(-56)"/>
+    <path id="路径_18096" data-name="路径 18096" class="cls-4" d="M3938.805,1393.065a1.807,1.807,0,0,1-2.46,1.774" transform="translate(-1532.972 2657.955) rotate(-56)"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/voice-null.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-4 {
+        fill: none;
+      }
+
+      .cls-1 {
+        stroke: #fff;
+        stroke-width: 2px;
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+
+      .cls-5, .cls-6 {
+        stroke: none;
+      }
+
+      .cls-6 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="声音-无" transform="translate(-1810 -163)">
+    <g id="矩形_6774" data-name="矩形 6774" class="cls-1" transform="translate(1812 168.5)">
+      <rect class="cls-5" width="5" height="9" rx="1"/>
+      <rect class="cls-4" x="1" y="1" width="3" height="7"/>
+    </g>
+    <g id="路径_15755" data-name="路径 15755" class="cls-2" transform="translate(1815 168.5)">
+      <path class="cls-5" d="M1,0,7-3A1,1,0,0,1,8-2V11a1,1,0,0,1-1,1L1,9A1,1,0,0,1,0,8V1A1,1,0,0,1,1,0Z"/>
+      <path class="cls-6" d="M 6 -0.2639350891113281 L 2 1.736064910888672 L 2 7.263935089111328 L 6 9.263935089111328 L 6 -0.2639350891113281 M 7 -3 C 7.552279949188232 -3 8 -2.552280426025391 8 -2 L 8 11 C 8 11.55228042602539 7.552279949188232 12 7 12 L 1 9 C 0.4477200508117676 9 0 8.552289962768555 0 8 L 0 1 C 0 0.4477100372314453 0.4477200508117676 0 1 0 L 7 -3 Z"/>
+    </g>
+    <path id="联合_297" data-name="联合 297" class="cls-3" d="M-1987.525,3.889l-1.061,1.061L-1990,3.535l1.061-1.061L-1990,1.414-1988.586,0l1.061,1.061L-1986.465,0l1.415,1.414-1.061,1.061,1.061,1.061-1.415,1.415Z" transform="translate(3814.025 170.525)"/>
+    <rect id="矩形_10805" data-name="矩形 10805" class="cls-4" width="20" height="20" transform="translate(1810 163)"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/voice-null_hover.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-4 {
+        fill: none;
+      }
+
+      .cls-1 {
+        stroke: #428AE3;
+        stroke-width: 2px;
+      }
+
+      .cls-3 {
+        fill: #428AE3;
+      }
+
+      .cls-5, .cls-6 {
+        stroke: none;
+      }
+
+      .cls-6 {
+        fill: #428AE3;
+      }
+    </style>
+  </defs>
+  <g id="声音-无" transform="translate(-1810 -163)">
+    <g id="矩形_6774" data-name="矩形 6774" class="cls-1" transform="translate(1812 168.5)">
+      <rect class="cls-5" width="5" height="9" rx="1"/>
+      <rect class="cls-4" x="1" y="1" width="3" height="7"/>
+    </g>
+    <g id="路径_15755" data-name="路径 15755" class="cls-2" transform="translate(1815 168.5)">
+      <path class="cls-5" d="M1,0,7-3A1,1,0,0,1,8-2V11a1,1,0,0,1-1,1L1,9A1,1,0,0,1,0,8V1A1,1,0,0,1,1,0Z"/>
+      <path class="cls-6" d="M 6 -0.2639350891113281 L 2 1.736064910888672 L 2 7.263935089111328 L 6 9.263935089111328 L 6 -0.2639350891113281 M 7 -3 C 7.552279949188232 -3 8 -2.552280426025391 8 -2 L 8 11 C 8 11.55228042602539 7.552279949188232 12 7 12 L 1 9 C 0.4477200508117676 9 0 8.552289962768555 0 8 L 0 1 C 0 0.4477100372314453 0.4477200508117676 0 1 0 L 7 -3 Z"/>
+    </g>
+    <path id="联合_297" data-name="联合 297" class="cls-3" d="M-1987.525,3.889l-1.061,1.061L-1990,3.535l1.061-1.061L-1990,1.414-1988.586,0l1.061,1.061L-1986.465,0l1.415,1.414-1.061,1.061,1.061,1.061-1.415,1.415Z" transform="translate(3814.025 170.525)"/>
+    <rect id="矩形_10805" data-name="矩形 10805" class="cls-4" width="20" height="20" transform="translate(1810 163)"/>
+  </g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/ws-ctrl-ellipsis-hover.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1c6bd6;}
+</style>
+<g id="画板_11">
+	<path id="联合_900" class="st0" d="M2,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2z M2,4v12
+		c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1H3C2.4,3,2,3.4,2,4z M13,10c0-0.8,0.7-1.5,1.5-1.5S16,9.2,16,10
+		s-0.7,1.5-1.5,1.5S13,10.8,13,10z M8.5,10c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5S8.5,10.8,8.5,10z M4,10
+		c0-0.8,0.7-1.5,1.5-1.5S7,9.2,7,10s-0.7,1.5-1.5,1.5S4,10.8,4,10z"/>
+</g>
+</svg>

monitor_ui/public/lib/WSPlayer/icon/ws-ctrl-ellipsis.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B2BAC2;}
+</style>
+<g id="画板_11">
+	<path id="联合_900" class="st0" d="M2,19c-1.1,0-2-0.9-2-2V3c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v14c0,1.1-0.9,2-2,2H2z M2,4v12
+		c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V4c0-0.6-0.4-1-1-1H3C2.4,3,2,3.4,2,4z M13,10c0-0.8,0.7-1.5,1.5-1.5S16,9.2,16,10
+		s-0.7,1.5-1.5,1.5S13,10.8,13,10z M8.5,10c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5S8.5,10.8,8.5,10z M4,10
+		c0-0.8,0.7-1.5,1.5-1.5S7,9.2,7,10s-0.7,1.5-1.5,1.5S4,10.8,4,10z"/>
+</g>
+</svg>