pbl-app/src/components/sweepPage_html5_qrcode.vue

<template>
  <div class="sweep" v-if="show">
    <div id="reader"></div>
    <div class="ku-scanner">
      <div class="ku-scanner-content">
        <div class="ku-scanner-tooltip">
          将二维码/条码放入框内，即自动扫描
          {{ msg }}
        </div>
        <div class="ku-scanner-section">
          <div class="ku-scanner-section-animation-line"></div>
          <div class="ku-scanner-section-angle"></div>
        </div>
      </div>
    </div>
    <!-- <QrcodeStream
      class="ku-scanner"
      ref="QrcodeStreamRef"
      v-if="show"
      :constraints="{ facingMode: { ideal: 'environment' } }"
      :camera="camera"
      :torch="torchActive"
      :zoom="1"
      :key="cameraKey"
      @decode="onDecode"
      @init="onInit"
    >
      <div class="ku-scanner-content">
        <div class="ku-scanner-tooltip">
          将二维码/条码放入框内，即自动扫描
        </div>
        <div class="ku-scanner-section">
          <div class="ku-scanner-section-animation-line"></div>
          <div class="ku-scanner-section-angle"></div>
        </div>
      </div>
    </QrcodeStream> -->
    <span class="closeBtn" @click="close">
      <svg
        t="1733477770331"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4265"
        width="64"
        height="64"
      >
        <path
          d="M623.807 528.693a113.756 113.756 0 0 0-0.139-33.126l252.787-252.692c26.245-26.236 26.245-68.772 0-95.006-26.248-26.236-68.798-26.236-95.043 0L528.281 400.902c-5.296-0.762-10.708-1.164-16.216-1.164s-10.92 0.402-16.216 1.164l-253.13-253.031c-26.245-26.236-68.796-26.236-95.043 0-26.245 26.234-26.245 68.77 0 95.006l252.789 252.692a113.726 113.726 0 0 0-0.14 33.124L147.676 781.247c-26.245 26.236-26.245 68.77 0 95.006 26.248 26.236 68.798 26.236 95.043 0L494.85 624.218c5.613 0.859 11.362 1.305 17.215 1.305s11.602-0.446 17.215-1.305l252.13 252.035c26.245 26.236 68.796 26.236 95.043 0 26.245-26.236 26.245-68.77 0-95.006L623.807 528.693z"
          fill="#000000"
          p-id="4266"
        ></path>
        <path
          d="M512.063 444.326c37.407 0 67.73 30.327 67.73 67.736 0 37.41-30.323 67.735-67.73 67.735-37.405 0-67.728-30.325-67.728-67.735 0.001-37.408 30.323-67.736 67.728-67.736z"
          fill="#000000"
          p-id="4267"
        ></path>
      </svg>
    </span>
  </div>
</template>

