VUE 调用摄像头识别二维码

// 组装、其他工序报工
<template>
  <div style="margin-left: 20px; margin-top: 10px">
    <el-row :gutter="20">
      <el-col :span="8">
        <!-- <el-button type="primary" icon="el-icon-check">保存</el-button> -->
        <el-button type="primary" icon="el-icon-check" @click="saoma"
          >扫码</el-button
        >
        <el-form :form="form" ref="form">
          <el-descriptions
            title="扫码列表"
            direction="vertical"
            :column="4"
            border
          >
            <el-descriptions-item label="存货名称"
              ><el-form-item
                ><el-input
                  v-model="form.inventoryName"
                  disabled
                ></el-input></el-form-item
            ></el-descriptions-item>
            <el-descriptions-item label="规格型号"
              ><el-form-item
                ><el-input
                  v-model="form.specification"
                  disabled
                ></el-input></el-form-item
            ></el-descriptions-item>
            <el-descriptions-item label="工序"
              ><el-form-item><el-input disabled></el-input></el-form-item
            ></el-descriptions-item>
            <el-descriptions-item label="数量"
              ><el-form-item
                ><el-input v-model="form.qty" disabled></el-input></el-form-item
            ></el-descriptions-item>
            <el-descriptions-item label="序列号"
              ><el-form-item
                ><el-input
                  v-model="form.code"
                  disabled
                ></el-input></el-form-item
            ></el-descriptions-item>
             <el-descriptions-item label="部门"
                  ><el-form-item
                    ><el-input
                      v-model="form.departmentName"
                      disabled
                    ></el-input></el-form-item
                ></el-descriptions-item>
            <el-descriptions-item label="员工"
                ><el-form-item
                  ><el-input
                    v-model="form.staffName"
                    disabled
                  ></el-input></el-form-item
              ></el-descriptions-item>
            <!-- <el-descriptions-item label="联系地址"><el-form-item><el-input></el-input></el-form-item></el-descriptions-item> -->
          </el-descriptions>
        </el-form>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <!-- 简单的表格+查询 -->
          <basictable
            ref="basictable"
            :searchData="searchData"
            :columns="columns"
            :url="url"
          >
            <template v-slot:buttonSlot>
              <el-button
                style="margin-left: 5px"
                @click="Endit()"
                icon="el-icon-takeaway-box"
                type="primary"
              >
                编辑
              </el-button>
            </template>
          </basictable>
        </div>
      </el-col>
    </el-row>
    <audio src="../../assets/saoma.mp3" controls id="oktip" class="audio"> </audio>
    <div style="width:50%;height: 50%; border: 1px solid red;">
      <div class="page-scan" v-if="show">
      <!-- 扫码区域 -->
      <div class="QrCode">
        <video ref="video" height="100%" width="100%" id="video" autoplay></video>
      </div>
      <!-- 扫码样式 -->
      <div class="qr-scanner">
        <div class="box">
          <div class="line"></div>
          <div class="angle"></div>
        </div>
        <div class="back-arrow" @click="clickIndexLeft">
          <span @click="gb">返回</span>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
// WebRTC适配器 只需要引入就ok
import "webrtc-adapter";
import { BrowserMultiFormatReader } from "@zxing/library";
import basictable from "@/pages/common/basictable.vue";
import { postAction, getAction } from '@/api/manage'


