Vue3摄像头拍照功能怎么实现？实时显示并保存图片教程
作者：蜡笔小新星
想在Vite+Vue3项目中调用摄像头实时显示并拍照吗？本文手把手教你使用原生getUserMedia API实现视频流预览,并通过Canvas捕获图片,在右侧展示,Vue3 setup语法糖让代码更简洁,快速实现摄像头拍照功能
在 Vite + Vue 3 项目中，如果你想要实现调用摄像头实时显示，并添加一个拍照按钮来捕获图片并在实时显示的右边展示，你可以使用原生的 JavaScript API 来访问摄像头，并结合 Vue 3 的 setup 语法糖来完成这一任务。
以下是一个简单的实现步骤
创建 Vue 组件：
创建一个 Vue 组件，用于显示摄像头的实时视频流和拍照后的图片。访问摄像头：
使用navigator.mediaDevices.getUserMedia方法来请求访问用户的摄像头。显示视频流：
将获取到的视频流设置到一个<video>元素的srcObject属性上，以便实时显示视频。添加拍照按钮：
在组件中添加一个按钮，用于触发拍照功能。捕获图片：
使用<canvas>元素和CanvasRenderingContext2D的drawImage方法来捕获视频帧，并将其转换为图片。显示图片：
将捕获到的图片显示在实时视频流的右边。
以下是一个完整的 Vue 3 组件示例：
<template>
<div class="camera-app">
<video ref="video" autoplay></video>
<button @click="takePhoto">拍照</button>
<div class="photo-container" v-if="photoDataUrl">
<img :src="photoDataUrl" alt="Captured Photo" />
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const video = ref(null);
let photoDataUrl = ref(null);
let stream = null;
const takePhoto = () => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = video.value.videoWidth;
canvas.height = video.value.videoHeight;
context.drawImage(video.value, 0, 0, canvas.width, canvas.height);
photoDataUrl.value = canvas.toDataURL('image/png');
};
onMounted(() => {
navigator.mediaDevices.getUserMedia({ video: true })
.then(mediaStream => {
stream = mediaStream;
video.value.srcObject = mediaStream;
})
.catch(error => {
console.error('Error accessing the camera:', error);
});
});
onUnmounted(() => {
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
});
</script>
<style scoped>
.camera-app {
display: flex;
flex-direction: column;
align-items: center;
}
video {
margin-bottom: 10px;
max-width: 100%;
}
.photo-container {
margin-top: 10px;
display: flex;
justify-content: center;
}
.photo-container img {
max-width: 50%; /* Adjust the size as needed */
}
</style>
解释
模板部分：
<video>元素用于显示摄像头的实时视频流。<button>元素用于触发拍照功能。<div class="photo-container">和<img>元素用于显示拍照后的图片（当photoDataUrl有值时）。
脚本部分：
- 使用
ref来引用<video>元素。 - 使用
onMounted生命周期钩子来请求访问摄像头，并将视频流设置到<video>元素的srcObject属性上。 takePhoto函数使用<canvas>元素来捕获视频帧，并将其转换为 Data URL 格式的图片，然后存储在photoDataUrl中。- 使用
onUnmounted生命周期钩子来停止摄像头的视频流，以避免资源泄露。
样式部分：
- 简单的样式来布局组件，包括视频和图片的显示。
这个示例展示了如何使用 Vue 3 和原生 JavaScript API 来实现调用摄像头、实时显示视频流、拍照并显示图片的功能。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。