<template>
  <div style="width: 100%;height: 100%;">
    <div class="testTracking">
      <canvas style="display:none;" id="myCanvas" ref="canvas" :width="videoWidth" :height="videoHeight"></canvas>
      <!--图片展示-->
      <video ref="video" id="myVideo" :width="videoWidth" :height="videoHeight" autoplay style="display: block;margin:0 auto;border: 2px solid #333333;"></video>
      <!--确认-->
      <Button type="primary" @click="setImage" class="takePhoto">拍照</Button>
      <div id="res"></div>
    </div>
  </div>
</template>

<script>
  import {faceLogin} from "@/api/testModel";
  export default {
    props:['src'],
    data () {
      return {
        videoWidth: 500,
        videoHeight: 400,
        videoArr:[],//所有的摄像头
        modelSel:'',//
        myInterval: null,
        imgSrc: '',
        isHasFace:false,//默认没有人脸
        tracker:null,
      }
    },
    created(){
    },
    mounted(){
      this.callCamera();
      this.changePhoto();
    },
    methods: {
      // 调用摄像头
      callCamera () {
        // H5调用电脑摄像头API
        navigator.mediaDevices.getUserMedia({
          video: true
        }).then(success => {
          // 摄像头开启成功
          this.$refs['video'].srcObject = success;
          // 实时拍照效果
          this.$refs['video'].play()
        }).catch(error => {
          alert('摄像头开启失败，请检查摄像头是否可用！')
        })
      },
      // 拍照
      setImage () {
        let canvas = document.getElementById("myCanvas");
        let context = canvas.getContext('2d');
        let video = document.getElementById("myVideo");
        context.drawImage(video,0,0,90,68);
        let image = new Image();
        image = canvas.toDataURL('image/png');
        document.getElementById('res').innerHTML = '<img src="'+image+'">';
        let imgData = {base64:image};
        faceLogin(imgData).then((res) => {
          if (res.code >= 200) {
            this.$message.success("成功");
          }
        });
      },
      // 关闭摄像头
      closeCamera () {
        if (!this.$refs['video'].srcObject) return;
        let stream = this.$refs['video'].srcObject;
        let tracks = stream.getTracks();
        tracks.forEach(track => {
          track.stop()
        });
        this.$refs['video'].srcObject = null
      },


      //切换本地摄像头
      changePhoto(){
        /**得到所有的设备*/
        navigator.mediaDevices.enumerateDevices()
          .then((devices)=> {
            this.videoArr = [];
            devices.forEach((item)=> {
              if(item.kind == 'videoinput'){
                this.videoArr.push({
                  'label': item.kind,
                  'id': item.deviceId
                })
              }
            });
          })
          .catch(err=>{
          });
      },
      /**打开摄像头*/
      getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
          //最新的标准API
          navigator.mediaDevices.getUserMedia(constraints).then(success=>{
            // 摄像头开启成功
            this.$refs['video'].srcObject = success;
            // 实时拍照效果
            this.$refs['video'].play()
          }).catch(error);

        } else if (navigator.webkitGetUserMedia) {
          //webkit核心浏览器
          navigator.webkitGetUserMedia(constraints,success, error)
        } else if (navigator.mozGetUserMedia) {
          //firfox浏览器
          navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
          //旧版API
          navigator.getUserMedia(constraints, success, error);
        }
      },
      setFace(data){
        this.isHasFace = data;
      }



    },
  }
</script>

<style scoped>

  .testTracking {
    width: 100%;
    position: relative;
  }
  .takePhoto{
    margin: 30px auto;
    display: block;
  }
</style>

