Vue实现调用PC端摄像头实时拍照-前端开发

下面我来详细讲解一下Vue实现调用PC端摄像头实时拍照的完整攻略。

下面我来详细讲解一下Vue实现调用PC端摄像头实时拍照的完整攻略。

1. 获取用户的设备权限和相机设备

在Vue中将调用PC端摄像头分为两步，首先是获取用户的设备权限和相机设备。

//获取用户媒体设备（摄像头）
if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
        video: true //开启摄像头。
    }).then(function (stream) {
        video.srcObject = stream;
        video.play();
    }).catch(function (error) {
        console.log("访问用户媒体设备失败：", error.name, error.message);
    });
} else {
    console.log("不支持访问用户媒体");
}

可以看到，代码中使用navigator.mediaDevices.getUserMedia获取用户的媒体设备，其中video: true表示开启摄像头。

接着，在获取用户设备权限后，需要在Vue实例中定义video标签，同时在mounted函数中初始化这个标签并播放视频流。

<video id="video" autoplay="autoplay"></video>

var vm = new Vue({
    el: '#app',
    mounted:function(){
        video = document.getElementById('video');
    }
});

2. 调用Canvas实现拍照

接下来，就可以调用Canvas实现拍照。

//拍照函数
function takePhoto() {
    var context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, 640, 480);
    var imgData = canvas.toDataURL();
    document.getElementById('canvasImg').setAttribute('src', imgData);
}

可以看到，代码中，首先是调用canvas.getContext('2d')获取到canvas的2d上下文，接着使用drawImage函数将video中的视频流绘制到Canvas中，达到实时拍照的效果。最后使用toDataURL()方法获取Canvas中的图片并将其设置到页面中。

同时在Vue实例中，需要定义canvas标签。

<canvas id="canvas" width="640" height="480" style="display:none;"></canvas>
<img id="canvasImg" src="" style="display:none;">

var canvas = document.getElementById('canvas');

示例说明

完整示例

以下是一个完整的在Vue中调用PC端摄像头拍照的示例：

<div id="app">
    <video id="video" autoplay="autoplay"></video>
    <canvas id="canvas" width="640" height="480" style="display:none;"></canvas>
    <img id="canvasImg" src="" style="display:none;">
    <button @click="takePhoto()">拍照</button>
</div>

var video;
var canvas = document.getElementById('canvas');

var vm = new Vue({
    el: '#app',
    mounted:function(){
        video = document.getElementById('video');
        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({
                video: true //开启摄像头
            }).then(function (stream) {
                video.srcObject = stream;
                video.play();
            }).catch(function (error) {
                console.log("访问用户媒体设备失败：", error.name, error.message);
            });
        } else {
            console.log("不支持访问用户媒体");
        }
    },
    methods:{
        takePhoto:function(){
            var context = canvas.getContext('2d');
            context.drawImage(video, 0, 0, 640, 480);
            var imgData = canvas.toDataURL();
            document.getElementById('canvasImg').setAttribute('src', imgData);
        }
    }
});

在该示例中，当用户点击“拍照”按钮后，调用takePhoto()函数实现拍照，并将拍照结果展示在页面中。

使用Element UI实现调用PC端摄像头拍照

以下是使用Element UI实现调用PC端摄像头拍照的示例：

<template>
  <div>
    <el-button type="primary" icon="camera" @click="showCamera">拍照</el-button>
  </div>
</template>

<script>
export default{
  data(){
    return{
      showFlag:false,
      video: '',
      canvas: ''
    };
  },
  mounted(){
    this.video = this.$refs['video'];
    this.canvas = this.$refs['canvas'];
  },
  methods:{
    showCamera(){
      this.showFlag = true;
      this.initContent();
    },
    //获取用户媒体设备（摄像头）
    initContent(){
      if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
          video: true //开启摄像头
        }).then(function (stream) {
          video.srcObject = stream;
          video.play();
        }).catch(function (error) {
          console.log("访问用户媒体设备失败：", error.name, error.message);
        });
      } else {
        console.log("不支持访问用户媒体");
      }
    },
    //拍照函数
    takePhoto(){
      var context = canvas.getContext('2d');
      context.drawImage(video, 0, 0, 640, 480);
      this.$emit('getImgSrc',canvas.toDataURL());
      this.showFlag = false;
      this.$message('拍照成功');
    },
    //关闭摄像头
    closeCamera(){
      this.showFlag = false;
      video.pause();
      video.srcObject.getVideoTracks()[0].stop();
    }
  }
}
</script>

<style>
#cameraImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

该示例使用了Element UI中的<el-button>组件，展示按钮“拍照”。当用户点击该按钮后，会使用show属性控制<el-dialog>组件的显示，在该对话框中实时播放摄像头的视频流，并提供“拍照”按钮。当用户点击该按钮后，调用takePhoto()函数完成拍照。同时，为了优化代码，各个函数和标签都通过ref属性获取到，而不通过id。

以上就是Vue实现调用PC端摄像头实时拍照的完整攻略，希望能对你有所帮助。