人脸登陆——Vue2 调用浏览器摄像头拍照及图片上传组件

原创 已于 2026-01-20 20:10:31 修改 · 261 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#vue.js #前端 #javascript #人脸登陆 #摄像头拍照
于 2026-01-20 20:04:53 首次发布

目录

1、需求背景

2、实现步骤

1）开发环境开启https

2）摄像头初始化（默认优先前置摄像头）

3）打开，切换，关闭摄像头

4）拍照

5）完整源码

3、应用效果

1、需求背景

当前vue图片组件有上传图片组件，截图组件，预览图片组件，但是没有从电脑摄像头或手机摄像头获取现场照片的能力，为了实现人脸注册和人脸登陆，这篇博文就来实现这个功能。

实现网页调用计算机摄像头，需要使用https协议。

2、实现步骤

1）开发环境开启https

在vue-config.js文件中找到devServer配置，新增 https:true选项即可以开启。

devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    https: true,
    proxy: {
      '/admin-api/': { // 匹配以//admin-api开头的才生效 
        target: "http://192.168.1.222:48080",  // 实际请求主机，端口，协议
        changeOrigin: true,                 // 如果接口跨域这里就要这个参数配置
        secure:false,                       // 如果实际请求地址是https接口，则设置为true
        pathRewrite: {
          '^/admin-api/': '/admin-api/'     // 将本地 ~/admin-api/ping 请求转发为请求 http://192.168.1.222:48080/admin-api/ping
        }               
      },

    },
    disableHostCheck: true
  },

2）摄像头初始化（默认优先前置摄像头）

要调用网页摄像头，除了开启https服务，还需要对浏览器进行适配，不同的浏览器获取UserMedia方法略有不同，initUserMedia方法实现初始化工作，代码如下：

initUserMedia(){
      // 旧版本浏览器可能根本不支持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)
          })
        }
      }
    },

摄像头初始化参数参考，前置摄像头facingMode: "user",

     constraints: { 
        audio: false,                                 // 是否打开麦克风
        video: { 
          width: 400,                                 
          height: 400, 
          frameRate: { ideal: 24, max: 24 },          // 视频帧频，不同设备的性能不一样，不宜太高
          transform: 'scaleX(-1)',
          facingMode: "user",                         // 优先打开前置摄像头
        } 
      },

3）打开，切换，关闭摄像头

// 调用权限（打开摄像头功能）
    async openCamera() {
      this.closeCamera();
      this.openVideo = true;
      this.loadingVideo = true;
      this.video = this.$refs.video
      this.initUserMedia()
      if(!this.constraints.video.deviceId){
        var devices = await navigator.mediaDevices.enumerateDevices()
        this.videoList = devices.filter(d=>d.kind=='videoinput');
        if(this.videoList.length<1) {
          this.$modal.msgError("没有检测到视频设备")
          return;
        }
        // console.log(this.videoList);
        var deviceId = this.videoList[0].deviceId;
        if(deviceId) {
          this.deviceId = deviceId;
          this.constraints.video.deviceId={ exact: deviceId}
        }
      }
      
      navigator.mediaDevices.getUserMedia(this.constraints).then((stream) =>{
       
        this.stream = stream
        // 旧的浏览器可能没有srcObject
        if ('srcObject' in this.video) {
          //  console.log("srcObject")
          this.video.srcObject = this.stream 
          this.$emit("ready", this.stream)
        } else {
          // 避免在新的浏览器中使用它，因为它正在被弃用。
          this.video.src = window.URL.createObjectURL(this.stream )
        }
        this.video.onloadedmetadata = (e)=> {
          this.video.play();
          this.loadingVideo = false;
        }
        this.$emit("ready", this.stream)

      }).catch(err => {
        console.log(err)
        this.openVideo = false;
          this.loadingVideo = false;
      })
    },

其中，这一段实现多摄像头探测

     if(!this.constraints.video.deviceId){
        var devices = await navigator.mediaDevices.enumerateDevices()
        this.videoList = devices.filter(d=>d.kind=='videoinput');
        if(this.videoList.length<1) {
          this.$modal.msgError("没有检测到视频设备")
          return;
        }
        // console.log(this.videoList);
        var deviceId = this.videoList[0].deviceId;
        if(deviceId) {
          this.deviceId = deviceId;
          this.constraints.video.deviceId={ exact: deviceId}
        }
      }

摄像头切换

   changeVideo(index){
      var deviceId = this.videoList[index].deviceId;
      if(this.deviceId == deviceId) return;
      this.deviceId = deviceId;
      this.closeCamera();
      this.constraints.video.deviceId={ exact: deviceId}
      this.openCamera();
    },

关闭摄像头

