vue3开启摄像头并进行拍照的实现示例
更新时间:2024年01月15日 09:53:17 作者:小马甲丫
本文主要介绍了vue3开启摄像头并进行拍照的实现示例,主要是使用navigator.mediaDevices.getUserMedia这个API来实现,具有一定的参考价值,感兴趣的可以了解一下
一、前言
Vue3
调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用 https
域名才可以使用。主要是使用navigator.mediaDevices.getUserMedia
这个API
来实现。
二、文档
navigator.mediaDevices.getUserMedia
,MDN
的官方文档点击【前往】。
向用户请求获得媒体输入的许可,返回一个MediaStream
,我们可以使用MediaStream
与video
组件绑定输出摄像头拍摄的视频,也能记录麦克风的音频
三、实现
3.1、封装
封装组件take-photo.vue
/** * @Description: 拍照 * @author 小马甲丫 * @date 2024-01-07 12:03:04 */ <template> <a-modal :width="800" :height="600" title="读身份证" @cancel="hideModal" v-model:visible="visibleFlag" > <!-- 画笔控件 用来拍照 --> <canvas style="display: none" ref="canvasDom"></canvas> <!-- 播放器,用来播放拍摄的视频 --> <video v-if="!imgurl" class="camera_video" ref="videoDom"></video> <!-- 显示照片 --> <img v-else :src="imgurl" /> <template #footer> <a-space> <a-button @click="hideModal">关闭</a-button> <a-button type="primary" @click="takePhoto">{{ imgurl ? "重拍" : "拍照" }}</a-button> </a-space> </template> </a-modal> </template> <script setup> import { ref, nextTick } from "vue"; // canvas控件对象 const canvasDom = ref(null); // video 控件对象 const videoDom = ref(null); // 照片路径 const imgurl = ref(null); const emits = defineEmits(['save']); // ------------------ 显示,关闭 ------------------ // 显示 const visibleFlag = ref(false); function showModal() { imgurl.value = '' visibleFlag.value = true; openCamera(); } // 关闭 function hideModal() { visibleFlag.value = false; } const openCamera = () => { // 检测浏览器是否支持mediaDevices if (navigator.mediaDevices) { navigator.mediaDevices // 开启视频,关闭音频 .getUserMedia({audio: false, video: true}) .then((stream) => { // 将视频流传入viedo控件 videoDom.value.srcObject = stream; // 播放 videoDom.value.play(); }) .catch((err) => { console.log(err); }); } else { window.alert("该浏览器不支持开启摄像头,请更换最新版浏览器"); } }; // 拍照 const takePhoto = () => { // 如果已经拍照了就重新启动摄像头 if (imgurl.value) { imgurl.value = null; openCamera() return; } // 设置画布大小与摄像大小一致 canvasDom.value.width = videoDom.value.videoWidth; canvasDom.value.height = videoDom.value.videoHeight; // 执行画的操作 canvasDom.value.getContext("2d").drawImage(videoDom.value, 0, 0); // 将结果转换为可展示的格式 imgurl.value = canvasDom.value.toDataURL("image/webp"); // 关闭摄像头 stop(); nextTick(() => { emits('save', imgurl.value) hideModal() }) } // 关闭摄像头 const stop = () => { let stream = videoDom.value.srcObject; if (!stream) return; let tracks = stream.getTracks(); tracks.forEach((x) => { x.stop(); }); }; // ----------------------- 以下是暴露的方法内容 ------------------------ defineExpose({ showModal, hideModal }); </script> <style lang="less" scoped> .camera_video { width: 100%; height: 100%; border: 2px black solid; } </style>
3.2、使用
/** * @Description: 使用 * @author 小马甲丫 * @date 2023-12-20 08:07:47 */ <template> <div> <img :src="photo" /> <a-button ghost type="primary" @click="readCard">拍照</a-button> <TakePhoto ref="photoRef" @save="handlePhoto" /> </div> </template> <script setup> import { ref } from 'vue'; import TakePhoto from './take-photo.vue'; const photoRef = ref() const photo = ref() // 拍照 function readCard() { photoRef.value.showModal() } // 拍照回调 function handlePhoto(img) { photo.value = img } </script>
3.3、效果
四、最后
到此这篇关于vue3开启摄像头并进行拍照的实现示例的文章就介绍到这了,更多相关vue3开启摄像头拍照内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue3+Element-Plus实现左侧菜单折叠与展开功能示例
本文主要介绍了Vue3+Element-Plus实现左侧菜单折叠与展开功能示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-04-04
最新评论