Vue调用PC摄像头实现拍照功能

<template>  <div class="camera-box">    <video id="video" :width="videoWidth" :height="videoHeight" v-show="!imgSrc"></video>    <canvas id="canvas" :width="videoWidth" :height="videoHeight" v-show="imgSrc"></canvas>    <p class="camera-p">{{!imgSrc?'提示：请将头像居中按"拍照"键确认':''}}</p>    <el-button type="primary" @click="setImage" v-if="!imgSrc" class="camera-btn">拍照</el-button>    <el-button type="primary" v-if="imgSrc" @click="setFileUpload" class="camera-btn">上传</el-button>  </div></template><script>  import {setFileUpload, deleteFileUpload, addUserCard } from "@/api/houseApi";  export default {    name: 'Camera',    props: {      //【必选】CameraDialog弹窗显示状态      show: {type: Boolean},      //【可选】配合原生input本地上传，用于替换时执行删除      deleteData: {type: Object}    },    data() {      return {        videoWidth: '401',        videoHeight: '340',        thisCancas: null,        thisContext: null,        thisVideo: null,        imgSrc: ``,      }    },    mounted() {      if (this.show) this.getCompetence()    },    methods: {      /*       *@author Brady       *@Time 2019/9/5       *@function  调用权限       *****************************************/      getCompetence() {        var _this = this        this.thisCancas = document.getElementById('canvas')        this.thisContext = this.thisCancas.getContext('2d')        this.thisVideo = document.getElementById('video')        // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象        if (navigator.mediaDevices === undefined) {          navigator.mediaDevices = {}        }        // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象        // 使用getUserMedia，因为它会覆盖现有的属性。        // 这里，如果缺少getUserMedia属性，就添加它。        if (navigator.mediaDevices.getUserMedia === undefined) {          navigator.mediaDevices.getUserMedia = function (constraints) {            // 首先获取现存的getUserMedia(如果存在)            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia            // 有些浏览器不支持，会返回错误信息            // 保持接口一致            if (!getUserMedia) {              return Promise.reject(new Error('getUserMedia is not implemented in this browser'))            }            // 否则，使用Promise将调用包装到旧的navigator.getUserMedia            return 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 {            // 避免在新的浏览器中使用它，因为它正在被弃用。            _this.thisVideo.src = window.URL.createObjectURL(stream)          }          _this.thisVideo.onloadedmetadata = function (e) {            _this.thisVideo.play()          }        }).catch(err => {          console.log(err)        })      },      /*       *@author Brady       *@Time 2019/9/5       *@function  绘制图片       *****************************************/      setImage() {        var _this = this        // 点击，canvas画图        _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)        // 获取图片base64链接        var image = this.thisCancas.toDataURL('image/png')        _this.imgSrc = image        // console.log(_this.imgSrc)        // this.$emit('refreshDataList', this.imgSrc)      },      /*       *@author Brady       *@Time 2019/9/5       *@function  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})      },      /*       *@author Brady       *@Time 2019/9/5       *@function  关闭摄像头       *****************************************/      stopNavigator() {        this.thisVideo.srcObject.getTracks()[0].stop()      },      //上传图片      setFileUpload() {        //编辑档案-上传人脸照片        if(this.deleteData) {          if (this.deleteData.imagePath) {            deleteFileUpload({id: this.deleteData.id, filePath: this.deleteData.imagePath})              .then(res => {                setFileUpload({image: this.imgSrc})                  .then(res => {                    this.$emit('fileUpload', res.retData.filePath, res.retData.imagePath)                    addUserCard({userId: this.deleteData.userid, cardType: this.deleteData.cardType, userAuditInfo: res.retData.imagePath})                      .then(res => {                        this.$message({message: "上传成功", type: "success"})                      })                      .catch(err => {                        console.log(err)                      })                  })                  .catch(err => {                    console.log(err)                  })              })              .catch(err => {                console.log(err)              })          } else {            setFileUpload({image: this.imgSrc})              .then(res => {                this.$emit('fileUpload', res.retData.filePath, res.retData.imagePath)                addUserCard({userId: this.deleteData.userid, cardType: this.deleteData.cardType, userAuditInfo: res.retData.imagePath})                  .then(res => {                    this.$message({message: "上传成功", type: "success"})                  })                  .catch(err => {                    console.log(err)                  })              })              .catch(err => {                console.log(err)              })          }        } else {          //添加住户-上传人脸照片          setFileUpload({image: this.imgSrc})            .then(res => {              // console.log(res)              this.$message({message: "上传成功", type: "success"})              this.$emit('fileUpload', res.retData.filePath, res.retData.imagePath)            })            .catch(err => {              console.log(err)            })        }      },    },    watch: {      show(val) {        if (val) {          this.imgSrc = ``          this.getCompetence()        } else {          this.stopNavigator()        }      },    }  }</script><style lang="less">  .camera-box {    margin: 0 auto;    text-align: center;    .camera-p {      height: 17px;      line-height: 17px;      font-size: 12px;      font-family: "PingFang SC";      font-weight: 400;      color: rgba(154, 154, 154, 1);      text-align: left;    }    .camera-btn {      margin-top: 20px;    }  }</style>

<template>  <div id="camera-dialog">    <el-dialog            title="拍摄照片"            :visible.sync="dialogVisible"            top="5vh"            width="481px"            @close="dialogCancle"            :close-on-click-modal="false"            :before-close="dialogCancle"    >      <Camera :show="dialogVisible" :deleteData="deleteData" @fileUpload="fileUpload"></Camera>      <span slot="footer" class="dialog-footer">          <!-- <el-button @click="dialogCancle">取 消</el-button> -->        <!-- <el-button type="primary">确 定</el-button> -->        </span>    </el-dialog>  </div></template><script>  import Camera from "@/page/house/Camera.vue"  export default {    name: 'CameraDialog',    props: {      dialogVisible: {type: Boolean},      deleteData: {type: Object}    },    components: {      Camera    },    data() {      return {        filePath: ``,        imagePath: ``,      }    },    methods: {      //关闭弹窗      dialogCancle() {        this.$emit('dialogCancle', false, this.filePath, this.imagePath);      },      //获取人脸照片地址      fileUpload(filePath, imagePath) {        this.filePath = filePath        this.imagePath = imagePath        this.dialogCancle()      }    }  }</script><style scoped></style>

<template>  <div>    <div class="form-thumb">     <img :src="filePath" alt="">      <i class="delete-btn" @click="deleteUploadFile" v-if="deleteData.imagePath">x</i>    </div>    <div class="upload-btn">       <input type="file" name="userAuditInfo" id="userAuditInfo" @change="getUploadFile" ref="inputFile">       <el-button type="defualt" size="small" @click="localUploadFile">本地上传</el-button>       <el-button type="default" size="small" @click="dialogVisible=true">拍摄照片</el-button>     </div>    <!-- 拍摄照片弹窗 -->    <CameraDialog :dialogVisible="dialogVisible" @dialogCancle="dialogCancleCamera" :deleteData="deleteData" />  </div> </template><script>  import CameraDialog from "./CameraDialog.vue"  import { setFileUpload, deleteFileUpload, addUserCard } from "@/api/houseApi.js"  export default {    data() {      return {        filePath: require('@/assets/images/null.png'), //身份证头像        dialogVisible: false,        //操作删除人脸照片相关字段        deleteData: {          userid: this.$route.query.userId,          id: ``,          cardType: 4,          imagePath: ``,        }   } }, methods: {      //模拟点击本地上传人脸照片      localUploadFile() {        this.$refs.inputFile.click()      },      //本地上传人脸照片      getUploadFile() {        let input = document.getElementById('userAuditInfo')        let file = input.files[0]        this.getBase64(file)          .then(res => {            if (this.deleteData.imagePath) {              deleteFileUpload({id: this.deleteData.id, filePath: this.deleteData.imagePath})                .then(() => {                  this.setFileUpload(res)                })            } else {              this.setFileUpload(res)            }          })          .catch(err => {            console.log(err)          })      },      //上传人脸照片      setFileUpload(res) {        setFileUpload({image: res})          .then(res => {            this.filePath = res.retData.filePath            this.deleteData.imagePath = res.retData.imagePath            addUserCard({userId: this.deleteData.userid, cardType: this.deleteData.cardType, userAuditInfo: res.retData.imagePath})              .then(res => {                this.$message({message: res.retInfo, type: "success"})                //用于更新数据，此方法未展示                this.getInfo()              })              .catch(err => {                console.log(err)              })          })          .catch(err => {            console.log(err)          })      },      //转base64      getBase64(file) {        return new Promise(function (resolve, reject) {          let reader = new FileReader();          let imgResult = "";          reader.readAsDataURL(file);          reader.onload = function () {            imgResult = reader.result;          };          reader.onerror = function (error) {            reject(error);          };          reader.onloadend = function () {            resolve(imgResult);          };        });      },      //删除人脸照片      deleteUploadFile() {        this.$confirm(`确认删除?`, '提示', {          confirmButtonText: '确定',          cancelButtonText: '取消',          type: 'warning'        }).then(() => {          deleteFileUpload({id: this.deleteData.id, filePath: this.deleteData.imagePath})            .then(res => {              this.$message({message: res.retInfo, type: "success"})              this.filePath = require('@/assets/images/null.png')              this.deleteData.imagePath = ''            })            .catch(err => {              console.log(err)            })        }).catch(() => {});      },      //Dialog弹窗取消、获取上传人脸照片      dialogCancleCamera(str, filePath, imagePath) {        this.dialogVisible = str        // this.houseInfo.filePath = filePath        // this.houseInfo.userAuditInfo = imagePath        this.filePath = filePath        this.deleteData.imagePath = imagePath        this.getInfo()      },  }  }</script> <style scoped="scoped">  .upload-btn {    position: relative;    margin: 20px 12px 0 0;    text-align: right;  }  input#userAuditInfo {    position: absolute;    display: inline-block;    width: 80px;    height: 32px;    top: 0;    cursor: pointer;    font-size: 0;    z-index: -1;    /*opacity: 0;*/  }  .delete-btn {    position: absolute;    top: -6px;    right: -6px;    display: inline-block;    width: 16px;    height: 16px;    line-height: 14px;    background: rgba(251, 135, 66, 1);    border-radius: 8px;    text-align: center;    font-size: 12px;    color: #fff;    cursor: pointer;  }</style>