|
|
@@ -0,0 +1,96 @@
|
|
|
+<template>
|
|
|
+ <!-- 主页面容器,红色背景,居中显示 -->
|
|
|
+ <div ref="wrapper" class="w-full h-full bg-red flex flex-col items-center">
|
|
|
+ <!-- 视频元素容器 -->
|
|
|
+ <video ref="videoEl" />
|
|
|
+ <!-- 拍摄按钮 -->
|
|
|
+ <div
|
|
|
+ @click="shoot"
|
|
|
+ class="w-100px leading-100px text-center bg-black text-30px"
|
|
|
+ style="cursor: pointer"
|
|
|
+ >
|
|
|
+ 拍摄
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+ <script setup>
|
|
|
+import { ref, onMounted } from "vue";
|
|
|
+
|
|
|
+//使用 ref 对象来获取 DOM 元素
|
|
|
+const wrapper = ref();
|
|
|
+const videoEl = ref();
|
|
|
+
|
|
|
+// 存储拍摄后的图片路径
|
|
|
+const imageUrl = ref(null);
|
|
|
+
|
|
|
+// 检查摄像头并设置视频流
|
|
|
+async function checkCamera() {
|
|
|
+ // 获取媒体设备信息
|
|
|
+ const navigator = window.parent.navigator.mediaDevices;
|
|
|
+ if(!navigator){
|
|
|
+ window.alert("该浏览器不支持开启摄像头,请更换最新版浏览器");
|
|
|
+ }
|
|
|
+// console.log(navigator, "navigator");
|
|
|
+ //判断用户是否拥有摄像头
|
|
|
+ const devices = await navigator.enumerateDevices();
|
|
|
+
|
|
|
+ // 如果存在媒体设备,获取摄像头视频流
|
|
|
+ if (devices) {
|
|
|
+ // 请求用户媒体设备(摄像头)
|
|
|
+ const stream = await navigator.getUserMedia({
|
|
|
+ audio: false,
|
|
|
+ video: {
|
|
|
+ width: 300, // 设置视频宽度
|
|
|
+ height: 300, // 设置视频高度
|
|
|
+ facingMode: "user", // 使用前置摄像头
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 如果视频元素存在,将视频流绑定到视频元素上并开始播放
|
|
|
+ if (videoEl.value) {
|
|
|
+ videoEl.value.srcObject = stream;
|
|
|
+ videoEl.value.play();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 拍摄函数,截取摄像头当前帧并显示在页面上
|
|
|
+function shoot() {
|
|
|
+ // 检查视频元素和页面容器是否存在
|
|
|
+ if (!videoEl.value || !wrapper.value) return;
|
|
|
+
|
|
|
+ // 创建一个画布元素,设置画布尺寸为视频流的尺寸
|
|
|
+ const canvas = document.createElement("canvas");
|
|
|
+ canvas.width = videoEl.value.videoWidth;
|
|
|
+ canvas.height = videoEl.value.videoHeight;
|
|
|
+
|
|
|
+ // 获取画布上下文对象
|
|
|
+ const ctx = canvas.getContext("2d");
|
|
|
+
|
|
|
+ // 绘制当前视频帧到画布上
|
|
|
+ ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
|
|
|
+
|
|
|
+ // 将画布内容转为 Base64 数据
|
|
|
+ const imageDataUrl = canvas.toDataURL("image/png");
|
|
|
+
|
|
|
+ // 存储图片路径
|
|
|
+ imageUrl.value = imageDataUrl;
|
|
|
+
|
|
|
+ // 创建一个图片元素
|
|
|
+ const imageElement = new Image();
|
|
|
+
|
|
|
+ // 将 Base64 数据设置为图片的 src 属性
|
|
|
+ imageElement.src = imageDataUrl;
|
|
|
+
|
|
|
+ console.log(imageElement, "图片路径");
|
|
|
+
|
|
|
+ // 将图片元素添加到页面容器中
|
|
|
+ wrapper.value.appendChild(imageElement);
|
|
|
+}
|
|
|
+
|
|
|
+// 在组件挂载后执行检查摄像头的操作
|
|
|
+onMounted(() => {
|
|
|
+ checkCamera();
|
|
|
+});
|
|
|
+</script>
|