diff --git a/src/assets/css/styles.scss b/src/assets/css/styles.scss
index 50f0c33..bf793a1 100644
--- a/src/assets/css/styles.scss
+++ b/src/assets/css/styles.scss
@@ -1,3 +1,7 @@
+@mixin position($type: initial) {
+ position: $type;
+}
+
body {
width: 100vw;
height: 100vh;
@@ -7,9 +11,51 @@ body {
}
canvas {
- position: absolute;
+ @include position(fixed);
+}
+
+#video {
+ @include position(fixed);
+ top: 50%;
+ left: 50%;
+ min-width: 100%;
+ min-height: 100%;
+ width: auto;
+ height: auto;
+ transform: translateX(-50%) translateY(-50%);
}
-video {
- box-shadow: -2px 12px 20px 0 grey;
+@media screen and (min-width: 800px) {
+ body {
+ background-color: #89b1ab;
+
+ &::before {
+ @include position(fixed);
+ content: 'Face Emotion Detector';
+ top: 7%;
+ font-size: 400%;
+ font-family: Arial, sans-serif;
+ color: #fff;
+ }
+ }
+
+ canvas {
+ @include position(absolute);
+ }
+
+ #video {
+ @include position();
+ width: 720px;
+ height: 540px;
+ top: initial;
+ left: initial;
+ min-width: initial;
+ min-height: initial;
+ transform: translateX(0) translateY(0);
+ background-color: #fff;
+ }
+
+ video {
+ box-shadow: -2px 12px 20px 0 grey;
+ }
}
diff --git a/src/assets/js/index.js b/src/assets/js/index.js
index cabd517..eb41f62 100644
--- a/src/assets/js/index.js
+++ b/src/assets/js/index.js
@@ -3,21 +3,29 @@ import '../css/styles.scss';
import * as faceapi from 'face-api.js';
-class Execute {
+class FaceEmotionDetector {
constructor() {
this.MILISECOND_VALUE = 100;
this.video = document.querySelector('#video');
- this.boxSize = {
- width: this.video.width, height: this.video.height
- };
+ this.getBoxSize();
this.promiseFunctions();
this.videoEventListener();
}
+ getBoxSize() {
+ const positionInfo = this.video.getBoundingClientRect();
+ const height = positionInfo.height;
+ const width = positionInfo.width;
+
+ this.boxSize = {width, height};
+
+ return this.boxSize;
+ }
+
startCamera() {
navigator.getUserMedia({
video: {}
@@ -66,6 +74,6 @@ class Execute {
}
document.addEventListener('DOMContentLoaded', () => {
- new Execute();
+ new FaceEmotionDetector();
});
diff --git a/src/index.html b/src/index.html
index a5e3bb8..95032f9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,6 +19,6 @@
-
+