Skip to content

Commit eaefa44

Browse files
codejs-krcodejs-kr
authored
Merge pull request #4 from dodortus/feature/refactor
Feature/refactor
2 parents 45d5a01 + 17bd45c commit eaefa44

File tree

14 files changed

+369
-289
lines changed

14 files changed

+369
-289
lines changed

‎backend/controllers/route.js‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎backend/routes/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const ROUTES = require('./urls.js');
2+
3+
/**
4+
* Routes
5+
* @param app
6+
*/
7+
module.exports = (app) => {
8+
ROUTES.forEach(({ url, title, renderFile }) => {
9+
app.get(url, (_, res) => {
10+
res.render(renderFile, {
11+
title: title ? `- ${title}` : '',
12+
});
13+
});
14+
});
15+
};

‎backend/routes/urls.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
module.exports = [
2+
{
3+
title: null,
4+
url: '/',
5+
renderFile: 'index.ejs',
6+
},
7+
{
8+
title: 'WebRTC 소개',
9+
url: '/intro',
10+
renderFile: 'intro.ejs',
11+
},
12+
{
13+
title: '마이크 & 캠 접근하기',
14+
url: '/get-user-media',
15+
renderFile: 'examples/get-user-media/index.ejs',
16+
},
17+
{
18+
title: '비디오에 필터 적용하기',
19+
url: '/filter',
20+
renderFile: 'examples/filter/index.ejs',
21+
},
22+
{
23+
title: '비디오를 이미지로 캡쳐하기',
24+
url: '/capture',
25+
renderFile: 'examples/capture/index.ejs',
26+
},
27+
{
28+
title: '1:1 화상회의 만들기',
29+
url: '/conference',
30+
renderFile: 'examples/conference/index.ejs',
31+
},
32+
{
33+
title: '화면 공유',
34+
url: '/screen-share',
35+
renderFile: 'examples/screen-share/index.ejs',
36+
},
37+
{
38+
title: '파일 & 데이터 전송하기',
39+
url: '/data-channel',
40+
renderFile: 'examples/data-channel/index.ejs',
41+
},
42+
{
43+
title: '음성 인식',
44+
url: '/speech-recognition',
45+
renderFile: 'examples/speech-recognition/index.ejs',
46+
},
47+
{
48+
title: '멀티 스트림',
49+
url: '/multi-stream',
50+
renderFile: 'examples/multi-stream/index.ejs',
51+
},
52+
{
53+
title: '다이나믹 레졸루션',
54+
url: '/dynamic-resolution',
55+
renderFile: 'examples/dynamic-resolution/index.ejs',
56+
},
57+
];

