vue实现拍照录像
Vue实现拍照功能
使用HTML5的<input type="file">结合capture属性可以实现拍照功能。在Vue中可以这样实现：
<template>
<div>
<input
type="file"
accept="image/*"
capture="camera"
@change="handleImageCapture"
/>
<img v-if="capturedImage" :src="capturedImage" alt="Captured Image">
</div>
</template>
<script>
export default {
data() {
return {
capturedImage: null
}
},
methods: {
handleImageCapture(event) {
const file = event.target.files[0]
if (file) {
this.capturedImage = URL.createObjectURL(file)
}
}
}
}
</script>Vue实现录像功能
使用HTML5的<input type="file">结合capture属性也可以实现录像功能：
<template>
<div>
<input
type="file"
accept="video/*"
capture="camcorder"
@change="handleVideoCapture"
/>
<video v-if="capturedVideo" controls :src="capturedVideo"></video>
</div>
</template>
<script>
export default {
data() {
return {
capturedVideo: null
}
},
methods: {
handleVideoCapture(event) {
const file = event.target.files[0]
if (file) {
this.capturedVideo = URL.createObjectURL(file)
}
}
}
}
</script>使用WebRTC实现高级拍照录像
对于更高级的需求，可以使用WebRTC API：
<template>
<div>
<video ref="videoElement" autoplay></video>
<button @click="capturePhoto">拍照</button>
<button @click="startRecording">开始录像</button>
<button @click="stopRecording">停止录像</button>
<canvas ref="canvasElement"></canvas>
<video v-if="recordedVideo" controls :src="recordedVideo"></video>
</div>
</template>
<script>
export default {
data() {
return {
mediaStream: null,
mediaRecorder: null,
recordedChunks: [],
recordedVideo: null
}
},
mounted() {
this.initCamera()
},
beforeUnmount() {
if (this.mediaStream) {
this.mediaStream.getTracks().forEach(track => track.stop())
}
},
methods: {
async initCamera() {
try {
this.mediaStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
})
this.$refs.videoElement.srcObject = this.mediaStream
} catch (error) {
console.error('Error accessing camera:', error)
}
},
capturePhoto() {
const video = this.$refs.videoElement
const canvas = this.$refs.canvasElement
canvas.width = video.videoWidth
canvas.height = video.videoHeight
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
// 可以在这里处理canvas.toDataURL()获取图片数据
},
startRecording() {
this.recordedChunks = []
this.mediaRecorder = new MediaRecorder(this.mediaStream)
this.mediaRecorder.ondataavailable = event => {
if (event.data.size > 0) {
this.recordedChunks.push(event.data)
}
}
this.mediaRecorder.onstop = () => {
const blob = new Blob(this.recordedChunks, { type: 'video/webm' })
this.recordedVideo = URL.createObjectURL(blob)
}
this.mediaRecorder.start()
},
stopRecording() {
if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
this.mediaRecorder.stop()
}
}
}
}
</script>使用第三方库简化实现
可以考虑使用以下第三方库简化实现：
vue-web-cam: 专门为Vue设计的摄像头组件recordrtc: 提供更强大的录像功能quagga: 支持条形码/二维码扫描
安装vue-web-cam示例：
npm install vue-web-cam使用示例：
<template>
<div>
<vue-web-cam ref="webcam" />
<button @click="capture">拍照</button>
<img v-if="img" :src="img" />
</div>
</template>
<script>
import { VueWebCam } from 'vue-web-cam'
export default {
components: {
VueWebCam
},
data() {
return {
img: null
}
},
methods: {
capture() {
this.img = this.$refs.webcam.capture()
}
}
}
</script>注意事项
- 在移动设备上，
capture属性可能不被所有浏览器支持 - WebRTC需要HTTPS环境或在localhost上才能工作
- 不同浏览器对视频格式的支持可能不同
- 需要用户明确授权摄像头和麦克风权限
- 在组件销毁时记得关闭媒体流，释放资源
