easy-vue-camera

### Easy Vue Camera 组件概述 Easy Vue Camera 是一款用于简化在 Vue 应用程序中集成摄像头功能的组件。此组件允许开发者快速实现视频捕获、拍照以及访问设备上的相机硬件等功能。 ### 安装方法 为了使用 `easy-vue-camera`，可以通过 npm 或 yarn 进行安装： ```bash npm install easy-vue-camera --save ``` 或者 ```bash yarn add easy-vue-camera ``` 完成依赖项安装之后，在项目中的任意位置引入并注册该插件即可[^1]。 ### 基本配置与初始化 通常情况下，建议全局注册以便在整个应用程序范围内使用这个组件。可以在项目的入口文件（如 main.js）里执行如下操作来完成全局注册: ```javascript import Vue from 'vue'; import EasyVueCamera from 'easy-vue-camera'; Vue.use(EasyVueCamera); new Vue({ render: h => h(App), }).$mount('#app'); ``` 如果只需要局部应用，则可以直接在一个特定组件内部按需加载它作为本地组件来进行声明式注册。 ### 示例代码 下面是一个简单的例子展示了如何创建一个包含摄像机预览窗口和拍摄按钮的基础界面布局： ```html <template> <div class="camera-container"> <!-- 显示实时视频流 --> <video ref="videoPlayer" autoplay></video> <!-- 拍摄照片触发器 --> <button @click="captureImage">拍张照</button> <!-- 展示捕捉到的照片 --> <canvas v-show="photoTaken"></canvas> </div> </template> <script> export default { data() { return { photoTaken: false, videoStream: null, }; }, mounted() { this.startVideo(); }, methods: { async startVideo() { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); this.$refs.videoPlayer.srcObject = stream; this.videoStream = stream; } catch (error) { console.error('无法获取媒体设备:', error); } }, captureImage() { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); // 设置画布大小匹配当前播放器尺寸 canvas.width = this.$refs.videoPlayer.videoWidth; canvas.height = this.$refs.videoPlayer.videoHeight; // 把一帧画面绘制到画布上 context.drawImage(this.$refs.videoPlayer, 0, 0); // 更新状态显示已抓取图像 this.photoTaken = true; // 可选：保存图片数据供后续处理... } }, beforeDestroy() { if (this.videoStream) { this.videoStream.getTracks().forEach(track => track.stop()); } } }; </script> ``` 这段代码实现了基本的功能需求——启动摄像头、展示实况影像，并提供了一个可以用来截屏保存静态图像的机制。