‎backend/server.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
*
66
*/
77
const config = require('./config.json');
8-
const port = process.env.PORT || config.webserver.port;
98
const express = require('express');
109
const app = express();
1110
const ejs = require('ejs');
1211
const http = require('http').Server(app);
12+
const port = process.env.PORT || config.webserver.port;
1313
const root = `${__dirname}/../`;
1414
const path = {
1515
frontend: `${root}/frontend`,
@@ -20,13 +20,13 @@ app.engine('ejs', ejs.renderFile);
2020
app.use(express.static(path.frontend + '/contents'));
2121
app.use(express.static(path.frontend + '/views/examples'));
2222

23-
// Routes ======================================================================
24-
require('./controllers/route.js')(app);
23+
// Routes
24+
require('./routes')(app);
2525

26-
// Socket.io ======================================================================
26+
// Socket.io
2727
require('./controllers/socket.js')(http);
2828

2929
// Server listen
30-
http.listen(port, function() {
30+
http.listen(port, function () {
3131
console.log('WebRTC Lab server running at ' + config.webserver.host + ':' + port);
3232
});

‎frontend/views/examples/capture/index.ejs‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,27 @@
11
<% include ../../partials/header %>
2-
<link href="css/main.css" rel="stylesheet" type="text/css" />
2+
<link href="css/main.css" rel="stylesheet" type="text/css" />
33

4-
<div id="content">
5-
<div class="wrap">
6-
<div class="two-peace">
7-
<div>
8-
<video id="video" width="350" height="260" autoplay></video>
4+
<div id="content">
5+
<div class="wrap">
6+
<div class="two-peace">
7+
<div>
8+
<video id="video" width="350" height="260" autoplay></video>
9+
</div>
10+
<div>
11+
<canvas id="canvas" width="350" height="260"></canvas>
12+
</div>
913
</div>
10-
<div>
11-
<canvas id="canvas" width="350" height="260"></canvas>
12-
</div>
13-
</div>
14-
<button id="btn-camera">1. 비디오출력</button>
15-
<button id="btn-capture">2. 캡쳐</button>
16-
<hr />
14+
<button id="btn-camera">1. 비디오출력</button>
15+
<button id="btn-capture">2. 캡쳐</button>
16+
<hr />
1717

18-
<div id="output">
19-
<strong>Capture images</strong>
20-
<div id="images"></div>
21-
</div>
18+
<div id="output">
19+
<strong>Capture images</strong>
20+
<div id="images"></div>
21+
</div>
2222

23-
<pre>
23+
<pre>
2424
<code class="highlight">$(function() {
25-
navigator.getUserMedia = navigator.getUserMedia ||
26-
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
27-
2825
const videoEl = document.getElementById('video');
2926
const canvasEl = document.getElementById('canvas');
3027
const width = 350;
@@ -63,26 +60,38 @@
6360
$('#images').prepend("&lt;img src=" + imageData + " /&gt;");
6461
}
6562

63+
/**
64+
* 미디어 호출
65+
*/
66+
async function startMedia() {
67+
try {
68+
const stream = await navigator.mediaDevices.getUserMedia({
69+
audio: false,
70+
video: true,
71+
});
72+
success(stream);
73+
} catch (err) {
74+
error(err);
75+
}
76+
}
77+
6678
/**
6779
* 초기 이벤트 바인딩
6880
*/
6981
function initialize() {
7082
canvasEl.width = width;
7183
canvasEl.height = height;
7284

73-
$('#btn-camera').click(function() {
74-
// getUserMedia(접근할 미디어, 성공 callback, 실패 callback);
75-
navigator.getUserMedia({ audio: false, video: true }, success, error);
76-
});
77-
85+
$('#btn-camera').click(startMedia);
7886
$('#btn-capture').click(capture);
7987
}
88+
8089
initialize();
8190
});
8291
</code>
8392
</pre>
93+
</div>
8494
</div>
85-
</div>
8695

87-
<script src="js/main.js"></script>
88-
<% include ../../partials/footer %>
96+
<script src="js/main.js"></script>
97+
<% include ../../partials/footer %>

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

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
$(function() {
2-
navigator.getUserMedia =
3-
navigator.getUserMedia ||
4-
navigator.webkitGetUserMedia ||
5-
navigator.mozGetUserMedia ||
6-
navigator.mediaDevices.getUserMedia;
7-
1+
$(function () {
82
const videoEl = document.getElementById('video');
93
const canvasEl = document.getElementById('canvas');
104
const width = 350;
@@ -23,7 +17,8 @@ $(function() {
2317
* @param err
2418
*/
2519
function error(err) {
26-
console.log('error', arguments);
20+
console.log('error', err);
21+
alert(err.message);
2722
}
2823

2924
/**
@@ -43,18 +38,29 @@ $(function() {
4338
$('#images').prepend('<img src=' + imageData + ' />');
4439
}
4540

41+
/**
42+
* 미디어 호출
43+
*/
44+
async function startMedia() {
45+
try {
46+
const stream = await navigator.mediaDevices.getUserMedia({
47+
audio: false,
48+
video: true,
49+
});
50+
success(stream);
51+
} catch (err) {
52+
error(err);
53+
}
54+
}
55+
4656
/**
4757
* 초기 이벤트 바인딩
4858
*/
4959
function initialize() {
5060
canvasEl.width = width;
5161
canvasEl.height = height;
5262

53-
$('#btn-camera').click(function() {
54-
// getUserMedia(접근할 미디어, 성공 callback, 실패 callback);
55-
navigator.getUserMedia({ audio: false, video: true }, success, error);
56-
});
57-
63+
$('#btn-camera').click(startMedia);
5864
$('#btn-capture').click(capture);
5965
}
6066

0 commit comments

Comments
 (0)