@zxing/library插件在H5页面上调用摄像头进行扫码识别解决方法，以及对华为手机的兼容

@zxing/library调用摄像头

这是第一次写博客，不太熟悉，如果我的方法有些问题，请多指正，谢谢！！

关于@zxing/library

导入@zxing/library

npm i @zxing/library --save
or
yarn add @zxing/library

@zxing/library是一个开源的多格式1D/2D条形码图像处理库，用Java实现，带有其他语言的端口。可以用来对二维码和一维码进行扫描识别（我只做了二维码，没有尝试一维码的，大家可以多试一试）

这个库具有一定的局限性，在装有 iOS < 14.3 相机访问仅适用于本机 Safari，而不适用于其他浏览器 （Chrome,…） 或使用 UIWebView 或 WKWebView 的应用。这不是这个库的限制，而是苹果有限的WebRTC支持的限制，但是iOS 14.3（2020年12月发布）现在也支持第三方浏览器中的WebRTC。

浏览器层使用的是MediaDevices Web API，这是旧版浏览器不支持的。
您可以使用WebRTC适配器等外部polyfill来增加浏览器兼容性。

另外，请注意，该库使用的是TypedArray等，这在较旧的浏览器（例如Android 4默认浏览器）中不可用。Int32ArrayUint8ClampedArray
您可以使用 core-js 添加对这些浏览器的支持。

这是开发者说的，对于兼容方面我也不是很懂，如果有大佬会的可以指出来。

代码部分

注意，本代码只能在https环境下测试，请不要在本地环境测试，因此会重复性的打包上线，模拟的https环境我没试过，如果有人尝试可以的话，可以进行补充

template部分

<template>
  <div class="page bgc-f4f4f4">
    <div class="video-show" />
    <video id="video" ref="video" class="video vjs-fluid" autoplay />
    <span class="change" @click="change">
      <i class="el-icon-refresh" />
    </span>
  </div>
</template>

css部分

<style scoped>
.video {
   
  width: 100vw;
  height: 100vh;
  z-index: 1;
}
.video-show {
   
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  height: 70vw;
  z-index: 2;
  background: linear-gradient(to left, #fff, #fff) left top no-repeat,
    linear-gradient(to bottom, #fff, #fff) left top no-repeat,
    linear-gradient(to left, #fff, #fff) right top no-repeat