{"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":1740992308575},{"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"]}]}