前言：

vue呼叫本地攝像頭實現拍照功能，由於呼叫攝像頭有使用許可權，只能在本地執行，線上需用https域名才可以使用。實現效果：

1、攝像頭效果：

2、拍照效果：

實現程式碼：

<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="vue呼叫本地攝像頭實現拍照功能" class="tx_img">
   </div>
   <button @click="getCompetence()">開啟攝像頭</button>
   <button @click="stopNavigator()">關閉攝像頭</button>
　　　　　<button @click="setImage()">拍照</button>
 
 
  
  </div>
 </template>
 <script>
 export default {
  data () {
   return {
    videoWidth: 3000,videoHeight: 300,imgSrc: '',thisCancas: null,thisContext: null,thisVideo: null,}
  },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 (e) {
      _this.thisVideo.play()
     }
    }).catch(err => {
     console.log(err)
    })
   },// 繪製圖片（拍照功能）
 
   setImage () {
    var _this = this
    // 點選，canvas畫圖
    _this.thisContext.drawImage(_this.thisVideo,_this.videoWidth,_this.videoHeight)
    // 獲取圖片base64連結
    var image = this.thisCancas.toDataURL('image/jpg')
    _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()
   }
  },}
  
 </script>
 <style lang="less" scoped>
 .camera_outer{
  position: relative;
  overflow: hidden;
  background: url("../../assets/img/user_0608_04.jpg") no-repeat center;
  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.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.3);
    color: #ffffff;
    .loding_img{
     width: 50px;
     height: 50px;
    }
   }
  }
 }
 </style>

總結

到此這篇關於vue呼叫本地攝像頭實現拍照功能的文章就介紹到這了,更多相關vue呼叫本地攝像頭實現拍照內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！