<script>
// import { Html5QrcodeScanner } from 'html5-qrcode'
import { Html5Qrcode } from 'html5-qrcode'
export default {
  data() {
    return {
      show: false,
      cameras: null,
      camerasList: [],
      msg: ''
      // constraints:{
      // 	width:300,
      // 	height:300
      // }
    }
  },
  methods: {
    open() {
      this.show = true
      this.$nextTick(() => {
        this.startCameras()
        // this.getCamerasList()
      })
      // setTimeout(()=>{
      //   this.$emit('success', "功能测试2503261429")
      // },1000)
    },
    getCamerasList() {
      Html5Qrcode.getCameras()
        .then(devices => {
          /**
           * devices would be an array of objects of type:
           * { id: "id", label: "label" }
           */
          if (devices && devices.length) {
            // var cameraId = devices[0].id
            this.camerasList = devices
            this.$message.info(JSON.stringify(devices))
            this.startCameras()
            // .. use this to start scanning.
          }
        })
        .catch(err => {
          // handle err
          console.log(err)
          this.msg = err
        })
    },
    startCameras() {
      // if (this.camerasList.length <= 0) {
      //   this.$emit('error', '未找到相机')
      //   return
      // }
      // const html5QrCode = new Html5Qrcode('reader')
      // html5QrCode
      //   .start(
      //     this.camerasList[0].id,
      //     { fps: 10 },
      //     (decodedText, decodedResult) => {
      //       // do something when code is read
      //       this.msg += decodedText + '👈'
      //       this.msg += decodedResult + '?👈'
      //       this.$emit('success', decodedText)
      //     },
      //     errorMessage => {
      //       this.msg += errorMessage
      //       this.$emit('error', errorMessage)
      //       // parse error, ignore it.
      //     }
      //   )
      //   .catch(err => {
      //     this.msg += err
      //   })
      this.cameras = new Html5Qrcode('reader', {
        fps: 10,
        videoConstraints: {
          width: { ideal: 1280 },
          height: { ideal: 720 },
          // 或尝试 facingMode
          facingMode: 'environment' // 后置摄像头
        }
      })
      this.cameras.start({ facingMode: { exact: 'environment' }}, { fps: 10 }, this.CamerasSuccess)
    },
    CamerasSuccess(decodedText, decodedResult) {
      console.log(decodedResult)
      this.$emit('success', decodedText)
    },
    // stopCamera() {
    //   const video = document.querySelector('video')
    //   if (video && video.srcObject) {
    //     const stream = video.srcObject
    //     const tracks = stream.getTracks()
    //     tracks.forEach(track => track.stop())
    //     video.srcObject = null
    //   }
    // },
    close() {
      this.camerasList = []
      if (this.cameras) {
        this.cameras
          .stop()
          .then(ignore => {
            this.cameras = null
            // QR Code scanning is stopped.
          })
          .catch(err => {
            // Stop failed, handle it.
            this.msg = err
            this.cameras = null
          })
      }
      this.show = false
    }
    // onDecode(result) {
    //   this.$emit('success', result)
    //   // this.$toast(result)
    // },
    // async onInit(promise) {
    //   try {
    //     const { capabilities } = await promise
    //     const TORCH_IS_SUPPORTED = !!capabilities.torch
    //     console.log('TORCH_IS_SUPPORTED', TORCH_IS_SUPPORTED)
    //     await promise
    //   } catch (error) {
    //     this.$emit('error', error)
    //     this.close()
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.sweep {
  width: 100vw;
  height: 100vh;
  z-index: 9990;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
}

.closeBtn {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 20px;
  border-radius: 50%;
  background-color: #ffffff80;
  right: 20px;
  z-index: 9992;
  box-sizing: border-box;
  padding: 10px;
  svg {
    width: 100%;
    height: 100%;
  }
}

.ku-scanner {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9991;
  display: flex;
  justify-content: center;
  align-items: center;
  .ku-scanner-content {
    background-size: 3rem 3rem;
    background-position: -1rem -1rem;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgba(18, 18, 18, 0);
    margin: auto;
    // 提示信息
    .ku-scanner-tooltip {
      width: 100%;
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      text-align: center; /* color: #f9f9f9; */
      margin: 0 auto;
      position: absolute;
      top: 0;
      left: 0;
      color: #ffffff;
    }
    .ku-scanner-section {
      width: 213px;
      height: 213px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      border: 0.1rem solid rgba(86, 247, 118, 0.301);
      // // 装饰角
      // &:after {
      //   content: '';
      //   display: block;
      //   position: absolute;
      //   width: 12px;
      //   height: 12px;
      //   border: 0.2rem solid transparent;
      //   top: 0;
      //   border-top-color: #2ffc58;
      //   right: 0;
      //   border-right-color: #2ffc58;
      // }
      // &:before {
      //   content: '';
      //   display: block;
      //   position: absolute;
      //   width: 12px;
      //   height: 12px;
      //   border: 0.2rem solid transparent;
      //   top: 0;
      //   border-top-color: #2ffc58;
      //   left: 0;
      //   border-left-color: #2ffc58;
      // }
      // // 装饰角
      // .ku-scanner-section-angle {
      //   &:after {
      //     content: '';
      //     display: block;
      //     position: absolute;
      //     width: 12px;
      //     height: 12px;
      //     border: 0.2rem solid transparent;
      //     bottom: 0;
      //     border-bottom-color: #2ffc58;
      //     right: 0;
      //     border-right-color: #2ffc58;
      //   }
      //   &:before {
      //     content: '';
      //     display: block;
      //     position: absolute;
      //     width: 12px;
      //     height: 12px;
      //     border: 0.2rem solid transparent;
      //     bottom: 0;
      //     border-bottom-color: #2ffc58;
      //     left: 0;
      //     border-left-color: #2ffc58;
      //   }
      // }
      // 扫描活动线
      .ku-scanner-section-animation-line {
        height: calc(100% - 2px);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #2ffc58 211%);
        border-bottom: 3px solid #2ffc58;
        transform: translateY(-100%);
        animation: radar-beam 2s infinite alternate;
        animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
        animation-delay: 1.4s;
      }
    }
  }
}
// 扫描活动线--上下 动画
@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

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

#reader {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover; /* 使视频自适应填充 */
}

#reader >>> video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
// #reader__dashboard_section_cameras,
// #reader__dashboard_section_swaplink,
// #reader__header_message,
// #reader__scan_region > div {
//   display: none !important; /* 隐藏默认的一些 UI */
// }

// #reader__scan_region video {
//   width: 100% !important;
//   height: 100% !important;
//   object-fit: cover; /* 视频填充满容器，裁切多余部分 */
// }

// #reader__dashboard {
//   display: none !important;
// }
</style>