vue在本地調用瀏覽器攝像頭掃一掃功能遇到的坑

vue調用瀏覽器攝像頭需要在https協議下面進行，原則在下面加上devServer:{https:true},

然后輸入例如：https://10.120.19.123:8080/#/的網址即可訪問，但是會提醒不是安全使用 https 出現 “您的連接不是私密連接” 的問題。大部分時候只要點擊“高級”，然后選擇依然繼續就行了，但是也可能出現如下的情況：可參見：https://www.jianshu.com/p/5461b6ecb94f
這個時候你可能已經高興可以正常訪問地址了，但是很遺憾，在登陸接口請求的時候卻報錯接口跨域，沒法正常請求接口。
於是放棄了

------------------------以上可以跳過，僅代表實驗思想。撤回devServer:{https:true}的設置-----------------

https://blog.csdn.net/weixin_46045222/article/details/112766551這個真正解決了不在https的情況下也能正常打開攝像頭權限。
即：在瀏覽器地址欄輸入：chrome://flags/#unsafely-treat-insecure-origin-as-secure

就會出現頁面【里面輸入對應項目地址（需要用攝像頭項目地址）】輸入：http://10.120.19.123:8080/
這個時候再回到項目最初狀態下：正常訪問，再調用攝像頭，瀏覽器就會詢問打開攝像頭了，完美解決！
再看看設置里面攝像頭以及打開啦。如何實現掃碼功能及樣式，可見我上篇文章：https://www.cnblogs.com/Fancy1486450630/p/15711014.html

-------------------------------2022/4/14更新------------------------------

針對devServer:{https:true}來解決這掃碼問題。我們繼續來針對https來做一版：參考文檔：https://blog.csdn.net/weixin_41856395/article/details/120597131?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1.pc_relevant_antiscanv2&utm_relevant_index=2

1:vue.config.js文件：
module.exports = {
	devServer: {
	        port: 8080,
	        https: true,
	       
	    },
};
2：安裝npm install @zxing/library --save
3：需要在頁面有點擊掃碼的地方：
<div @click="scanCode">點擊掃碼</div>
<div>掃碼結果：{{codeText}}</div>
 scanCode(){
			 // this.isShow=true
			  console.log('瀏覽器信息', navigator.userAgent);
			   this.$router.push({
			     path: '/qrcode'
			   });
		 },
4：路由頁面router.js配置
{
    name: 'qrcode',//掃碼
    path: '/qrcode',
    component: () => import('./view/qrcode'),
    meta: {
      title: '掃碼',
    },
  },
5：qrcode.vue頁面封裝如下：
<template>
  <div class="page-scan">
    <!--返回-->
    <van-nav-bar title="掃描二維碼/條形碼" fixed
      @click-left="clickIndexLeft()"
      class="scan-index-bar">
      <template #left>
        <van-icon name="arrow-left" size="18" color="#fff"/>
        <span style="color: #fff"> 取消 </span>
      </template>
    </van-nav-bar>
    <!-- 掃碼區域 -->
    <video ref="video" id="video" class="scan-video" autoplay></video>
    <!-- 提示語 -->
    <div v-show="tipShow" class="scan-tip"> {{tipMsg}} </div>
  </div>
</template>
 
<script>
import { BrowserMultiFormatReader } from '@zxing/library';
import { Dialog, Notify } from 'vant';
 
  export default {
    name: 'scanCodePage',
    data() {
      return {
        loadingShow: false,
        codeReader: null,
        scanText: '',
        vin: null,
        tipMsg: '正在嘗試識別....',
        tipShow: false
      }
    },
    created() {
      this.codeReader = new BrowserMultiFormatReader();
      this.openScan();
    },
    destroyed(){
      this.codeReader.reset();
    },
    watch: {
      '$route'(to, from) {
        if(to.path == '/scanCodePage'){
          this.codeReader = new BrowserMultiFormatReader();
          this.openScanTwo();
        }
      }
    },
    methods: {
      async openScan() {
        this.codeReader.getVideoInputDevices().then((videoInputDevices) => {
          this.tipShow = true;
          this.tipMsg = '正在調用攝像頭...';
          console.log('videoInputDevices', 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.decodeFromInputVideoFunc(firstDeviceId);
        }).catch(err => {
          this.tipShow = false;
          console.error(err);
        });
      },
      async openScanTwo() {
        this.codeReader = await new BrowserMultiFormatReader();
        this.codeReader.getVideoInputDevices().then((videoInputDevices) => {
          this.tipShow = true;
          this.tipMsg = '正在調用攝像頭...';
          console.log('videoInputDevices', 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.decodeFromInputVideoFunc(firstDeviceId);
        }).catch(err => {
          this.tipShow = false;
          console.error(err);
        });
      },
      decodeFromInputVideoFunc(firstDeviceId) {
        this.codeReader.reset(); // 重置
        this.scanText = '';
        this.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => {
          this.tipMsg = '正在嘗試識別...';
          this.scanText = '';
          if (result) {
            console.log('掃描結果', result);
            this.scanText = result.text;
			localStorage.setItem('codeText',result.text)
			this.clickIndexLeft()
			return
            if (this.scanText) {
              this.tipShow = false;
              // 這部分接下去的代碼根據需要，讀者自行編寫了
			  // this.$emit("ok", result.text)
              // this.$store.commit('app/SET_SCANTEXT', result.text);
              // console.log('已掃描的小票列表', this.$store.getters.scanTextArr);
            }
          }
          if (err && !(err)) {
            this.tipMsg = '識別失敗';
            setTimeout(() => {
              this.tipShow = false;
            }, 2000)
            console.error(err);
          }
        });
      },
      clickIndexLeft(){  // 返回上一頁
        this.codeReader = null;
        this.$router.back();
		this.$destroy();//這個報錯我自行去掉了
      }
    }
  }
</script>
 
<style lang="less">
.scan-index-bar{
  background-image: linear-gradient( -45deg, #42a5ff ,#59cfff);
}
.van-nav-bar__title{
  color: #fff !important;
}
.scan-video{
  height: 80vh;
}
.scan-tip{
  width: 100vw;
  text-align: center;
  margin-bottom: 10vh;
  color: white;
  font-size: 5vw;
}
.page-scan{
  overflow-y: hidden;
  background-color: #363636;
}
</style>