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>

 

版权声明：本文为gqx-html原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/gqx-html/p/9965137.html