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>