| 1 |
- {"remainingRequest":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\dm\\HHHT-fbky\\hhht_fbky\\src\\components\\HelloWorld.vue?vue&type=style&index=1&id=469af010&scoped=true&lang=css&","dependencies":[{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\src\\components\\HelloWorld.vue","mtime":1740992632782},{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\css-loader\\index.js","mtime":1740991506810},{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1740991518730},{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\postcss-loader\\src\\index.js","mtime":1740991519885},{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1740991511838},{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\vue-loader\\lib\\index.js","mtime":1740991518721}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nh3 {\n margin: 40px 0 0;\n}\nul {\n list-style-type: none;\n padding: 0;\n}\nli {\n display: inline-block;\n margin: 0 10px;\n}\na {\n color: #42b983;\n}\n",{"version":3,"sources":["HelloWorld.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8YA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"HelloWorld.vue","sourceRoot":"src/components","sourcesContent":["<template>\n <!-- <base-drag-dialog\n :options=\"{ title: '防爆扩音广播', show: amplificationVisible }\"\n appendToBody\n :styles=\"{ width: 900, height: 700 }\"\n @handleClose=\"handleClose\"\n > -->\n <div class=\"fbky\">\n <div class=\"top\">\n <span> 呼叫对象：呼和浩特全战场 </span>\n <span id=\"off_status\" class=\"set_status off_status\">离线</span>\n <span id=\"on_status\" class=\"set_status on_status\" hidden=\"\">在线</span>\n </div>\n <div class=\"fbky_manage\">\n <el-button type=\"primary\" @click=\"FbkyConnect\">连接防爆扩音</el-button>\n <el-button type=\"info\" @click=\"FbkyBreak\">断开防爆扩音</el-button>\n <el-button type=\"success\" @click=\"FbkyDial\">呼出通话</el-button>\n <el-button type=\"danger\" @click=\"FbkyHangUp\">挂断通话</el-button>\n <span>注：听到提示音后开始讲话，通话结束后请断开防爆扩音</span>\n </div>\n <div class=\"cameraList\">\n <button\n class=\"datebuttonitem\"\n v-for=\"item in cameraList\"\n :key=\"item.id\"\n @click=\"openCamera(item)\"\n >\n {{ item.name }}\n </button>\n </div>\n <div class=\"main\">\n <CanvasVideo\n class=\"canvas\"\n v-for=\"item in cameraList\"\n :key=\"item.id\"\n :cameraData=\"item\"\n v-show=\"cameraId == item\"\n />\n </div>\n <select class=\"set_slt\" id=\"audioInputDev\" style=\"display: none\">\n <option value=\"\">请选择</option>\n </select>\n <select class=\"set_slt\" id=\"videoInputDev\" style=\"display: none\">\n <option value=\"\">请选择</option>\n </select>\n <select class=\"set_slt\" id=\"audioOutputDev\" style=\"display: none\">\n <option value=\"\">请选择</option>\n </select>\n <!-- <fbky\n :curFbkyData=\"webSocketParams\"\n :ringNumber=\"ringNumber\"\n :callDisable=\"callDisable\"\n /> -->\n </div>\n <!-- </base-drag-dialog> -->\n</template>\n \n <script>\n// import BaseDragDialog from \"@/components/BaseDragDialog/BG_4.vue\";\n// import { mapGetters } from \"vuex\";\n// import { customPageGetList } from \"@/API/znxj\";\n// import CanvasVideo from \"@/components/ImageVideo/CanvasVideo.vue\";\n// import Fbky from \"./Fbky.vue\";\r\nimport { rtcHelper } from '@/assets/js/tr_webrtc.min.js'\nexport default {\n name: \"PipelineAnimate\",\n // components: { BaseDragDialog, Fbky, CanvasVideo },\n computed: {\n // ...mapGetters([\"rtcHelper\", \"amplificationVisible\"]),\n },\n data() {\n return {\n webSocketParams: {\n admin: \"8889\",\n password: \"123456\",\n url: \"wss://172.10.10.61:1443/webrtc\",\n localIp: \"\",\n autoReg: true,\n autoAnswer: false,\n },\n ringNumber: 111,\n callDisable: false,\n openningTile: \"离线\",\n callDisable: false,\n cameraInfo: null,\n mic: \"\", //麦克风选择\n cam: \"\", //摄像头选择\n speak: \"\", //扬声器选择\n callback: {\n onRinging: function (d) {\n // 来电\n this.onRinging(d);\n },\n onCalling: function (d) {\n // 外呼\n this.onCalling(d);\n },\n onAnswer: function (d) {\n // 通话中\n this.onAnswer(d);\n },\n onHangup: function (d) {\n // 挂机\n this.onHangup(d);\n },\n onLogin: function (d) {\n //登录回调\n console.log(\"登录状态在线回调\");\n document\n .getElementById(\"off_status\")\n .setAttribute(\"hidden\", \"hidden\");\n document.getElementById(\"on_status\").removeAttribute(\"hidden\");\n localStorage.setItem(\"fbkyType\", \"在线\");\n // this.upOpenningTile(\"在线\");\n this.openningTile = \"在线\";\n },\n onLogout: function () {\n //登出回调\n console.log(\"登出状态离线回调\");\n document.getElementById(\"on_status\").setAttribute(\"hidden\", \"hidden\");\n document.getElementById(\"off_status\").removeAttribute(\"hidden\");\n localStorage.setItem(\"fbkyType\", \"离线\");\n // this.upOpenningTile(\"离线\");\n this.openningTile = \"离线\";\n },\n },\n // 关联摄像头id列表\n cameraList: [],\n cameraId: {},\n };\n },\n mounted() {},\n created() {\n // this.getCameraList();\n // this.initMediaDevices();\n // setTimeout(() => {\n // this.initPerimeter();\n // }, 500);\n },\n destroyed() {\n // this.callHangupAll();\n // setTimeout(() => {\n // this.webRtcLogout();\n // }, 500);\n },\n methods: {\n // 连接防爆扩音\n FbkyConnect() {\n // this.openningTile = \"在线\"\n this.initMediaDevices();\n setTimeout(() => {\n this.initPerimeter();\n }, 500);\n },\n // 断开防爆扩音\n FbkyBreak() {\n this.openningTile = \"离线\";\n this.callHangupAll();\n setTimeout(() => {\n this.webRtcLogout();\n }, 500);\n },\n // 呼出通话\n FbkyDial() {\n // 语音呼出\n rtcHelper.rtcDial(this.ringNumber, false);\n },\n // 挂断通话\n FbkyHangUp() {},\n upOpenningTile(val) {\n this.openningTile = val;\n },\n //挂断所有通话\n callHangupAll() {\n rtcHelper.rtcHangupAll();\n },\n getVideoDiv() {\n // return document.getElementById(\"peerTag\").value;\n return \"video1\";\n },\n openAll() {\n // this.ringNumber = \"110\";\n this.ringNumber = \"111\";\n this.callDisable = true;\n },\n closeAll() {\n this.callDisable = false;\n this.openningTile = \"暂无\";\n this.cameraInfo = null;\n },\n handleClose() {\n // this.$store.dispatch(\"home/toggleAmplificationVisible\");\n },\n //载入参数登录\n initPerimeter() {\n if (\n !this.webSocketParams.admin ||\n !this.webSocketParams.password ||\n !this.webSocketParams.url\n ) {\n alert(\"请填写必填参数\");\n return;\n }\n // 缓存配置\n localStorage.verto_login = this.webSocketParams.admin; //分机账号\n localStorage.verto_password = this.webSocketParams.password; //分机密码\n localStorage.verto_socketUrl = this.webSocketParams.url; //webSocketURL\n localStorage.verto_localIp = this.webSocketParams.localIp;\n localStorage.verto_autoReg = this.webSocketParams.autoReg; //自动登录开关\n localStorage.verto_autoAnswer = this.webSocketParams.autoAnswer; //自动接听开关\n rtcHelper.bootstrap(\n this.webSocketParams.admin,\n this.webSocketParams.password,\n this.webSocketParams.url,\n this.webSocketParams.localIp,\n this.getVideoDiv(),\n \"local_video\",\n this.callback,\n this.mic,\n this.speak,\n this.cam\n );\n },\n //登出\n webRtcLogout() {\n try {\n rtcHelper.rtcLogout();\n } catch (e) {\n console.error(e);\n }\n },\n //获取音视频设备\n initMediaDevices() {\n rtcHelper.getMediaDevices().then((result) => {\n try {\n let microphone = result.audioInputDevices; //麦克风\n let camera = result.videoDevices; //摄像头+\n let loudspeaker = result.audioOutputDevices; //扬声器\n let microphoneStr = \"\";\n let cameraStr = \"\";\n let loudspeakerStr = \"\";\n // for (let i = 0; i < microphone.length; i++) {\n // microphoneStr +=\n // '<option value=\"' +\n // microphone[i].deviceId +\n // '\">' +\n // microphone[i].label +\n // \"</option>\";\n // }\n // document.getElementById(\"audioInputDev\").innerHTML = microphoneStr;\n // for (let i = 0; i < camera.length; i++) {\n // cameraStr +=\n // '<option value=\"' +\n // microphone[i].deviceId +\n // '\">' +\n // camera[i].label +\n // \"</option>\";\n // }\n // document.getElementById(\"videoInputDev\").innerHTML = cameraStr;\n // for (let i = 0; i < loudspeaker.length; i++) {\n // loudspeakerStr +=\n // '<option value=\"' +\n // microphone[i].deviceId +\n // '\">' +\n // loudspeaker[i].label +\n // \"</option>\";\n // }\n // document.getElementById(\"audioOutputDev\").innerHTML = loudspeakerStr;\n if (microphone.length > 0) {\n this.mic = microphone[0].deviceId;\n }\n if (camera.length > 0) {\n this.cam = camera[0].deviceId;\n }\n if (loudspeaker.length > 0) {\n this.speak = loudspeaker[0].deviceId;\n }\n console.log(\"音视频设备：\", result, this.mic, this.cam, this.speak);\n } catch (e) {\n console.error(e);\n }\n // 自动登录\n // if (\n // localStorage.verto_autoReg == \"true\" &&\n // localStorage.verto_login &&\n // localStorage.verto_password &&\n // localStorage.verto_socketUrl\n // ) {\n // this.initPerimeter();\n // }\n });\n },\n // 获取关联摄像头\n async getCameraList() {\n var param = {\n listOrder: [],\n pageId: \"813838385444560896\",\n pageIndex: 1,\n pageSize: 10,\n };\n const res = await customPageGetList(param);\n var cameraList = [];\n for (let i = 0; i < res.data.content.length; i++) {\n if (res.data.content[i].field006) {\n cameraList.push(res.data.content[i].field006);\n }\n }\n var cameraAllList = this.$store.getters.cameraList;\n var list = [];\n for (let i = 0; i < cameraAllList.length; i++) {\n for (let j = 0; j < cameraList.length; j++) {\n if (cameraAllList[i].id == cameraList[j]) {\n list.push(cameraAllList[i]);\n }\n }\n }\n var list1 = [...new Set(list)];\n this.cameraList = list1;\n this.cameraId = list1[0];\n },\n openCamera(item) {\n console.log(item);\n this.cameraId = item;\n },\n },\n};\n</script>\n \n <style lang=\"less\" scoped>\n.fbky {\n padding: 20px;\n color: #fff;\n font-size: 14px;\n .top {\n .el-tag {\n margin-left: 10px;\n }\n }\n .fbky_manage {\n margin-top: 10px;\n margin-bottom: 10px;\n span {\n display: inline-block;\n margin-left: 20px;\n color: red;\n }\n }\n}\n.cameraList {\n margin-top: 15px;\n margin-bottom: 15px;\n}\n.datebuttonitem {\n background: rgba(216, 216, 216, 0);\n border: 1px solid #3c91c7;\n border-radius: 5px;\n // width: 78px;\n height: 26px;\n font-family: MicrosoftYaHei;\n font-size: 14px;\n color: #49ccff;\n letter-spacing: 0;\n line-height: 13px;\n font-weight: 400;\n padding: 5px;\n cursor: pointer;\n margin-right: 5px;\n}\n\n.canvas {\n width: 850px;\n height: 480px;\n}\n.set_status {\n color: #fff;\n border-radius: 10px;\n padding: 4px 10px;\n margin-left: 20px;\n}\n.off_status {\n background-color: #bbb;\n}\n\n.on_status {\n background-color: #3fd672;\n}\n</style>\n \nexport default {\n name: 'HelloWorld',\n props: {\n msg: String\n }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\nh3 {\n margin: 40px 0 0;\n}\nul {\n list-style-type: none;\n padding: 0;\n}\nli {\n display: inline-block;\n margin: 0 10px;\n}\na {\n color: #42b983;\n}\n</style>\n"]}]}
|
