web网页调用电脑摄像头拍取照片

之前用的是element-ui的上传图片组件，但是突然变更需求，要求相机拍摄，不让上传文件夹图片，并且上传至服务器

我们分为四步

第一步检查当前设备是否有摄像设备

window 身上自带了一个 navigator 属性，这个对象有一个叫做 mediaDevices 的属性是我们即将用到的。

let navigator = window.navigator.mediaDevices;let devices = await navigator.enumerateDevices();console.log(navigator)

我们先看一下这个对象有哪些方法，你也许会看到下面的场景，会发现这个属性身上只有一个值为 null 的 ondevicechange 属性，不要怕，真正要用的方法其实在它的原型身上。

让我们点开它的原型属性，注意下面这两个方法，这是我们本章节的主角。

我们到这一步只是需要判断当前设备是否有摄像头，我们先调取 enumerateDevices 函数来查看当前媒体设备是否存在。它的返回值是一个 promise 类型，我们直接用 async 和 await 来简化一下代码。

  let navigator = window.navigator.mediaDevices;  let devices = await navigator.enumerateDevices();   console.log(devices);

从上图可以看出，我的电脑有两个音频设备和一个视频设备，那么我们就可以放下进行下一步了。

第二部获取摄像头

//html部分    //js部分      navigator        .getUserMedia({          video: {            width: 500,            height: 500,          },        })        .then((mediaStream) => {          this.video = document.querySelector("video");          this.video.srcObject = mediaStream;          this.video.onloadedmetadata = function (e) {            video.play();          };        })        .catch((err) => {          console.log(err);        });

运行之后会显示

第三步点击拍摄按钮进行截取照片

//拍摄按钮事件    clic() {      const canvas = document.createElement("canvas");      canvas.width = 200;      canvas.height = 200;      let ctx = canvas.getContext("2d");      ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);      let image = new Image();      let myImage = canvas.toDataURL("image/png");      image.src = canvas.toDataURL("image/png");      this.dataURLtoFile(myImage, "signature.png");      this.videoVisible = false;  //相机展示画面是弹窗，这里是关闭弹窗      return image;    },

第四步将截取的图片转为base64字符串上传

    dataURLtoFile(dataurl, filename) {      //将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）      var arr = dataurl.split(","),        mime = arr[0].match(/:(.*?);/)[1],        bstr = atob(arr[1]),        n = bstr.length,        u8arr = new Uint8Array(n);      while (n--) {        u8arr[n] = bstr.charCodeAt(n);      }      let fileList = new File([u8arr], filename, { type: mime });      this.update(fileList); //图片上传      return new File([u8arr], filename, { type: mime });    },    //上传    update(file) {      let param = new FormData(); //创建form对象      param.append("file", file, file.name); //通过append向form对象添加数据      let url = process.env.VUE_APP_BASE_API + "/file/upload";      let headers = {        Authorization: "Bearer " + getToken(),      };      axios        .post(url, param, { headers: headers })        .then((response) => {        //这里是接口返回的数据用于展示          this.lvimage.push(response.data.data.url);          }        })        .catch((e) => {});    },

完整代码

html部分

//这里是上传图片以及图片展示标签                                                                                         //弹窗里面显示拍摄的内容                       拍摄          

JS部分

import axios from "axios";//data里面定义的数据 videoVisible: false, video: "", lvimage: [],//methods里面的方法//点击上传按钮的事件    async uploadsuccess() {      this.videoVisible = true;      let navigator = window.navigator.mediaDevices;      let devices = await navigator.enumerateDevices();      console.log(devices);      navigator        .getUserMedia({          video: {            width: 500,            height: 500,          },        })        .then((mediaStream) => {          this.video = document.querySelector("video");          this.video.srcObject = mediaStream;          this.video.onloadedmetadata = function (e) {            video.play();          };        })        .catch((err) => {          console.log(err);        });    },    //点击拍摄按钮的事件      clic() {      const canvas = document.createElement("canvas");      canvas.width = 200;      canvas.height = 200;      let ctx = canvas.getContext("2d");      ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);      let image = new Image();      let myImage = canvas.toDataURL("image/png");      image.src = canvas.toDataURL("image/png");      this.dataURLtoFile(myImage, "signature.png");      this.videoVisible = false;      return image;    },    //将图片转为base64        dataURLtoFile(dataurl, filename) {      //将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）      var arr = dataurl.split(","),        mime = arr[0].match(/:(.*?);/)[1],        bstr = atob(arr[1]),        n = bstr.length,        u8arr = new Uint8Array(n);      while (n--) {        u8arr[n] = bstr.charCodeAt(n);      }      let fileList = new File([u8arr], filename, { type: mime });      this.update(fileList); //图片上传      return new File([u8arr], filename, { type: mime });    },        //上传服务器    update(file) {      let param = new FormData(); //创建form对象      param.append("file", file, file.name); //通过append向form对象添加数据      let url = process.env.VUE_APP_BASE_API + "/file/upload";      let headers = {        Authorization: "Bearer " + getToken(),      };      axios        .post(url, param, { headers: headers })        .then((response) => {          if (response.data.code == 200) {            if (this.uplodebtn == 1) {              this.lvimage.push(response.data.data.url);            } else if (this.uplodebtn == 2) {              this.djimage.push(response.data.data.url);            } else {              this.zsimage.push(response.data.data.url);            }          }        })        .catch((e) => {});    },