|
- <template>
- <div class="page">
- <div class="top">
- <div class="example">
- <div>文案与模板提示区域</div>
- </div>
- <div class="model">
- <img :src="modelUrl" alt="" />
- </div>
- </div>
-
- <div class="bottom">
- <video
- v-if="!isSuccess"
- id="video"
- muted
- autoplay="autoplay"
- :controls="false"
- ></video>
-
- <div v-if="!isSuccess">
- <div class="selectImg">
- <img src="../../assets/img/selectImg.png" />
- <div class="uploadText">上传照片</div>
- </div>
-
- <div id="action" @click="takePicture">
- <div class="circleInside"></div>
- </div>
- </div>
-
- <div v-if="isSuccess">
- <div class="selectImg">
- <img src="../../assets/img/selectImg.png" />
- <div class="uploadText">上传照片</div>
- </div>
-
- <div class="confirm" @click="confirmPhoto">
- <img src="../../assets/img/success.png" />
- <div class="uploadText">就这张了</div>
- </div>
-
- <div class="reTry" @click="reTry">
- <img src="../../assets/img/reTry.png" />
- <div class="uploadText">重新拍摄</div>
- </div>
- </div>
-
- <canvas
- v-if="isShowCanvas"
- id="canvas"
- style="width: 1530; height: 950"
- ></canvas>
-
- <div v-if="isSuccess" class="preview">
- <img :src="imgSrc" />
- </div>
- </div>
- <!-- Top section -->
- </div>
- </template>
-
- <script setup>
- import { ref, onMounted } from "vue";
- import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
-
- let imgSrc = ref("");
- let isSuccess = ref(false);
- let isShowCanvas = ref(true);
- let modelUrl = ref("");
-
- const startCamera = () => {
- function getUserMedia(constraints, success, error) {
- if (navigator.mediaDevices.getUserMedia) {
- //最新的标准API
- navigator.mediaDevices
- .getUserMedia({
- audio: {
- echoCancellation: true,
- },
- video: {
- facingMode: "user",
- },
- })
- .then(success)
- .catch(error);
- } else if (navigator.webkitGetUserMedia) {
- //webkit核心浏览器
- navigator.webkitGetUserMedia(constraints, success, error);
- } else if (navigator.mozGetUserMedia) {
- //firfox浏览器
- navigator.mozGetUserMedia(constraints, success, error);
- } else if (navigator.getUserMedia) {
- //旧版API
- navigator.getUserMedia(constraints, success, error);
- }
- }
-
- const video = document.querySelector("video.uni-video-video");
- let canvas = document.querySelector("canvas.uni-canvas-canvas");
- const action = document.querySelector("#action");
- let context = canvas.getContext("2d");
-
- function success(stream) {
- //兼容webkit核心浏览器
- let CompatibleURL = window.URL || window.webkitURL;
- //将视频流设置为video元素的源
- console.log(stream);
-
- //video.src = CompatibleURL.createObjectURL(stream);
- video.srcObject = stream;
- video.play();
- }
-
- function error(error) {
- console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
- }
-
- if (
- navigator.mediaDevices.getUserMedia ||
- navigator.getUserMedia ||
- navigator.webkitGetUserMedia ||
- navigator.mozGetUserMedia
- ) {
- //调用用户媒体设备, 访问摄像头
- getUserMedia(
- {
- audio: false,
- video: true,
- },
- success,
- error
- );
- } else {
- alert("不支持访问用户媒体");
- }
-
- action.addEventListener("click", function () {
- canvas.width = 1530;
- canvas.height = 950;
- context.drawImage(video, 0, 0);
- const dataURL = canvas.toDataURL("image/png");
- imgSrc.value = dataURL;
- setTimeout(() => {
- isShowCanvas.value = false;
- isSuccess.value = true;
- }, 10);
- });
-
- // 备用方案
- // action.addEventListener("click", function () {
- // context.drawImage(video, -50, -50, 310, 220);
- // const dataURL = canvas.toDataURL("image/png");
- // imgSrc.value = dataURL;
-
- // setTimeout(() => {
- // isShowCanvas.value = false;
- // isSuccess.value = true;
- // }, 10);
- // console.log(dataURL);
- // });
- };
-
- const takePicture = () => {
- console.log("Take Picture !");
- };
-
- const confirmPhoto = () => {};
-
- const reTry = () => {
- isSuccess.value = false;
- isShowCanvas.value = true;
- imgSrc.value = "";
- setTimeout(() => {
- startCamera();
- }, 10);
- };
-
- onLoad((options) => {
- console.log(options, "options");
- modelUrl.value = options.modelUrl;
- });
-
- onMounted(() => {
- console.log(this);
-
- startCamera();
- });
- </script>
-
- <style lang="scss" scoped>
- .page {
- width: 100vw;
- height: 100vh;
- padding: 0;
-
- .top {
- display: flex;
- width: 100%;
- height: 32%;
- .example {
- width: 60%;
- height: 100%;
- color: #000;
- background-color: #fff;
- }
- .model {
- position: relative;
- width: 40%;
- height: 100%;
- background-color: #000000;
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 100%;
- height: 100%;
- }
- }
- }
- .bottom {
- position: relative;
- width: 100%;
- height: 68%;
- video {
- width: 100%;
- height: 100%;
- }
-
- .selectImg {
- position: absolute;
- left: 65rpx;
- bottom: 75rpx;
- width: 68rpx;
- height: 68rpx;
- border: 5rpx solid #ffffff;
- border-radius: 5rpx;
- z-index: 99;
- img {
- position: absolute;
- left: 50%;
- bottom: 50%;
- transform: translate(-50%, 50%);
- width: 70%;
- height: 70%;
- }
- .uploadText {
- position: absolute;
- left: 50%;
- bottom: -40rpx;
- width: 150%;
- font-size: 20rpx;
- transform: translateX(-40%);
- }
- }
-
- #action {
- position: absolute;
- left: 50%;
- bottom: 45rpx;
- width: 120rpx;
- height: 120rpx;
- transform: translateX(-50%);
- background-color: #ffffff;
- border-radius: 60rpx;
- z-index: 99;
- .circleInside {
- position: absolute;
- left: 50%;
- bottom: 50%;
- transform: translate(-50%, 50%);
- width: 100rpx;
- height: 100rpx;
- background-color: #ffffff;
- border-radius: 50%;
- border: 6rpx solid #000;
- }
- }
-
- .confirm {
- position: absolute;
- left: 50%;
- bottom: 75rpx;
- width: 80rpx;
- height: 80rpx;
- // border: 5rpx solid #ffffff;
- transform: translateX(-50%);
- border-radius: 60rpx;
- z-index: 99;
- img {
- position: absolute;
- left: 50%;
- bottom: 50%;
- transform: translate(-50%, 50%);
- width: 100%;
- height: 100%;
- }
- .uploadText {
- position: absolute;
- left: 50%;
- bottom: -40rpx;
- width: 150%;
- font-size: 20rpx;
- transform: translateX(-32%);
- }
- }
-
- .reTry {
- position: absolute;
- right: 65rpx;
- bottom: 75rpx;
- width: 68rpx;
- height: 68rpx;
- border: 5rpx solid #ffffff;
- border-radius: 5rpx;
- z-index: 99;
- img {
- position: absolute;
- left: 50%;
- bottom: 50%;
- transform: translate(-50%, 50%);
- width: 70%;
- height: 70%;
- }
- .uploadText {
- position: absolute;
- left: 50%;
- bottom: -40rpx;
- width: 150%;
- font-size: 20rpx;
- transform: translateX(-40%);
- }
- }
-
- .preview {
- position: relative;
- width: 100%;
- height: 100%;
- z-index: 1;
- img {
- position: absolute;
- top: 110rpx;
- width: 120%;
- height: 60%;
- }
- }
- }
- }
- </style>
|