139 lines
3.7 KiB
Vue
139 lines
3.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
|
|||
|
|
<!-- ① 视频预览层（拿到 MediaStream 后才显示） -->
|
|||
|
|
<video
|
|||
|
|
ref="video"
|
|||
|
|
class="video"
|
|||
|
|
playsinline webkit-playsinline x5-playsinline
|
|||
|
|
muted
|
|||
|
|
v-show="started"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- ② Canvas：实时把 video 画上来，同时用于拍照 -->
|
|||
|
|
<canvas ref="canvas" class="canvas" v-show="started"></canvas>
|
|||
|
|
|
|||
|
|
<!-- ③ 中间遮罩 -->
|
|||
|
|
<image
|
|||
|
|
class="overlay"
|
|||
|
|
src="@/static/index/nu.png"
|
|||
|
|
:style="{ opacity: started ? 1 : 0 }"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- ④ 按钮区 -->
|
|||
|
|
<view class="btn-bar" v-if="started">
|
|||
|
|
<button class="btn close" @click="close">关闭</button>
|
|||
|
|
<button class="btn shoot" @click="shoot"></button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- ⑤ 首次进入的 【开始拍照】 按钮（触发权限弹窗） -->
|
|||
|
|
<view class="starter" v-if="!started">
|
|||
|
|
<button class="btn start" @click="startCamera">开始拍照</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onBeforeUnmount } from 'vue'
|
|||
|
|
import { useRouter } from 'vue-router'
|
|||
|
|
|
|||
|
|
// ----------------- 视图引用 -----------------
|
|||
|
|
const video = ref<HTMLVideoElement>()
|
|||
|
|
const canvas = ref<HTMLCanvasElement>()
|
|||
|
|
|
|||
|
|
// ----------------- 状态 -----------------
|
|||
|
|
const started = ref(false)
|
|||
|
|
let stream: MediaStream | null = null
|
|||
|
|
let rafID: number
|
|||
|
|
|
|||
|
|
// ----------------- 逻辑 -----------------
|
|||
|
|
async function startCamera() {
|
|||
|
|
// 1. 环境检测
|
|||
|
|
if (!navigator.mediaDevices?.getUserMedia) {
|
|||
|
|
uni.showToast({ title: '当前浏览器不支持实时相机', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
stream = await navigator.mediaDevices.getUserMedia({
|
|||
|
|
video: { facingMode: { ideal: 'environment' } },
|
|||
|
|
audio: false
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 2. 让 <video> 播起来
|
|||
|
|
const v = video.value!
|
|||
|
|
v.srcObject = stream
|
|||
|
|
await v.play()
|
|||
|
|
|
|||
|
|
// 3. 启动渲染循环，把视频帧 real-time 画到 Canvas
|
|||
|
|
drawFrame()
|
|||
|
|
started.value = true
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err)
|
|||
|
|
uni.showToast({ title: '无法获取摄像头权限', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function drawFrame() {
|
|||
|
|
if (!started.value) return
|
|||
|
|
const v = video.value!, c = canvas.value!
|
|||
|
|
const ctx = c.getContext('2d')!
|
|||
|
|
|
|||
|
|
if (v.videoWidth && v.videoHeight) {
|
|||
|
|
// 每帧同步 canvas 尺寸，否则会变形
|
|||
|
|
if (c.width !== window.innerWidth) {
|
|||
|
|
c.width = window.innerWidth
|
|||
|
|
c.height = window.innerHeight
|
|||
|
|
}
|
|||
|
|
ctx.drawImage(v, 0, 0, c.width, c.height)
|
|||
|
|
}
|
|||
|
|
rafID = requestAnimationFrame(drawFrame)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function shoot() {
|
|||
|
|
const dataURL = canvas.value!.toDataURL('image/jpeg', 0.9)
|
|||
|
|
// 这里你可以：直接预览 / 上传 oss / emit 给父页
|
|||
|
|
uni.navigateBack()
|
|||
|
|
uni.$emit('photoTaken', dataURL)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function close() {
|
|||
|
|
cleanup()
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function cleanup() {
|
|||
|
|
cancelAnimationFrame(rafID)
|
|||
|
|
if (stream) stream.getTracks().forEach(t => t.stop())
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onBeforeUnmount(cleanup)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.page { position:fixed; inset:0; background:#000; overflow:hidden; }
|
|||
|
|
.video { position:absolute; inset:0; object-fit:cover; z-index:1; }
|
|||
|
|
.canvas { position:absolute; inset:0; z-index:1; }
|
|||
|
|
.overlay{
|
|||
|
|
position:absolute; top:50%; left:50%;
|
|||
|
|
width:220px; height:220px;
|
|||
|
|
transform:translate(-50%,-50%); z-index:2;
|
|||
|
|
pointer-events:none;
|
|||
|
|
}
|
|||
|
|
.btn-bar{
|
|||
|
|
position:absolute; bottom:60px; inset-inline:0;
|
|||
|
|
display:flex; justify-content:space-around; z-index:3;
|
|||
|
|
}
|
|||
|
|
.btn{
|
|||
|
|
border:none; font-size:16px; color:#fff;
|
|||
|
|
}
|
|||
|
|
.close{ width:100px; height:40px; border-radius:20px; background:rgba(0,0,0,.5); }
|
|||
|
|
.shoot{ width:80px; height:80px; border-radius:40px; background:#fff; }
|
|||
|
|
.starter{
|
|||
|
|
position:absolute; inset:0; display:flex;
|
|||
|
|
justify-content:center; align-items:center; z-index:3;
|
|||
|
|
background:#000;
|
|||
|
|
}
|
|||
|
|
.start{ width:140px; height:46px; border-radius:23px; background:#1aad19; }
|
|||
|
|
</style>
|