Feature/refactor

frontend/views/examples/capture/index.ejs

@@ -16,78 +16,81 @@
       <hr />
 
       <div id="output">
-        <strong>Capture images</strong>
+        <strong>Capture images (아래 캡쳐된 이미지를 클릭하면 다운로드 할 수 있습니다)</strong>
         <div id="images"></div>
       </div>
 
       <pre>
-      <code class="highlight">$(function() {
-  const videoEl = document.getElementById('video');
-  const canvasEl = document.getElementById('canvas');
-  const width = 350;
-  const height = 260;
+      <code class="highlight">const $video = document.getElementById('video');
+const $canvas = document.getElementById('canvas');
+const width = 350;
+const height = 260;
 
-  /**
-   * getUserMedia 성공
-   * @param stream
-   */
-  function success(stream) {
-    videoEl.srcObject = stream;
-  }
+/**
+ * 비디오 이미지 캡쳐
+ */
+function capture() {
+  const context = $canvas.getContext('2d');
+  context.drawImage($video, 0, 0, width, height);
+  insertImage($canvas.toDataURL('image/png'));
+}
 
-  /**
-   * getUserMedia 실패
-   * @param err
-   */
-  function error(err) {
-    console.log('error', arguments);
-  }
+/**
+ * 캡쳐한 이미지 노출 함수
+ * @param imageData
+ */
+function insertImage(imageData) {
+  const $images = document.querySelector('#images');
+  const $img = document.createElement('img');
 
-  /**
-   * 비디오 이미지 캡쳐
-   */
-  function capture() {
-    const context = canvasEl.getContext('2d');
-    context.drawImage(videoEl, 0, 0, width, height);
-    insertImage(canvasEl.toDataURL('image/png'));
-  }
+  $img.src = imageData;
+  $images.insertBefore($img, $images.childNodes[0]);
+}
 
-  /**
-   * 캡쳐한 이미지 노출 함수
-   * @param imageData
-   */
-  function insertImage(imageData) {
-    $('#images').prepend("&lt;img src=" + imageData + " /&gt;");
-  }
+/**
+  * getUserMedia 성공
+  * @param stream
+  */
+function success(stream) {
+  $video.srcObject = stream;
+}
+
+/**
+  * getUserMedia 실패
+  * @param err
+  */
+function error(err) {
+  console.log('error', err);
+  alert(err.message);
+}
 
-  /**
-   * 미디어 호출
-   */
-  async function startMedia() {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        audio: false,
-        video: true,
-      });
-      success(stream);
-    } catch (err) {
-      error(err);
-    }
+/**
+  * 미디어 호출
+  */
+async function startMedia() {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: true,
+    });
+    success(stream);
+  } catch (err) {
+    error(err);
   }
+}
 
-  /**
-   * 초기 이벤트 바인딩
-   */
-  function initialize() {
-    canvasEl.width = width;
-    canvasEl.height = height;
+/**
+  * 초기 이벤트 바인딩
+  */
+function initialize() {
+  $canvas.width = width;
+  $canvas.height = height;
 
-    $('#btn-camera').click(startMedia);
-    $('#btn-capture').click(capture);
-  }
+  document.querySelector('#btn-camera').addEventListener('click', startMedia);
+  document.querySelector('#btn-capture').addEventListener('click', capture);
+}
 
-  initialize();
-});
+initialize();   
 </code>
    	</pre>
     </div>

frontend/views/examples/capture/js/main.js

@@ -1,68 +1,76 @@
-$(function () {
-  const videoEl = document.getElementById('video');
-  const canvasEl = document.getElementById('canvas');
-  const width = 350;
-  const height = 260;
+const $video = document.getElementById('video');
+const $canvas = document.getElementById('canvas');
+const width = 350;
+const height = 260;
 
-  /**
-   * getUserMedia 성공
-   * @param stream
-   */
-  function success(stream) {
-    videoEl.srcObject = stream;
-  }
+/**
+ * 비디오 이미지 캡쳐
+ */
+function capture() {
+  const context = $canvas.getContext('2d');
+  context.drawImage($video, 0, 0, width, height);
+  insertImage($canvas.toDataURL('image/png'));
+}
 
-  /**
-   * getUserMedia 실패
-   * @param err
-   */
-  function error(err) {
-    console.log('error', err);
-    alert(err.message);
-  }
+/**
+ * 캡쳐한 이미지 노출 함수
+ * @param imageData
+ */
+function insertImage(imageData) {
+  const $images = document.querySelector('#images');
+  const $img = document.createElement('img');
+  const $a = document.createElement('a');
+  const fileName = `[WebRTC 연구실] Capture - ${new Date().getTime()}`;
 
-  /**
-   * 비디오 이미지 캡쳐
-   */
-  function capture() {
-    const context = canvasEl.getContext('2d');
-    context.drawImage(videoEl, 0, 0, width, height);
-    insertImage(canvasEl.toDataURL('image/png'));
-  }
+  $img.src = imageData;
+  $a.href = imageData;
+  $a.download = fileName;
+  $a.appendChild($img);
 
-  /**
-   * 캡쳐한 이미지 노출 함수
-   * @param imageData
-   */
-  function insertImage(imageData) {
-    $('#images').prepend('<img src=' + imageData + ' />');
-  }
+  $images.insertBefore($a, $images.childNodes[0]);
+}
 
-  /**
-   * 미디어 호출
-   */
-  async function startMedia() {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        audio: false,
-        video: true,
-      });
-      success(stream);
-    } catch (err) {
-      error(err);
-    }
-  }
+/**
+ * getUserMedia 성공
+ * @param stream
+ */
+function success(stream) {
+  $video.srcObject = stream;
+}
 
-  /**
-   * 초기 이벤트 바인딩
-   */
-  function initialize() {
-    canvasEl.width = width;
-    canvasEl.height = height;
+/**
+ * getUserMedia 실패
+ * @param err
+ */
+function error(err) {
+  console.log('error', err);
+  alert(err.message);
+}
 
-    $('#btn-camera').click(startMedia);
-    $('#btn-capture').click(capture);
+/**
+ * 미디어 호출
+ */
+async function startMedia() {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: true,
+    });
+    success(stream);
+  } catch (err) {
+    error(err);
   }
+}
+
+/**
+ * 초기 이벤트 바인딩
+ */
+function initialize() {
+  $canvas.width = width;
+  $canvas.height = height;
+
+  document.querySelector('#btn-camera').addEventListener('click', startMedia);
+  document.querySelector('#btn-capture').addEventListener('click', capture);
+}
 
-  initialize();
-});
+initialize();

frontend/views/examples/conference/css/main.css

@@ -35,6 +35,16 @@ input[type='text'] {
   vertical-align: top;
 }
 
+#create-wrap {
+  overflow: hidden;
+  max-height: 200px;
+  transition: all 0.3s ease-out;
+}
+
+#create-wrap.slideup {
+  max-height: 0;
+}
+
 /********************************************
   Below room style
 *********************************************/