VUE用瀏覽器調用USB攝像頭

公司需求:

　　在線上瀏覽器調用攝像頭拍照上傳

 　  本人實現 調用攝像頭拍照以下代碼  經測試  (Google Chrome  88.0.4324.182) 版本可用   各位可以試一試其他瀏覽器

　　參考代碼 https://www.jb51.net/article/193305.htm

發布到服務器只能支持HTTPS的 HTTP類型的會報錯 解決谷歌瀏覽器不支持HTTP的

　　在瀏覽器地址欄中輸入“chrome://flags/#unsafely-treat-insecure-origin-as-secure”，回車，如下圖，將該選項置為Enabled，在輸入框中輸入需要訪問的地址，多個地址使用“,”隔開，然后點擊右下角彈出的Relaunch按鈕，自動重啟瀏覽器之后就可以在添加的http地址下調用攝像頭和麥克風了。

　　

 

 

以下是調用攝像頭代碼 直接用就可以

<template>
  <div class="camera_outer">
    <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
    <canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas>
    <div v-if="imgSrc" class="img_bg_camera">
      <img :src="imgSrc" alt="" class="tx_img">
    </div>
    <div>
      <button @click="getCompetence()">打開攝像頭</button>
      <button @click="stopNavigator()">關閉攝像頭</button>
      <button @click="setImage()">拍照</button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        videoWidth: 540,
        videoHeight: 410,
        imgSrc: '',
        thisCancas: null,
        thisContext: null,
        thisVideo: null,
        validTip: '驗證中'
      }
    },
    computed: {},
    methods: {
      /*調用權限*/
      getCompetence() {
        var _this = this
        this.thisCancas = document.getElementById('canvasCamera')
        this.thisContext = this.thisCancas.getContext('2d')
        this.thisVideo = document.getElementById('videoCamera')
        // 舊版本瀏覽器可能根本不支持mediaDevices，我們首先設置一個空對象
        if (navigator.mediaDevices === undefined) {
          navigator.mediaDevices = {}
        }
        // 一些瀏覽器實現了部分mediaDevices，我們不能只分配一個對象
        // 使用getUserMedia，因為它會覆蓋現有的屬性。
        // 這里，如果缺少getUserMedia屬性，就添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (constraints) {
            // 首先獲取現存的getUserMedia(如果存在)
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
            // 有些瀏覽器不支持，會返回錯誤信息
            // 保持接口一致
            if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
            }
            // 否則，使用Promise將調用包裝到舊的navigator.getUserMedia
            return new Promise(function (resolve, reject) {
              getUserMedia.call(navigator, constraints, resolve, reject)
            })
          }
        }
        var constraints = {
          audio: false,
          video: {width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)'}
        }
        navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
          // 舊的瀏覽器可能沒有srcObject
          if ('srcObject' in _this.thisVideo) {
            _this.thisVideo.srcObject = stream
          } else {
            // 避免在新的瀏覽器中使用它，因為它正在被棄用。
            _this.thisVideo.src = window.URL.createObjectURL(stream)
          }
          _this.thisVideo.onloadedmetadata = function () {
            _this.thisVideo.play()
          }
        }).catch(err => {
          console.log(err)
        })
      },
      /*繪制圖片*/
      setImage() {
        var _this = this
        // 點擊，canvas畫圖
        _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
        // 獲取圖片base64鏈接
        var image = this.thisCancas.toDataURL('image/png')
        _this.imgSrc = image
        this.$emit('refreshDataList', this.imgSrc)
      },
      /*base64轉文件*/
      dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(',')
        var mime = arr[0].match(/:(.*?);/)[1]
        var bstr = atob(arr[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, {type: mime})
      },
      /*關閉攝像頭*/
      stopNavigator() {
        this.thisVideo.srcObject.getTracks()[0].stop()
      }
    },
    mounted() {
      this.getCompetence()
    },
    beforeDestroy() {
      this.stopNavigator()
    }
  }

</script>
<style lang="scss" scoped>
  .camera_outer {
    position: relative;
    overflow: hidden;
    background-size: 100%;

    video, canvas, .tx_img {
      -moz-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      transform: scaleX(-1);
    }

    .btn_camera {
      position: absolute;
      bottom: 4px;
      left: 0;
      right: 0;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.3);
      line-height: 50px;
      text-align: center;
      color: #ffffff;
    }

    .bg_r_img {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
    }

    .img_bg_camera {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;

      img {
        width: 100%;
        height: 100%;
      }

      .img_btn_camera {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.3);
        color: #ffffff;

        .loding_img {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
</style>