File size: 1,388 Bytes
369fac9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<script setup>
import { ref, watch } from "vue";
const camera = ref(null);
const picture = ref(null);
const getVideo = () => {
navigator.mediaDevices
.getUserMedia({ video: true })
.then((stream) => {
let video = camera.value;
video.srcObject = stream;
video.play();
})
.catch((err) => console.log(err));
};
const takeSnapshot = () => {
const width = 500;
const height = 500;
let video = camera.value;
picture.value.width = width;
picture.value.height = height;
let ctx = picture.value.getContext("2d");
ctx.drawImage(video, 0, 0, width, height);
};
watch(camera, () => {
getVideo();
});
</script>
<template>
<div class="camera">
<div class="camera__wrapper">
<video ref="camera"></video>
</div>
<button @click="takeSnapshot">SNAP!</button>
</div>
<div class="result">
<canvas ref="picture"></canvas>
</div>
</template>
<style lang="scss" scoped>
.camera {
background-color: rgba(0, 255, 255, 0.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
&__wrapper {
width: 60%;
overflow: hidden;
video {
width: 100%;
height: auto;
}
}
}
.result {
margin-top: 2rem;
}
</style>
|