const columns = [
  {
    title: "存货编码",
    align: "center",
    dataIndex: "code",
    width: 200,
    sorter: true,
  },
  {
    title: "存货名称",
    align: "center",
    dataIndex: "name",
    width: 200,
    sorter: true,
  },
  {
    title: "规格型号",
    align: "center",
    dataIndex: "custodianName",
    width: 200,
    sorter: true,
  },
  {
    title: "数量",
    align: "center",
    dataIndex: "custodianName",
    width: 200,
    sorter: true,
  },
  {
    title: "工序",
    align: "center",
    dataIndex: "custodianName",
    width: 200,
    sorter: true,
  },
  {
    title: "备注",
    align: "center",
    dataIndex: "remark",
  },
];
export default {
  name: "Warehouse",
  components: { basictable },
  data() {
    return {
      codeReader: null,
      show:false,
      //查询组件
      searchData: {
        baseArr: [
          { name: "仓库编码", key: "code", type: "input" },
          { name: "仓库名称", key: "name", type: "input" },
        ],
        showArr: [],
      },
      form: {
        code: null,
        inventoryId: null,
        inventoryCode: null,
        inventoryName: null,
        specification: null,
        snCode: null,
        qty: null,
        procedureCode:null,
        departmentId:null,
        departmentName: null,
        staffId: null,
        staffName: null,
      },
      //提交表单组件
      columns: columns,
      //表格组件 需要的查询接口 删除 批量删除接口地址
      url: {
        query: "/MO_ReportOrder/GetPageList",
        // delete: '/Warehouse/Delete',
        // AllDelete: '/Warehouse/DeleteList',
      },
    };
  },
  mounted() {
    this.codeReader = new BrowserMultiFormatReader();
    this.openScan();
  },
  beforeUnmount() {
    this.codeReader && this.codeReader.reset();
  },
  methods: {
    //编辑
    Endit() {
      if (this.$refs.basictable.checkBox.length != 1) {
        this.$message.warning("请选择要操作的数据");
        return;
      }
      this.form = this.$refs.basictable.checkBox[0];
      console.log(this.$refs.basictable.checkBox, "chebox");
    },
    //获取扫码
    saoma() {
      this.show = true
       this.codeReader = new BrowserMultiFormatReader();
      this.openScan();
      this.codeReader && this.codeReader.reset();
    },
    gb() {
      this.show = false;
      console.log(111)
    },
    async openScan() {
      this.codeReader
        .listVideoInputDevices()
        .then((videoInputDevices) => {
          // 默认获取第一个摄像头设备id
          let firstDeviceId = videoInputDevices[0].deviceId
          // 获取第一个摄像头设备的名称
          const videoInputDeviceslablestr = JSON.stringify(
            videoInputDevices[0].label
          )
          if (videoInputDevices.length > 1) {
            // 判断是否后置摄像头
            if (videoInputDeviceslablestr.indexOf('back') > -1) {
              firstDeviceId = videoInputDevices[0].deviceId
            } else {
              firstDeviceId = videoInputDevices[1].deviceId
            }
          }
          this.codeReader && this.codeReader.reset() // 重置
          this.decodeFromInputVideoFunc(firstDeviceId)
        })
        .catch((err) => {
          console.error(err)
        })
    },
    decodeFromInputVideoFunc(firstDeviceId) {
      this.codeReader.decodeFromInputVideoDeviceContinuously(
        firstDeviceId,
        'video',
        (result, err) => {
          if (result) {
            if (result.text) {
             this.clickIndexLeft(result.text)
              // $('#oktip')[0].play()
              // var text=result.text
              //判断员工还是序列号
              let codeArr = result.text.split('-')
              console.log(codeArr, 'codeARR')
              console.log(codeArr[0],'codeArr[0]')
              if (codeArr[0] == 'YG') {
                this.staff(codeArr[1])
              } else if (codeArr[0] == 'LXH') { 
                this.serial(codeArr[1])
              } else {
                return alert('识别失败')
              }
              this.show=false
            }
          }
          if (err && !err) {
            console.error(err)
          }
        }
      )
    },
    // 停止扫描，并返回上一页
    clickIndexLeft(result) {
      this.codeReader && this.codeReader.reset()
      this.codeReader = null
      // this.$route.params.result = result
      // this.$router.back()
    },
    //根据code 获取员工
    staff(code) {
      console.log(11111)
      getAction('/Staff/GetPageList', {
        page: 1,
        rows:100,
        queryJson: {
          code: code,
        }
      }).then(result => { 
        var res=result.data
        if (res.succeeded) {
          console.log(res,'res')
          this.form.departmentId = res.data.items[0].departmentId
          this.form.departmentName = res.data.items[0].departmentName
          this.form.staffId = res.data.items[0].id
          this.form.staffName = res.data.items[0].name
        } else {
          return alert('获取员工错误')
        }
      })
    },
    //扫序列号
    serial(code) {
      let that = this
      if (that.form.departmentId == null || that.form.department == '' || this.form.staffId == null || this.form.staffId == null) {
        return alert('请扫描员工卡')
      }
      var array={
        code:code,
        procedureCode: '01',
        departmentId: that.form.departmentId,
        departmentName: that.form.departmentName,
        staffId: that.form.staffId,
        staffName: that.form.staffName,
      }
      console.log(array,'arr')
      postAction('/MO_ReportOrder/ScanAndSaveSnCode', array).then((res) => {
        if (res.succeeded) {
          this.form.code=code
        } else {
        }
      })
    }
  },
};
</script>
<style lang="scss" scope>
.page-scan{
  // position: absolute;
  // top:15%;
  // width: 74vw;
  // height: 85vh;
  // max-height: 85vh;
  // max-width: 74vh;
  overflow: hidden;
  // left: 33%;
  width: 75vw;
  height: 75vw;
  max-height: 75vh;
  max-width: 75vh;
  left: 33%;
  top: 15%;
  position: absolute;
}
.qr-scanner {
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent
    );
  background-size: 3rem 3rem;
  background-position: -1rem -1rem;
  // width: 100%;
  // height: 100%;
  // position: relative;
  // background-color: #111;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.qr-scanner .box {
  width: 75vw;
  height: 75vw;
  max-height: 75vh;
  max-width: 75vh;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
}

.qr-scanner .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: "";
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;
  border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.qr-scanner .back-arrow {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;

  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.audio{
				display: none;
			}
</style>