[Add] Recording and User image

 import "../scss/styles.scss";
 import "./videoPlayer";
+import "./videoRecorder";

+const recorderContainer = document.getElementById("jsRecordContainer");
+const recordBtn = document.getElementById("jsRecordBtn");
+const videoPreview = document.getElementById("jsVideoPreview");
+// media devices navigator mdn -> video API
+
+let streamObject;
+let videoRecorder;
+const handleVideoData = (event) => {
+  const { data: videoFile } = event;
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(videoFile);
+  link.download = "recorded.webm";
+  document.body.appendChild(link);
+  link.click();
+};
+
+const stopRecording = () => {
+  videoRecorder.stop();
+  recordBtn.removeEventListener("click", stopRecording);
+  recordBtn.addEventListener("click", getVideo);
+  recordBtn.innerHTML = "Start recording";
+};
+const startRecording = () => {
+  videoRecorder = new MediaRecorder(streamObject);
+  videoRecorder.start();
+  videoRecorder.addEventListener("dataavailable", handleVideoData);
+  recordBtn.addEventListener("click", stopRecording);
+};
+const getVideo = async () => {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: true,
+      video: { width: 1280, height: 720 },
+    });
+    videoPreview.srcObject = stream;
+    videoPreview.play();
+    videoPreview.muted = true;
+    recordBtn.innerHTML = "Stop recording.";
+    streamObject = stream;
+    startRecording();
+  } catch (error) {
+    recordBtn.innerHTML = "Sorry, You can't recording.";
+  } finally {
+    recordBtn.removeEventListener("click", getVideo);
+  }
+};
+
+function init() {
+  recordBtn.addEventListener("click", getVideo);
+}
+
+if (recorderContainer) {
+  init();
+}

+.record-container {
+  width: 100%;
+  max-width: 320px;
+  margin-bottom: 50px;
+  video {
+    background-color: $black;
+    width: 100%;
+    margin-bottom: 20px;
+  }
+}

@@ -9,6 +9,7 @@
 @import "partials/socialLogin.scss";
 @import "partials/videoBlock.scss";
 @import "partials/videoPlayer.scss";
+@import "partials/videoRecorder.scss";
 
 @import "pages/home.scss";
 @import "pages/videoDetail.scss";

@@ -118,8 +118,14 @@ export const logout = (req, res) => {
   res.redirect(routes.home);
 };
 
-export const getMe = (req, res) =>
-  res.render("userDetail", { pageTitle: "User Detail", user: req.user });
+export const getMe = async (req, res) => {
+  try {
+    const user = await User.findById(req.user.id).populate("videos");
+    res.render("userDetail", { pageTitle: "User Detail", user });
+  } catch (error) {
+    res.redirect(routes.home);
+  }
+};
 // req.user -> 로그인된 유저
 // export const users = (req, res) => res.render("users", { pageTitle: "Users" });
 

@@ -94,7 +94,7 @@
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _scss_styles_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../scss/styles.scss */ \"./assets/scss/styles.scss\");\n/* harmony import */ var _scss_styles_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_scss_styles_scss__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _videoPlayer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./videoPlayer */ \"./assets/js/videoPlayer.js\");\n/* harmony import */ var _videoPlayer__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_videoPlayer__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\n\n//# sourceURL=webpack:///./assets/js/main.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _scss_styles_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../scss/styles.scss */ \"./assets/scss/styles.scss\");\n/* harmony import */ var _scss_styles_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_scss_styles_scss__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _videoPlayer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./videoPlayer */ \"./assets/js/videoPlayer.js\");\n/* harmony import */ var _videoPlayer__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_videoPlayer__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _videoRecorder__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./videoRecorder */ \"./assets/js/videoRecorder.js\");\n/* harmony import */ var _videoRecorder__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_videoRecorder__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\n\n\n//# sourceURL=webpack:///./assets/js/main.js?");
 
 /***/ }),
 
@@ -109,6 +109,17 @@ eval("const videoContainer = document.getElementById(\"jsVideoPlayer\");\nconst
 
 /***/ }),
 
+/***/ "./assets/js/videoRecorder.js":
+/*!************************************!*\
+  !*** ./assets/js/videoRecorder.js ***!
+  \************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+eval("const recorderContainer = document.getElementById(\"jsRecordContainer\");\nconst recordBtn = document.getElementById(\"jsRecordBtn\");\nconst videoPreview = document.getElementById(\"jsVideoPreview\");\n// media devices navigator mdn -> video API\n\nlet streamObject;\nlet videoRecorder;\nconst handleVideoData = (event) => {\n  const { data: videoFile } = event;\n  const link = document.createElement(\"a\");\n  link.href = URL.createObjectURL(videoFile);\n  link.download = \"recorded.webm\";\n  document.body.appendChild(link);\n  link.click();\n};\n\nconst stopRecording = () => {\n  videoRecorder.stop();\n  recordBtn.removeEventListener(\"click\", stopRecording);\n  recordBtn.addEventListener(\"click\", getVideo);\n  recordBtn.innerHTML = \"Start recording\";\n};\nconst startRecording = () => {\n  videoRecorder = new MediaRecorder(streamObject);\n  videoRecorder.start();\n  videoRecorder.addEventListener(\"dataavailable\", handleVideoData);\n  recordBtn.addEventListener(\"click\", stopRecording);\n};\nconst getVideo = async () => {\n  try {\n    const stream = await navigator.mediaDevices.getUserMedia({\n      audio: true,\n      video: { width: 1280, height: 720 },\n    });\n    videoPreview.srcObject = stream;\n    videoPreview.play();\n    videoPreview.muted = true;\n    recordBtn.innerHTML = \"Stop recording.\";\n    streamObject = stream;\n    startRecording();\n  } catch (error) {\n    recordBtn.innerHTML = \"Sorry, You can't recording.\";\n  } finally {\n    recordBtn.removeEventListener(\"click\", getVideo);\n  }\n};\n\nfunction init() {\n  recordBtn.addEventListener(\"click\", getVideo);\n}\n\nif (recorderContainer) {\n  init();\n}\n\n\n//# sourceURL=webpack:///./assets/js/videoRecorder.js?");
+
+/***/ }),
+
 /***/ "./assets/scss/styles.scss":
 /*!*********************************!*\
   !*** ./assets/scss/styles.scss ***!

@@ -492,6 +492,15 @@ input[type="submit"] {
       font-size: 25px;
       cursor: pointer; }
 
+.record-container {
+  width: 100%;
+  max-width: 320px;
+  margin-bottom: 50px; }
+  .record-container video {
+    background-color: #444444;
+    width: 100%;
+    margin-bottom: 20px; }
+
 .home-videos {
   display: grid;
   grid-template-columns: repeat(6, minmax(150px, 1fr));

@@ -2,6 +2,9 @@ extends layouts/main
 
 block content
     .form-container
+        .record-container#jsRecordContainer
+            video#jsVideoPreview
+            button#jsRecordBtn Start Recording
         form(action=`/videos${routes.upload}`, method="post", enctype="multipart/form-data")
             div.fileUpload
                 label(for="file") Video File

@@ -4,9 +4,9 @@ include mixins/videoBlock
 block content
     .user-profile
         .user-profile__header
-            img.u-avatar(src=user.avatarUrl)
+            img.u-avatar(src=user.avatarUrl.startsWith("http") ? user.avatarUrl : `/${user.avatarUrl}`)
             h4.profile__username=user.name
-        if user.id === loggedUser.id
+        if loggedUser && loggedUser.id === user.id
             .user-profile__btns
                 a(href=`/users${routes.editProfile}`)
                     button 🖌 Edit Profile