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
<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>