跳到主要内容

摄像头软件开发

  • 电脑摄像头不止一个，需要检测识别多个摄像头

环境搭建​

  • 基于electron-vite脚手架创建项目
  • 基于vue来构建
  • 安装配置element-ui、tailwindcss
bash
pnpm create @quick-start/electron
pnpm install element-plus
pnpm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

相关文档​

  • MDN MediaDevices

    • 文档

    • 媒体设备相关文档

    • 调用摄像头相关API

获取摄像头api​

js
// 获取当前可用的媒体设备 （包含输入/输出的设备，比如摄像头、）
const devices = await navigator.mediaDevices.enumerateDevices()
// 获取用户媒体设备的访问权限, 可返回音视频流
const constraints = {
	audio: false, // 布尔值，表示是否请求音频流，默认为 true。
    video: true // 布尔值或对象,表示是否请求视频流, 可指定具体配置
}
const mediaStream = await navigator.mediaDevices.getUserMedia(constraints)

例子

js
const videoRef = ref<HTMLVideoElement>()
onMounted(async () => {
  const constraints = { audio: false, video: true }
  const mediaStream = await navigator.mediaDevices.getUserMedia(constraints)
  if (videoRef.value) {
    videoRef.value.srcObject = mediaStream
    videoRef.value.play()
  }
})

摄像头样式​

  • 设置边框
  • 设置摄像头圆形
  • 通过object-fit属性，设置video标签的大小适应
    • object-fit: cover 【保持其宽高比，并且填充整个内容框】
  • 通过electron主进程控制样式
    • frame: 控制是否显示标题栏、边框
    • setAspectRatio(1): 设置缩放比例
    • 控制最小宽度/高度、最大宽度/高度

选择电脑中的摄像头​

用户可根据电脑的摄像头列表，来选择其中摄像头来显示

  • 1、通过navigator.mediaDevices.enumerateDevices()获取所有媒体设备列表
  • 2、过滤媒体设备列表，获取摄像头列表
  • 3、循环摄像头列表，显示在页面中