|
|
@@ -0,0 +1,177 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
<!-- 顶部 --> |
|
|
|
<view class="top"> |
|
|
|
<view class="tips">提示区</view> |
|
|
|
<view class="showModel">展示模版</view> |
|
|
|
</view> |
|
|
|
<!-- 底部 --> |
|
|
|
<view class="bottom"> |
|
|
|
<view class="camera"> |
|
|
|
<video |
|
|
|
src="" |
|
|
|
muted="muted" |
|
|
|
id="videoElement" |
|
|
|
autoplay="autoplay" |
|
|
|
playsinline="playsinline" |
|
|
|
></video> |
|
|
|
<!-- <view v-show="!photoUrl" id="my_camera"></view> |
|
|
|
<view v-show="photoUrl" id="results"></view> --> |
|
|
|
</view> |
|
|
|
<view class="btnBox"> |
|
|
|
<view v-show="!photoUrl" class="takeBtn" @click="takePhoto">拍照</view> |
|
|
|
<view v-show="photoUrl" class="takeBtn" @click="photoUrl = null" |
|
|
|
>重拍</view |
|
|
|
> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
// js部分 |
|
|
|
<script setup> |
|
|
|
//#region 引入 |
|
|
|
import { ref, watch, onMounted } from "vue"; |
|
|
|
// import Webcam from "webcamjs"; |
|
|
|
import Webcam from "../../utils/webcam"; |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region 摄像头 |
|
|
|
setTimeout(() => { |
|
|
|
navigator.mediaDevices |
|
|
|
.getUserMedia({ video: true }) |
|
|
|
.then(function (stream) { |
|
|
|
console.log(stream); |
|
|
|
// 获取到摄像头的视频流 |
|
|
|
const video = document.getElementById("videoElement"); |
|
|
|
video.srcObject = stream; |
|
|
|
}) |
|
|
|
.catch((error) => { |
|
|
|
console.error("调用摄像头失败", error); |
|
|
|
}); |
|
|
|
}, 1000); |
|
|
|
//#endregion --------------------------------- |
|
|
|
|
|
|
|
//#region 相机 |
|
|
|
// 拍照 |
|
|
|
const photoUrl = ref(null); |
|
|
|
function takePhoto() { |
|
|
|
// console.log(Webcam.snap); |
|
|
|
uni.chooseImage({ |
|
|
|
sourceType: ["camera"], |
|
|
|
success: function (res) { |
|
|
|
console.log(JSON.stringify(res.tempFilePaths)); |
|
|
|
}, |
|
|
|
fail: (err) => { |
|
|
|
console.error("选择图片失败", err); |
|
|
|
uni.showToast({ |
|
|
|
title: "选择图片失败, 请稍后重试", |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
}, |
|
|
|
}); |
|
|
|
return; |
|
|
|
Webcam.snap((res) => { |
|
|
|
// Webcam.freeze(); |
|
|
|
photoUrl.value = res; |
|
|
|
document.getElementById("results").innerHTML = |
|
|
|
'<img style="width: 100%;height: 100%;" src="' + res + '"/>'; |
|
|
|
}); |
|
|
|
} |
|
|
|
// 关闭 |
|
|
|
function closeCamera() { |
|
|
|
Webcam.reset(); |
|
|
|
} |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region 初始化配置相机 |
|
|
|
onMounted(() => { |
|
|
|
Webcam.set({ |
|
|
|
// width: 864, //实时摄像机查看器的宽度 |
|
|
|
// height: 1536, //实时摄像机查看器的高度 |
|
|
|
width: 864, //实时摄像机查看器的宽度 |
|
|
|
height: 1536, //实时摄像机查看器的高度 |
|
|
|
dest_width: 392, //捕获相机图像的宽 |
|
|
|
dest_height: 698, //捕获相机图像的高 |
|
|
|
dest_width: 720, //捕获相机图像的宽 |
|
|
|
dest_height: 720, //捕获相机图像的高 |
|
|
|
// crop_width: 700, //最终裁剪图像的宽度(以像素为单位),默认为dest_width。 |
|
|
|
// crop_height: 700, //最终裁剪图像的高度(以像素为单位),默认为dest_height。 |
|
|
|
image_format: "png", //捕获图像的期望图像格式,可以是“jpeg”或“png”。 |
|
|
|
jpeg_quality: 90, //对于JPEG图像,这是理想的质量,从0(最差)到100(最好)。 |
|
|
|
enable_flash: true, //启用或禁用Flash回退,如果没有本机网络摄像头访问。 |
|
|
|
force_flash: false, //将此设置为true将始终在adobeflash回退模式下运行。 |
|
|
|
flip_horiz: false, //将此设置为true将水平翻转图像(镜像模式)。 |
|
|
|
fps: 30, //设置所需的fps(帧/秒)捕获速率。 |
|
|
|
swfURL: "./webcam.swf", //为adobeflash回退SWF文件设置一个备用位置 |
|
|
|
flashNotDetectedText: "未检测到flash播放器的文本/html。", //未检测到flash播放器的文本/html。 |
|
|
|
unfreeze_snap: true, //是否在拍照后解冻相机 |
|
|
|
upload_name: "webcam", //在上传摄像头图像文件时使用哪个HTTP POST参数名 |
|
|
|
flip_horiz: true, //是否镜像 |
|
|
|
}); |
|
|
|
// DOM元素必须已经创建并且为空。将ID或CSS选择器传递给Webcam.attach()函数(挂载dom) |
|
|
|
// Webcam.attach("#my_camera"); |
|
|
|
}); |
|
|
|
//#endregion ----------------------------- |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.page { |
|
|
|
padding: 0; |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
// overflow: hidden; |
|
|
|
} |
|
|
|
.top { |
|
|
|
display: flex; |
|
|
|
width: 100vw; |
|
|
|
height: 30vh; |
|
|
|
.tips { |
|
|
|
width: 60%; |
|
|
|
height: 30vh; |
|
|
|
background-color: #000; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.showModel { |
|
|
|
width: 40%; |
|
|
|
height: 30vh; |
|
|
|
background-color: red; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
.bottom { |
|
|
|
video { |
|
|
|
width: 100% !important; |
|
|
|
height: 100% !important; |
|
|
|
} |
|
|
|
display: flex; |
|
|
|
width: 100vw; |
|
|
|
height: 70vh; |
|
|
|
.camera { |
|
|
|
width: 80vw; |
|
|
|
height: 70vh; |
|
|
|
background-color: green; |
|
|
|
// #my_camera { |
|
|
|
// width: 100% !important; |
|
|
|
// height: 100% !important; |
|
|
|
// } |
|
|
|
// #results { |
|
|
|
// width: 100% !important; |
|
|
|
// height: 100% !important; |
|
|
|
// } |
|
|
|
} |
|
|
|
.btnBox { |
|
|
|
width: 20vw; |
|
|
|
height: 70vh; |
|
|
|
background-color: skyblue; |
|
|
|
.takeBtn { |
|
|
|
width: 15vw; |
|
|
|
height: 15vw; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: #444; |
|
|
|
line-height: 15vw; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |