<template>
  <div class="camera_outer">
    <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
    <canvas id="canvasCamera" style="display:none;" :width="videoWidth" :height="videoHeight"></canvas>
    <div style="display: flex;justify-content: space-between;align-items: center;">
      <el-button type="primary" @click="setImage()">拍照</el-button>
      <el-upload style="display: flex;align-items: center;" :headers="headers" :show-file-list="false"
        :on-success="handleAvatarSuccess" class="avatar-uploader" action="/admin/sys-file/upload">
        <el-button type="primary">上傳照片</el-button>
      </el-upload>
      <el-button @click="getCompetence()">打開攝像頭</el-button>
    </div>
  </div>
</template>
<script>
import store from '@/store'
import { uploadImg } from '@/api/visitinfo'
export default {
  data() {
    return {
      videoWidth: 300,
      videoHeight: 300,
      imgSrc: '',
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      headers: {
        Authorization: 'Bearer ' + store.getters.access_token
      }
    }
  },
  mounted() {
    this.getCompetence()
  },
  destroyed() {
    this.stopNavigator()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.$emit('refreshDataList', res.data.url)
    },
    // 調(diào)用權(quán)限（打開攝像頭功能）
    getCompetence() {
      var _this = this
      this.thisCancas = document.getElementById('canvasCamera')
      this.thisContext = this.thisCancas.getContext('2d')
      this.thisVideo = document.getElementById('videoCamera')
      // 舊版本瀏覽器可能根本不支持mediaDevices，我們首先設(shè)置一個空對象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {}
      }
      // 一些瀏覽器實現(xiàn)了部分mediaDevices，我們不能只分配一個對象
      // 使用getUserMedia，因為它會覆蓋現(xiàn)有的屬性。
      // 這里，如果缺少getUserMedia屬性，就添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          // 首先獲取現(xiàn)存的getUserMedia(如果存在)
          var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
          // 有些瀏覽器不支持，會返回錯誤信息
          // 保持接口一致
          if (!getUserMedia) {
            return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
          }
          // 否則，使用Promise將調(diào)用包裝到舊的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, 0, 0, _this.videoWidth, _this.videoHeight)
      // 獲取圖片base64鏈接
      var image = this.thisCancas.toDataURL('image/png')
      _this.imgSrc = image
      const file = image
      const time = (new Date()).valueOf()
      const name = time + '.png'
      const conversions = this.base64ToFile(file, name)
      const data = new FormData()
      data.append('file', conversions)
      uploadImg(data).then(res => {
        if (res.data.code == 0) {
          this.$emit('refreshDataList', res.data.data.url)
        }
      })
    },
    // base64圖片轉(zhuǎn)file的方法（base64圖片, 設(shè)置生成file的文件名）
    base64ToFile(base64, fileName) {
      // 將base64按照 , 進行分割 將前綴  與后續(xù)內(nèi)容分隔開
      const data = base64.split(',')
      // 利用正則表達式 從前綴中獲取圖片的類型信息（image/png、image/jpeg、image/webp等）
      const type = data[0].match(/:(.*?);/)[1]
      // 從圖片的類型信息中 獲取具體的文件格式后綴（png、jpeg、webp）
      const suffix = type.split('/')[1]
      // 使用atob()對base64數(shù)據(jù)進行解碼  結(jié)果是一個文件數(shù)據(jù)流 以字符串的格式輸出
      const bstr = window.atob(data[1])
      // 獲取解碼結(jié)果字符串的長度
      let n = bstr.length
      // 根據(jù)解碼結(jié)果字符串的長度創(chuàng)建一個等長的整形數(shù)字數(shù)組
      // 但在創(chuàng)建時 所有元素初始值都為 0
      const u8arr = new Uint8Array(n)
      // 將整形數(shù)組的每個元素填充為解碼結(jié)果字符串對應(yīng)位置字符的UTF-16 編碼單元
      while (n--) {
        // charCodeAt()：獲取給定索引處字符對應(yīng)的 UTF-16 代碼單元
        u8arr[n] = bstr.charCodeAt(n)
      }
      // 利用構(gòu)造函數(shù)創(chuàng)建File文件對象
      // new File(bits, name, options)
      const file = new File([u8arr], `${fileName}.${suffix}`, {
        type: type
      })
      // 將File文件對象返回給方法的調(diào)用者
      return file
    },
    // 關(guān)閉攝像頭
    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.png") 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, 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: 300px;
      height: 300px;
    }
    .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>

<template>
  <div>
       <TakePhotos ref="TakePhotos" @refreshDataList="refreshDataList" />  
  </div>
</template>
<script>
export default {
  methods: {
    refreshDataList(imgSrc) {
    // 這里返回服務(wù)器圖片的地址
      console.log(imgSrc)
    },
}
</script>