Local call the front camera to realize camera (vue)

Since the call camera are authorized only need to use https domain name can only be used locally run online.

<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>
      <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: { 
// invoking permission (turning on the camera function) 
      getCompetence () {
         var _this = the this 
        the this= document.getElementById .thisCancas ( 'canvasCamera' )
         the this .thisContext = the this .thisCancas.getContext ( '2d' )
         the this .thisVideo = document.getElementById ( 'videocamera' )
         // older versions of the browser might not support mediaDevices, we first, an empty object disposed 
        IF (navigator.mediaDevices === undefined) { 
          navigator.mediaDevices = {} 
        } 
        // Some browsers implements part mediaDevices, we can not only allocate an object 
        // use getUserMedia, because it overwrites the existing property. 
        // Here, if the lack of getUserMedia property, add it. 
        IF (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (the Constraints) {
             // first get the existing getUserMedia (if present) 
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
             // Some browsers do not support, it will return an error message 
            // to maintain a consistent interface to 
            IF (! getUserMedia) {
               return Promise.reject ( new new Error ( 'getUserMedia in the this iS not Implemented the Browser' )) 
            } 
            // otherwise, the package will be called Promise to the old navigator.getUserMedia 
            return  new 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 {
            //Avoid using it in a new browser because it is being abandoned. 
            = _this.thisVideo.src window.URL.createObjectURL (Stream) 
          } 
          _this.thisVideo.onloadedmetadata = function (E) { 
            _this.thisVideo.play () 
          } 
        }). the catch (ERR => { 
          the console.log (ERR) 
        } ) 
      } 
//   draw a picture (camera) 

      setImage () { 
        var _this = the this 
        // clicks, canvas drawing 
        _this.thisContext.drawImage (_this.thisVideo, 0, 0 , _this.videoWidth, _this.videoHeight)
         // Gets pictures base64 link
        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()
      }
    },

  }
   
  </script>
  <style lang="scss" 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: 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>