vue封装一个获取摄像头内容的组件
时间: 2024-06-12 22:06:05 浏览: 18
以下是一个简单的Vue组件,用于获取摄像头的内容并将其显示在页面上:
```html
<template>
<div>
<video ref="videoElement" autoplay></video>
</div>
</template>
<script>
export default {
name: 'CameraViewer',
data() {
return {
stream: null,
}
},
mounted() {
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
this.stream = stream
this.$refs.videoElement.srcObject = stream
})
.catch(error => {
console.error('Unable to access camera', error)
})
},
beforeDestroy() {
if (this.stream) {
this.stream.getTracks().forEach(track => track.stop())
}
},
}
</script>
<style scoped>
video {
width: 100%;
height: auto;
}
</style>
```
该组件的功能如下:
- 在`mounted`生命周期钩子中,使用`navigator.mediaDevices.getUserMedia`方法获取摄像头的视频流。
- 将视频流赋值给`<video>`元素的`srcObject`属性,以显示视频内容。
- 在`beforeDestroy`生命周期钩子中,停止摄像头的视频流。