gengxin

chenyincheng

2022-12-23 3e0c7a2322569d1d3ac6b25e76f9d506caf907ce

gengxin

 electron/main/index.ts

@@ -66,8 +66,8 @@
async function createWindow() {
  win = new BrowserWindow({
    title: 'Main window',
    fullscreen: true,
    autoHideMenuBar:true, 
    fullscreen: false,
    // autoHideMenuBar:true, 
    webPreferences: {
      preload: splash,
      nodeIntegration: true,

 src/router/index.ts

@@ -5,7 +5,7 @@

const routes: Array<RouteRecordRaw> = [
    // { path: '/', name: 'Home', component: () => import('@/views/home/index.vue')},
    { path: '/', name: 'test', component: () => import('@/views/home/index.vue')},
    { path: '/', name: 'login', component: () => import('@/views/login/index.vue')},
]

const router = createRouter({

 src/samples/node-api.ts

@@ -36,30 +36,33 @@
// 主进程获取配置项完成sockte注册和httpshu
ipcRenderer.on('getConfigData',(_event,...args)=>{
  console.log("config.json",...args)
  if(args[0]===undefined){
    // alert("配置文件没有写入配置，请检查配置文件 文件路径："+args[2])
    ElMessageBox.prompt('没有设定客户编号，请输入客户编号并保存', '警告', {
      confirmButtonText: '保存',
      showClose:false,
      showCancelButton:false,
      inputErrorMessage: 'Invalid Email',
    })
      .then(({ value }) => {
        const mode={
          clientCode:value,
          machineName:os.hostname(),
          screenTimeout: 60,
        }
        ipcRenderer.send('setConfingData',mode)
      }) 
    
  if(args!==null){
    if(args[0]===undefined){
      // alert("配置文件没有写入配置，请检查配置文件 文件路径："+args[2])
      ElMessageBox.prompt('没有设定客户编号，请输入客户编号并保存', '警告', {
        confirmButtonText: '保存',
        showClose:false,
        showCancelButton:false,
        inputErrorMessage: 'Invalid Email',
      })
        .then(({ value }) => {
          const mode={
            clientCode:value,
            machineName:os.hostname(),
            screenTimeout: 60,
          }
          ipcRenderer.send('setConfingData',mode)
        }) 
      
    }
    else if(args.length>0&&args[0].length>0){
      clientCode=args[0]
      // 建立sockte 通讯
      creatorClient([],clientCode)
  
    }
  }
  else if(args.length>0&&args[0].length>0){
    clientCode=args[0]
    // 建立sockte 通讯
    creatorClient([],clientCode)

  }
  
})
ipcRenderer.on("getScreenTimeout",(_event,args)=>{
  if(args!==undefined){

 src/views/login/index.vue

New file
@@ -0,0 +1,200 @@
<template>
    <teleport to="body">
      <div class="mask">
        <el-header class="go">
          <div class="box">
            <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
            <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoWidth"></canvas>
          </div>
          <div class="footer">
            <el-button @click="getCompetence" icon="el-icon-video-camera"> 打开摄像头 </el-button>
            <el-button @click="drawImage" icon="el-icon-camera"> 拍照 </el-button>
            <el-button @click="stopNavigator" icon="el-icon-switch-button"> 关闭摄像头 </el-button>
            <el-button @click="resetCanvas" icon="el-icon-refresh"> 重置 </el-button>
            <el-button @click="$emit('closed')" class="closeBtn">关闭</el-button>
          </div>
        </el-header>
      </div>
    </teleport>
  </template>
  <script lang="ts" setup>
  import { ref, reactive, inject, toRefs, nextTick } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  const message = inject("$message");
  const config = inject("$CONFIG");
  const tool = inject("$TOOL");
  const api = inject("$API");

  const loading = ref(false);
  const os = ref(false); //控制摄像头开关
  let thisVideo = ref("");
  let thisContext = ref("");
  let thisCancas = ref("");
  const videoWidth = ref(500);
  const videoHeight = ref(500);
  const postOptions = ref([]);
  const certCtl = ref("");
  const mask = ref(true);
   
  //查询参数
  const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    imgSrc: undefined,
  });
  const closedPhono = ref(null);
   
  const emit = defineEmits(["closed"]);
  const props = defineProps({
    visible: { type: Boolean },
  });
  const { visible } = toRefs(props);
  const handleChange = (val) => {
    console.log(visible);
  };
   
  //调用摄像头权限
  const getCompetence = () => {
    nextTick(() => {
      os.value = false;
      thisCancas = document.getElementById("canvasCamera");
      thisContext = thisCancas.getContext("2d");
      thisVideo = document.getElementById("videoCamera");
      closedPhono.value = thisVideo;
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
   
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          // 首先获取现存的getUserMedia(如果存在)
          let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
          if (!getUserMedia) {
            return Promise.reject(new Error("getUserMedia is not implemented in this browser"));
          }
          return new Promise(function (resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }
   
      const constraints = {
        audio: false,
        video: { width: videoWidth.value, height: videoHeight.value, transform: "scaleX(-1)" },
      };
   
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function (stream) {
          if ("srcObject" in thisVideo) {
            thisVideo.srcObject = stream;
          } else {
            thisVideo.src = window.URL.createObjectURL(stream);
          }
          thisVideo.onloadedmetadata = function (e) {
            thisVideo.play();
          };
        })
        .catch((err) => {
          ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
        });
    });
  };
   
  //绘制图片
  const drawImage = () => {
    getCompetence();
    thisCancas = document.getElementById("canvasCamera");
    thisContext = thisCancas.getContext("2d");
    thisVideo = document.getElementById("videoCamera");
     thisContext.drawImage(thisVideo, 0, 0, 500, 500);
    //获取图片地址
    queryParams.imgSrc = thisCancas.toDataURL('image/png');
    console.log(queryParams.imgSrc);
  };
   
  //清空画布
  const clearCanvas = (id) => {
    let c = document.getElementById(id);
    let cxt = c.getContext("2d");
    cxt.clearRect(0, 0, 500, 500);
    
  };
   
  //重置画布
  const resetCanvas = () => {
    queryParams.imgSrc = "";
    clearCanvas("canvasCamera");
  };
   
  //关闭摄像头
  const stopNavigator = () => {
    // thisVideo = document.getElementById("videoCamera");
    if (closedPhono.value && closedPhono.value !== null) {
      thisVideo.srcObject.getTracks()[0].stop();
      os.value = true;
    } else {
      ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
    }
  };
  defineExpose({
    stopNavigator,
  });
  </script>
  <style scoped>
  .footer {
    width: 959px;
    height: 50px;
    background-color: white;
    justify-content: space-between;
    float: left;
    margin-top: 217px;
  }
  .detailed {
    width: 1200px !important;
    height: 800px !important;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
  }
   
   
  .oText {
    margin-left: 42px;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  .closeBtn {
    float: right;
  }
  .box {
    width: 959px;
    height: 700px;
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    /* float: left !important; */
    padding-top: 100px;
    text-align: center;
  }
  .go {
    width: 1000px;
    height: 800px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
  }
   
  </style>