// 关闭摄像头
    closeCamera() {
      if(this.video && this.video.srcObject){
        this.video.srcObject.getTracks().forEach(track => track.stop());
        this.video.srcObject = null
      }
      this.stream = undefined;
    },

4）拍照

    //  绘制图片（拍照功能）
    takePhoto() {
      // console.log("takePhoto")
      var canvas = this.$refs.canvas
      var canvasContext = canvas.getContext('2d')
      // 点击，canvas画图
      if(this.video){
        canvasContext.drawImage(this.video, 0, 0, this.width, this.height)
        // 获取图片base64链接
        this.image = canvas.toDataURL('image/png')
        this.$emit("capture", this.image)
      }
    },

5）图片上传及完整源码

新增src\components\VideoRecorder\VideoBox.vue文件

<template>
  <div class="border1 border-round-5" :style="{width:width+'px', height:height+'px'}" style="position:relative;">
    <canvas ref="canvas" style="display:none;" :width="width" :height="height"></canvas>
    <div v-show="openVideo" v-loading="loadingVideo" class="flex-center">
      <video ref="video" :width="width" :height="height" autoplay style=""></video>
    </div>
    <div v-if="videoList.length>1" style="position:absolute; top:10px; left:10px;">
      <span class="margin-r-10 border-round-5 bg-white inline-block color-grey" style="line-height: 30px; width:30px; height:30px; text-align:center;vertical-align:middle;"
       :style="{background: d.deviceId==deviceId?'#66aa6630':'#EEEEEE30'}"
      v-for="(d, index) in videoList" :key="d.deviceId" @click="changeVideo(index)">{{index+1}}</span>
    </div>
  </div>
</template>
<script>
import store from '@/store'
export default {
  name:"VideoBox",
  props: {
    value: String,
    width: {
      type:Number,
      default: 240
    },
    height:{
      type:Number,
      default: 240
    },
  },
  watch:{
    value: {
      handler(val) {
        this.image = val
      }
    },
  },
  data() {
    return {
      constraints: { 
        audio: false, 
        video: { 
          width: 400, 
          height: 400, 
          frameRate: { ideal: 24, max: 24 },
          transform: 'scaleX(-1)',
          // facingMode: "user",
        } 
      },
      deviceId: undefined,
      videoList: [],
      stream: null,
      // 拍照
      video:null,
      image: this.value,
      openVideo: false,
      loadingVideo: false,
      //
      mimeType:'video/webm',
      chunks:[],
    }
  },
  mounted() {
    this.openCamera();
  },
  destroyed() {
    this.closeCamera()
  },
  methods: {
    changeVideo(index){
      var deviceId = this.videoList[index].deviceId;
      if(this.deviceId == deviceId) return;
      this.deviceId = deviceId;
      this.closeCamera();
      this.constraints.video.deviceId={ exact: deviceId}
      this.openCamera();
    },
    removeImage(e){
      if(e && e.stopPropagation){
        e.stopPropagation();
      }
      this.image = null;
      this.$emit("input", this.image);
    },
    initUserMedia(){
      // 旧版本浏览器可能根本不支持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)
          })
        }
      }
    },
    // 调用权限（打开摄像头功能）
    async openCamera() {
      this.closeCamera();
      this.openVideo = true;
      this.loadingVideo = true;
      this.video = this.$refs.video
      this.initUserMedia()
      if(!this.constraints.video.deviceId){
        var devices = await navigator.mediaDevices.enumerateDevices()
        this.videoList = devices.filter(d=>d.kind=='videoinput');
        if(this.videoList.length<1) {
          this.$modal.msgError("没有检测到视频设备")
          return;
        }
        // console.log(this.videoList);
        var deviceId = this.videoList[0].deviceId;
        if(deviceId) {
          this.deviceId = deviceId;
          this.constraints.video.deviceId={ exact: deviceId}
        }
      }
      
      navigator.mediaDevices.getUserMedia(this.constraints).then((stream) =>{
       
        this.stream = stream
        // 旧的浏览器可能没有srcObject
        if ('srcObject' in this.video) {
          //  console.log("srcObject")
          this.video.srcObject = this.stream 
          this.$emit("ready", this.stream)
        } else {
          // 避免在新的浏览器中使用它，因为它正在被弃用。
          this.video.src = window.URL.createObjectURL(this.stream )
        }
        this.video.onloadedmetadata = (e)=> {
          this.video.play();
          this.loadingVideo = false;
        }
        this.$emit("ready", this.stream)

      }).catch(err => {
        console.log(err)
        this.openVideo = false;
          this.loadingVideo = false;
      })
    },
    // 关闭摄像头
    closeCamera() {
      // console.log("closeCamera")
      if(this.video && this.video.srcObject){
        this.video.srcObject.getTracks().forEach(track => track.stop());
        this.video.srcObject = null
      }
      this.stream = undefined;
    },
    //  绘制图片（拍照功能）
    takePhoto() {
      // console.log("takePhoto")
      var canvas = this.$refs.canvas
      var canvasContext = canvas.getContext('2d')
      // 点击，canvas画图
      if(this.video){
        canvasContext.drawImage(this.video, 0, 0, this.width, this.height)
        // 获取图片base64链接
        this.image = canvas.toDataURL('image/png')
        this.$emit("capture", this.image)
      }
    },
    
  }
}

