File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
2024-11-19
<template>
<div class="camera">
<div class="header flex justify-between title-box">
<button type="button" class="flex align-center" @click="goToPage('Dashboard')">
<svg-icon type="mdi" :path="mdilChevronLeft" style="width: 50px; height: 50px;"></svg-icon>
<p class="title"> 이전글</p>
</button>
<button @click="captureAndGoToPhotoDesign">
<img src="../../../resources/img/btn19_74s_normal.png" alt="">
</button>
</div>
<div class="body" ref="body">
<div id="container" ref="container">
<video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
@canplay="onVideoLoaded"></video>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiWindowClose } from '@mdi/js';
import { mdilChevronRight, mdilChevronLeft } from '@mdi/light-js';
import axios from "axios";
export default {
data() {
return {
selectedTab: 'tab1',
username: '',
password: '',
mdiWindowClose: mdiWindowClose,
mdilChevronLeft: mdilChevronLeft,
showModal: false,
searchOpen: false,
photoTaken: false,
stream: null,
videoReady: false,
}
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
closeModal() {
this.showModal = false;
if (this.stream) {
let tracks = this.stream.getTracks();
tracks.forEach(track => track.stop());
this.stream = null;
}
},
buttonSearch() {
this.searchOpen = true;
},
closeBtn() {
this.searchOpen = false;
},
onVideoLoaded() {
this.videoReady = true;
this.adjustContainerSize();
},
adjustContainerSize() {
const video = this.$refs.modalVideoElement;
const container = this.$refs.container;
const body = this.$refs.body;
if (video && container) {
container.style.width = `${video.videoWidth}px`;
container.style.height = `${video.videoHeight}px`;
body.style.height = `${video.videoHeight}px`;
}
},
captureAndGoToPhotoDesign() {
const video = this.$refs.modalVideoElement;
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');
// 좌우 반전 적용
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageDataUrl = canvas.toDataURL('image/png');
this.$router.push({ name: 'PhotoDesign', query: { image: imageDataUrl } });
}
},
mounted() {
// Clear localStorage when the component is mounted
localStorage.removeItem('capturedImage');
this.videoReady = false;
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
const modalVideo = this.$refs.modalVideoElement;
modalVideo.srcObject = stream;
this.stream = stream;
modalVideo.addEventListener('loadedmetadata', this.adjustContainerSize);
})
.catch(error => {
console.log("error>>>>>>>>", error);
});
},
components: {
SvgIcon
},
}
</script>
<style>
.body {
width: 1435px;
height: auto;
margin: 0 auto;
}
#container {
position: relative;
margin: auto;
border: 10px #333 solid;
display: flex;
justify-content: center;
align-items: center;
}
video {
width: 100%;
height: auto;
background-color: #666;
}
.mirrored {
transform: scaleX(-1);
}
</style>