js vue 在頁面中將攝像頭放在一個標簽里展示，(模仿手機拍照功能)

1.HTML

<video id="video" autoplay class="fileImg"></video>   
<canvas id="canvas" width="640" height="480"></canvas>

　<div class="submitButton buttonData" @click="uploadImg">上傳圖片</div>

2.JS

<script>
　　　　let aVideo = document.getElementById('video');
      let aCanvas = document.getElementById('canvas');
      let ctx = aCanvas.getContext('2d');

      navigator.getUserMedia = navigator.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia ||
          navigator.msGetUserMedia; //獲取媒體對象（這里指攝像頭）
      navigator.getUserMedia({
          video: true
      }, gotStream, noStream); //參數1獲取用戶打開權限；參數二成功打開后調用，並傳一個視頻流對象，參數三打開失敗后調用，傳錯誤信息 


function gotStream(stream) {
    video.src = URL.createObjectURL(stream);
    video.onerror = function() {
        stream.stop();
    };
    stream.onended = noStream;
    video.onloadedmetadata = function() {
        // alert('攝像頭成功打開！');
    };
}

function noStream(err) {
    // alert(err);
}

function uploadImg(){
     ctx.drawImage(aVideo, 0, 0, 640, 480);
     alert(aCanvas.toDataURL('image/png'))     // 得到base64，需要后台將base64轉換並上傳到服務器，返回線上http路徑
      const res = await fileUpload({imgStr: aCanvas.toDataURL('image/png')})   // 調取后台接口

      if (res.data.code == 0){
        this.headImage = res.data.data.string  //得到后台返回路徑
        
      }
}
</script>