</script>

3、应用效果

新建src\views\system\user\profile\UserFaceList.vue 内容如下：

<template>
  <div>
    <div class="">
      <div>
        <el-image v-if="image" :src="image" style="width:300px;height:300px"/>
        <VideoBox v-show="!image" class="border1 border-round-5" ref="videoBox" :width="300" :height="300" @click="takePhoto"  @capture="handleCapture" ></VideoBox>
        <div class="flex-row-between padding-20" >
          <el-button type="primary" @click="takePhoto">{{image?'重拍':'拍照'}}</el-button>
          <el-button  class="margin-l-20" type="primary">注册</el-button>
          <div class="fill-rest"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getDictDatas, DICT_TYPE } from '@/utils/dict'
import * as userFace from "@/api/system/userFace";
import VideoBox from '@/components/VideoRecorder/VideoBox';
export default {
  name: "UserFaceList",
  components:{
    VideoBox
  },
  data() {
    return {
      image: undefined,
      
    };
  },
  mounted(){
  },
  destroyed(){

  },
  methods: {
    startCamera(){
      if(this.$refs.videoBox){
        this.$refs.videoBox.openCamera();
      }
    },
    takePhoto(){
      if(this.image) {
        this.image = undefined;
        if(this.$refs.videoBox){
          this.$refs.videoBox.openCamera();
        }
      } else {
        if(this.$refs.videoBox){
          this.$refs.videoBox.takePhoto();
          this.$refs.videoBox.closeCamera();
        }
      }
    },
    handleCapture(image){
      console.log("handleCapture")
      this.image = image;
    },
    
    
  }
};
</script>

在src\views\system\user\profile\index.vue中调用UserFaceList组件

            <el-tab-pane label="人脸登陆" name="userFace">
              <UserFaceList v-if="activeTab=='userFace'" />
            </el-tab-pane>

效果如下

后续设计system_user_face表结合system_users一起实现多对一人脸登陆。

=============    相关博文   ============

钉钉扫码登录ruoyi-vue-pro——超详细

使用码云gitee登录ruoyi-vue-pro——坑比较多

Vue2 打包部署后通过修改配置文件修改全局变量——实时生效

只需3句让Vue3 打包部署后通过修改配置文件修改全局变量——实时生效

=============    相关博文   ============

