フロントエンドがコンピュータのカメラを呼び出します

プロジェクトではフロントエンド呼び出しが必要なので、主に vue3 をベースにして、canvas 経由で画面を Base64 形式に変換し、base64 をファイルに変換して、そして最後にアップロードインターフェイスを呼び出します

以下はコードです

ページに入って最初にカメラを呼び出します

  navigator.mediaDevices
    .getUserMedia({
    
     video: true })
    .then((stream) => {
    
    
      video.value.srcObject = stream
    })
    .catch((error) => {
    
    
      console.error(error)
    })
  state.photoUrl = ''
  state.photo = true

写真

const canvas = document.createElement('canvas')
  canvas.width = video.value.videoWidth
  canvas.height = video.value.videoHeight
  canvas.getContext('2d').drawImage(video.value, 0, 0, canvas.width, canvas.height)
  state.photoUrl = canvas.toDataURL('image/png')

Base64へ

  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    
    
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${
      
      filename}.${
      
      suffix}`, {
    
    
    type: mime,
  })

完全なコード

<template>
  <div>
    <div>
      <div>摄像头实时画面</div>
      <div class="hm">
        <video ref="video" v-if="state.photo" autoplay></video>
        <img :src="state.photoUrl" v-else>
      </div>
    </div>
    <div class="maT10">
      <el-button @click="takePhoto">
        拍照
      </el-button>
      <el-button @click="retake">
        重拍
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts" name="photo">
import axios from 'axios'
const state = reactive({
    
    
  photo: true,
  photoUrl: '',
})
const video = ref()

const takePhoto = () => {
    
    
  const canvas = document.createElement('canvas')
  canvas.width = video.value.videoWidth
  canvas.height = video.value.videoHeight
  canvas.getContext('2d').drawImage(video.value, 0, 0, canvas.width, canvas.height)
  state.photoUrl = canvas.toDataURL('image/png')

  clearVideo()
  state.photo = false
  let file = base64ImgtoFile(state.photoUrl)
  let param = new FormData()
  param.append('file', file, file.name)
  param.append('fileReName', 'true')
  let config = {
    
    
    headers: {
    
    
      'Content-Type': 'multipart/form-data',
      Authorization: 'token',  //此处是token
    },
  }

  let url = import.meta.env.VITE_API_URL + '/api/admin/file/upload-file'
  axios.post(url, param, config).then((response) => {
    
    })
}
const base64ImgtoFile = (dataurl, filename = 'file') => {
    
    
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    
    
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${
      
      filename}.${
      
      suffix}`, {
    
    
    type: mime,
  })
}
const clearVideo = () => {
    
    
  const stream = video.value.srcObject
  const tracks = stream.getTracks()
  tracks.forEach((track) => {
    
    
    track.stop()
  })
  video.value.srcObject = null
}

const retake = () => {
    
    
  navigator.mediaDevices
    .getUserMedia({
    
     video: true })
    .then((stream) => {
    
    
      video.value.srcObject = stream
    })
    .catch((error) => {
    
    
      console.error(error)
    })
  state.photoUrl = ''
  state.photo = true
}

onMounted(() => {
    
    
  retake()
})
//在离开当前页面的时候把摄像头关了，不然页面一直会显示摄像头的图标
onBeforeUnmount(() => {
    
    
  video.value.srcObject = null
})
</script>

<style scoped lang="scss">
.hm {
    
    
  width: 400px;
  height: 300px;
  video,
  img {
    
    
    width: 100%;
  }
}
</style>