VUE 前端zxing-js调用摄像头扫码DEMO 笔记

vue框架 调用zxing.js插件调用摄像头扫码DEMO

关尔先生2020-10-21 11:14:32


1、zxing-js官网地址:https://github.com/zxing-js/library

2、浏览器需要支持 WebRTC

<template>
  <div class="v-body">
    <video ref="video" id="video" poster="../../assets/loading.jpg"></video>
    <p v-if="videoInputDevicesArray.length==0">{{textContent}}</p>
    <a v-else :href="textContent">{{textContent}}</a>
    <van-button v-if="videoInputDevicesArray.length>0" @click="changeCamera" block type="info">切换摄像头</van-button>
  </div>
</template>

<script>
import Vue from "vue";
// eslint-disable-next-line no-unused-vars
import adapter from "webrtc-adapter";
// WebRTC适配器 只需要引入就ok
import { BrowserMultiFormatReader } from "@zxing/library";
/**
 * zxing demo
 */
export default {
  data: () => ({
    codeReadernull,
    videoInputDevicesArray: [],
    selectedIndex-1,
    textContentundefined,
  }),
  created() {
    this.updateTitle(this.$route.meta.title);
    this.codeReader = new BrowserMultiFormatReader();
    console.log(this.codeReader);
    setTimeout(() => {
      this.init();
    }, 500);
  },
  destroyed(){
    this.codeReader.reset();
  },
  methods: {
    changeCamera() {
      this.selectedIndex = this.selectedIndex + 1;
      if (this.selectedIndex >= this.videoInputDevicesArray.length) {
        this.selectedIndex = 0;
      }
      this.decodeFromInputVideo();
    },
    init() {
      this.codeReader
        .listVideoInputDevices()
        .then((videoInputDevices=> {
          videoInputDevices.forEach((device=>
            console.log(`${device.label}${device.deviceId}`)
          );
          this.videoInputDevicesArray = videoInputDevices;
          this.decodeFromInputVideo();
        })
        .catch((err=> console.error(err));
    },
    decodeFromInputVideo() {
      if (this.videoInputDevicesArray.length == 0) {
        this.textContent = "没有检测到可用的摄像头";
        this.$toast(this.textContent);
        document.getElementById("video").style.display="none"
        return;
      }
      if (this.selectedIndex >= this.videoInputDevicesArray.length) {
        this.selectedIndex = 0;
      }
      let selectedDeviceId;
      if (this.selectedIndex == -1) {
        selectedDeviceId = undefined;
      } else {
        selectedDeviceId = this.videoInputDevicesArray[this.selectedIndex]
          .deviceId;

        this.codeReader.reset();
      }

      console.log(
        `Started continous decode from camera with id ${selectedDeviceId}`
      );

      this.codeReader.decodeFromInputVideoDeviceContinuously(
        selectedDeviceId,
        "video",
        (resulterr=> {
          if (result) {
            console.log(result);
            this.textContent = result.text;
          }
          if (err && !err) {
            console.error(err);
          }
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
video {
  width: 100%;
  height: calc(~"(100vh - 156px)");
  background-color: black;
}
.v-body {
  font-family: "Ropa Sans"sans-serif;
  color: #333;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  padding: 8px 16px;
}
#githubLink {
  position: absolute;
  right: 0;
  top: 12px;
  color: #2d99ff;
}
h1 {
  margin: 10px 0;
  font-size: 40px;
}
#loadingMessage {
  text-align: center;
  padding: 40px;
  background-color: #eee;
}
#canvas {
  width: 100%;
}
#output {
  margin-top: 20px;
  background: #eee;
  padding: 10px;
  padding-bottom: 0;
}
#output div {
  padding-bottom: 10px;
  word-wrap: break-word;
}
#noQRFound {
  text-align: center;
}
</style>

前端vue.js扫码zxing摄像头WebRTC

上一篇:vue地图组件(v-charts百度地图)的使用Demo

下一篇:VUE 前端zxing-js生成二维码DEMO

本文链接: http://www.nanshanqiao.com/zz_article/60.html

暂无评论