zhengxianyi515
关注
Vue2 - 详细实现调用浏览器摄像头拍照并生成图片预览，开启摄像头并进行拍照，支持将抓拍的图像保存到用户本地或上传到服务器、调取前置摄像头和后置摄像头，vue实现调用摄像头，电脑或手机调用摄像头拍照
🏆 前端领域优质创作者
10-03 1万+
vue2，nuxt2，摄像头，vue网站打开摄像头拍照，vue项目调用摄像头实现拍照功能，vue调用电脑端摄像头实时拍照，解决调用摄像头权限无法弹出，打不开摄像头，vue如何调用手机的摄像头，调用本地摄像头实现拍照，浏览器不弹摄像头权限了，如何不使用https运行测试，拍照后怎么保存，照相后上传到后端服务器，开启摄像头黑屏，如何默认后置摄像头，网页开启电脑摄像头并照相，前置拍照，vue2如何调用手机摄像头进行拍摄，拒绝权限后不再弹出了，微信公众号网页，摄像头报错，拍照左右镜像反了，浏览器不兼容怎么办，前置摄
vue2 实现网页端调用摄像头拍照及录像功能
qq_17118997的博客
11-07 2065
网页实现调用手机摄像头拍照录像
vue2项目 H5页面调用摄像头拍照
weixin_53322542的博客
11-14 2095
【代码】vue2项目 H5页面调用摄像头拍照。
vue2调用摄像头录制视频
qq_46738283的博客
12-29 1407
2.定义全局变量 3.获取摄像头 navigator.mediaDevices.getUserMedia() 4.MediaRecorder类 媒体录制功能主要是基于MediaRecorder这个类来实现的基本格式 参数说明：MediaRedorder的options参数说明 MediaRecorder的一些API MediaRecorder.start(timeSlice)开始录制媒体，timeSlice为可选的，如何设置了会按照时间切片存储数据。暂停录制结束录制，此时会触发包括最终Blob数据的da
Vue2调用电脑摄像头权限，并拍照
RubinQX的博客
04-24 2775
电脑端需要调取用户摄像头进行拍照
vue2 pc端调用摄像头
Fairy4sqy的博客
02-08 1152
vue2 pc端调用摄像头权限
Vue实现拍照功能
前端卷王小白的博客
05-31 2513
Vue3,vue拍照功能
Vue+tracking.js 实现前端人脸检测
weixin_30729609的博客
07-30 2955
项目中需要实现人脸登陆功能，实现思路为在前端检测人脸，把人脸照片发送到后端识别，返回用户token登陆成功 前端调用摄像头使用tracking.js检测视频流中的人脸，检测到人脸后拍照上传后端。 后端使用face_recognition人脸识别库，使用Flask提供restfulAP供前端调用 实现效果如下图： 登陆界面： 摄像头检测人脸界面： 前端代码如下： ...
vue&h5获取手机前置摄像头（安卓&ios），input capture属性和navigator.mediaDevices
Nine_91的博客
08-05 1万+
解决安调用前置摄像头无效，以及 navigator.mediaDevices使用注意事项
在Vue项目中调用摄像头
最新发布
ItContentShare
02-27 1955
的实现，建议使用Vue3组合式API进行模块化封装。：覆盖旧版webkit/moz前缀API。：需处理不同浏览器的MIME类型差异。：主流错误类型分类提示。完整示例代码可参考来源。
vue项目中调用前置摄像头拍照功能
Zeng的博客
11-13 1084
vue项目中调用相机拍照功能。
vue打开摄像头=＞拍照（原理和代码）=＞base64
Wuxiaoming135的博客
02-28 873
为此，我们需要去创建一个canvas（因为canvas此时不需要显示出来，同时也不需要占用位置，因此可以设置display属性为none）和一个img，当我们点击按钮（这里直接在img上面添加一个@click属性即可，按钮就不添加了）。原理就是，需要通过canvas来关联video起来（内容时刻保持一致），什么时候拍照，就什么时候将vanvas中的图像转成base64格式的数据，再将该数据直接赋值给img的src即可。这些代码都是简单的不要不要的，就不解释了。
vue2 - 实现移动端H5网页调用手机相册选取图片或打开摄像头相机拍照上传，如何在h5网站浏览器中打开本机相册或相机选择相片，H5调用本地相册/相机上传图片详细教程（附图片压缩功能及上传服务器示例）
热门推荐
✅ 精选推荐文章
10-31 1万+
vue2手机H5网页，调起安卓苹果ios手机相册和相机，H5实现调用手机摄像头相册实现图片压缩预览删除，vue项目调用摄像头和相册，H5调用手机摄像头，实时拍照上传，VUE2 H5页面如何唤起手机摄像头拍照上传，H5调起手机端的摄像头，html5调用手机摄像头，实现H5调起手机相机和相册，vue H5拍照上传，手机网站浏览器移动端调取相机或相册，实现拍照上传功能，解决苹果ios手机无法打开相册相机问题，无法唤起摄像头怎么办，调取本机系统的相册，vue h5网页调用相机拍照和相册，实现多张图片上传功能，图片压
Vue调用原生相机拍照或手机相册上传图片
YoungMan_09的博客
08-05 4986
利用input标签的type='file'属性实现文件上传功能
使用vue.js调用摄像头示例
Pastthewind的博客
02-22 1077
【代码】使用vue.js调用摄像头示例。
摄像头上传文件服务器失败,vue打开摄像头拍照并上传至服务器
weixin_33171271的博客
08-04 800
getCompetence(){var_this=thisthis.thisCancas=document.getElementById(‘canvasCamera‘)this.thisContext=this.thisCancas.getContext(‘2d‘)this.thisVideo=document.getElementById(‘videoCamera‘)//旧...
前端使用mediapipe实现人脸识别
qq_64168148的博客
05-13 2145
在前端使用mediapipe实现人脸识别，以vue框架为例，分别对应着识别源是图片还是视频。在项目中引入后，初始化，
浏览器调起摄像头
2301_77487444的博客
10-22 1114
需要注意的是，以上代码只是一个简单的示例，您可能需要添加适当的错误处理和浏览器兼容性检查。还可以使用自定义样式和控件来美化和控制视频流。另外，使用WebRTC调用摄像头要求网站必须通过HTTPS协议提供，因此您需要在HTTPS环境下进行开发和测试。要在浏览器中调用摄像头，您可以使用WebRTC（Web实时通信）技术。
vue浏览器调用摄像头实现拍照上传
qq_56558233的博客
09-19 970
自定义调用摄像头组件，实现调起摄像头拍照上传功能。
vue2使用face-api.js实现，人脸识别
liu3325262991的博客
05-09 5851
使用vue2结合face-api.js实现人脸识别功能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值