vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3开启摄像头拍照

vue3开启摄像头并进行拍照的实现示例

作者:小马甲丫

本文主要介绍了vue3开启摄像头并进行拍照的实现示例,主要是使用navigator.mediaDevices.getUserMedia这个API来实现,具有一定的参考价值,感兴趣的可以了解一下

一、前言

Vue3 调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用 https 域名才可以使用。主要是使用navigator.mediaDevices.getUserMedia这个API来实现。

二、文档

navigator.mediaDevices.getUserMediaMDN的官方文档点击【前往】。

向用户请求获得媒体输入的许可,返回一个MediaStream,我们可以使用MediaStreamvideo组件绑定输出摄像头拍摄的视频,也能记录麦克风的音频

三、实现

3.1、封装

封装组件take-photo.vue

/**
 * @Description: 拍照
 * @author 小马甲丫
 * @date 2024-01-07 12:03:04
*/

<template>
  <a-modal
    :width="800"
    :height="600"
    title="读身份证"
    @cancel="hideModal"
    v-model:visible="visibleFlag"
  >
    <!-- 画笔控件 用来拍照 -->
    <canvas style="display: none" ref="canvasDom"></canvas>
    <!-- 播放器,用来播放拍摄的视频 -->
    <video v-if="!imgurl" class="camera_video" ref="videoDom"></video>
    <!--  显示照片  -->
    <img v-else :src="imgurl" />
    <template #footer>
      <a-space>
        <a-button @click="hideModal">关闭</a-button>
        <a-button type="primary" @click="takePhoto">{{ imgurl ? "重拍" : "拍照" }}</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, nextTick } from "vue";
  // canvas控件对象
  const canvasDom = ref(null);
  // video 控件对象
  const videoDom = ref(null);
  // 照片路径
  const imgurl = ref(null);

  const emits = defineEmits(['save']);

  // ------------------ 显示,关闭 ------------------
  // 显示
  const visibleFlag = ref(false);
  function showModal() {
    imgurl.value = ''
    visibleFlag.value = true;
    openCamera();
  }

  // 关闭
  function hideModal() {
    visibleFlag.value = false;
  }

  const openCamera = () => {
    // 检测浏览器是否支持mediaDevices
    if (navigator.mediaDevices) {
      navigator.mediaDevices
      // 开启视频,关闭音频
      .getUserMedia({audio: false, video: true})
      .then((stream) => {
        // 将视频流传入viedo控件
        videoDom.value.srcObject = stream;
        // 播放
        videoDom.value.play();
      })
      .catch((err) => {
        console.log(err);
      });
    } else {
      window.alert("该浏览器不支持开启摄像头,请更换最新版浏览器");
    }
  };

  // 拍照
  const takePhoto = () => {
    // 如果已经拍照了就重新启动摄像头
    if (imgurl.value) {
      imgurl.value = null;
      openCamera()
      return;
    }

    // 设置画布大小与摄像大小一致
    canvasDom.value.width = videoDom.value.videoWidth;
    canvasDom.value.height = videoDom.value.videoHeight;
    // 执行画的操作
    canvasDom.value.getContext("2d").drawImage(videoDom.value, 0, 0);
    // 将结果转换为可展示的格式
    imgurl.value = canvasDom.value.toDataURL("image/webp");
    // 关闭摄像头
    stop();
    nextTick(() => {
      emits('save', imgurl.value)
      hideModal()
    })
  }

  // 关闭摄像头
  const stop = () => {
    let stream = videoDom.value.srcObject;
    if (!stream) return;
    let tracks = stream.getTracks();
    tracks.forEach((x) => {
      x.stop();
    });
  };

  // ----------------------- 以下是暴露的方法内容 ------------------------
  defineExpose({
    showModal,
    hideModal
  });
</script>

<style lang="less" scoped>
.camera_video {
  width: 100%;
  height: 100%;
  border: 2px black solid;
}
</style>

3.2、使用

/**
 * @Description: 使用
 * @author 小马甲丫
 * @date 2023-12-20 08:07:47
*/

<template>
  <div>
  	<img :src="photo" />
    <a-button ghost type="primary" @click="readCard">拍照</a-button>
    <TakePhoto ref="photoRef" @save="handlePhoto" />
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import TakePhoto from './take-photo.vue';

  const photoRef = ref()
  const photo = ref()

  // 拍照
  function readCard() {
    photoRef.value.showModal()
  }

  // 拍照回调
  function handlePhoto(img) {
  	photo.value = img
  }
</script>

3.3、效果

四、最后

到此这篇关于vue3开启摄像头并进行拍照的实现示例的文章就介绍到这了,更多相关vue3开启摄像头拍照内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文