vue3開啟攝像頭并進行拍照的實現(xiàn)示例

更新時間：2024年01月15日 09:53:17 作者：小馬甲丫

本文主要介紹了vue3開啟攝像頭并進行拍照的實現(xiàn)示例,主要是使用navigator.mediaDevices.getUserMedia這個API來實現(xiàn),具有一定的參考價值,感興趣的可以了解一下

一、前言

Vue3 調(diào)用本地攝像頭實現(xiàn)拍照功能，由于調(diào)用攝像頭有使用權(quán)限，只能在本地運行，線上需用 https 域名才可以使用。主要是使用navigator.mediaDevices.getUserMedia這個API來實現(xiàn)。

二、文檔

navigator.mediaDevices.getUserMedia，MDN的官方文檔點擊【前往】。

向用戶請求獲得媒體輸入的許可，返回一個MediaStream，我們可以使用MediaStream與video組件綁定輸出攝像頭拍攝的視頻，也能記錄麥克風的音頻

三、實現(xiàn)

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 = () => {
    // 如果已經(jīng)拍照了就重新啟動攝像頭
    if (imgurl.value) {
      imgurl.value = null;
      openCamera()
      return;
    }

    // 設置畫布大小與攝像大小一致
    canvasDom.value.width = videoDom.value.videoWidth;
    canvasDom.value.height = videoDom.value.videoHeight;
    // 執(zhí)行畫的操作
    canvasDom.value.getContext("2d").drawImage(videoDom.value, 0, 0);
    // 將結(jié)果轉(zhuǎn)換為可展示的格式
    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();
    });
  };

  // ----------------------- 以下是暴露的方法內(nèi)容 ------------------------
  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()
  }

  // 拍照回調(diào)
  function handlePhoto(img) {
  	photo.value = img
  }
</script>