1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 | <meta charset="utf-8" />
|
5 | <title>NHN SDK Demo</title>
|
6 | <link rel="stylesheet" href="/style.css" />
|
7 | <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
|
8 | </head>
|
9 | <body>
|
10 | <div class="page-test">
|
11 |
|
12 | <div id="uid_step_prepare" data-step="STEP_PREPARE" class="step step--prepare">
|
13 | <h1>NHN SDK Demo :: 사용자 정보 초기화 & 사전 등록(시선, 측면)</h1>
|
14 | <h2>사용자 정보 초기화</h2>
|
15 | <table>
|
16 | <tr>
|
17 | <th>AppKey</th>
|
18 | <td>
|
19 | <input type="text" name="appKey" value="" />
|
20 | </td>
|
21 | <td rowspan="4">
|
22 | <button type="button" id="uid_init_user_data">사용자 정보 초기화 + 토큰 재발급</button>
|
23 | </td>
|
24 | </tr>
|
25 | <tr>
|
26 | <th>UserID</th>
|
27 | <td>
|
28 | <input type="text" name="userId" value="test_user" />
|
29 | </td>
|
30 | </tr>
|
31 | <tr>
|
32 | <th>ExamNo</th>
|
33 | <td>
|
34 | <input type="text" name="examNo" value="777" />
|
35 | </td>
|
36 | </tr>
|
37 | </table>
|
38 |
|
39 | <div class="btn-container-next">
|
40 | <button type="button" id="uid_step_prepare_next_btn">시험 대기 페이지 이동</button>
|
41 | </div>
|
42 |
|
43 | <h2>사전 등록(시선, 측면), 얼굴인식 API 테스트 <button type="button" id="uid_prepare_ui_reset">API 폼/결과 초기화</button></h2>
|
44 | <form>
|
45 | <table>
|
46 | <tr>
|
47 | <th>가운데 시선 정보 등록</th>
|
48 | <td>
|
49 | <input type="file" id="uid_behavior_reg_input" style="width: 300px" />
|
50 | <button type="button" id="uid_behavior_reg_btn">가운데 시선 정보 등록 API 호출</button>
|
51 | </td>
|
52 | </tr>
|
53 | <tr>
|
54 | <th>측면 카메라 사전 검증</th>
|
55 | <td>
|
56 | <input type="file" id="uid_pre_check_side_camera_input" style="width: 300px" />
|
57 | <button type="button" id="uid_pre_check_side_camera_btn">측면 카메라 사전 검증 API 호출</button>
|
58 | </td>
|
59 | </tr>
|
60 | <tr>
|
61 | <th>얼굴인식</th>
|
62 | <td>
|
63 | <input type="file" id="uid_face_detect_input" style="width: 300px" />
|
64 | <button type="button" id="uid_face_detect_btn">얼굴인식 API 호출</button>
|
65 | </td>
|
66 | </tr>
|
67 | </table>
|
68 | </form>
|
69 | <div class="api-result prepare">
|
70 | <h2>API 실행 결과</h2>
|
71 | <div id="uid_step_prepare_api_result"></div>
|
72 | </div>
|
73 | <div class="helper">
|
74 | <h2>도움말</h2>
|
75 | <ul>
|
76 | <li>Collector 와 Communicator에 주입될 정보를 제어합니다.</li>
|
77 | <li>Collector 를 이용하여 사전 등록 API를 테스트 할 수 있습니다.</li>
|
78 | <li>API 실행결과를 <em>API 실행 결과</em> 영역에 노출합니다.</li>
|
79 | <li>
|
80 | [사용자 정보 초기화 + 토큰 재발급] 버튼
|
81 | <ul>
|
82 | <li>Communicator와 Collector의 사용자 정보를 초기화 시키고 토큰을 재발급합니다.</li>
|
83 | </ul>
|
84 | </li>
|
85 | <li>
|
86 | [시험 대기 페이지 이동] 버튼
|
87 | <ul>
|
88 | <li>시험 대기 페이지로 이동합니다.</li>
|
89 | </ul>
|
90 | </li>
|
91 | <li>
|
92 | [가운데 시선 정보등록 API 호출] 버튼
|
93 | <ul>
|
94 | <li>Collector를 이용하여 가운데 시선 정보등록 데이터를 전송합니다.</li>
|
95 | </ul>
|
96 | </li>
|
97 | <li>
|
98 | [측면 카메라 사전 검증 API 호출] 버튼
|
99 | <ul>
|
100 | <li>Collector를 이용하여 측면 카메라 사전 검증 데이터를 전송합니다.</li>
|
101 | </ul>
|
102 | </li>
|
103 | <li>
|
104 | [얼굴인식 API 호출] 버튼
|
105 | <ul>
|
106 | <li>Collector를 이용하여 얼굴인식 데이터를 전송합니다.</li>
|
107 | </ul>
|
108 | </li>
|
109 | </ul>
|
110 | </div>
|
111 | </div>
|
112 |
|
113 |
|
114 | <div id="uid_step_ready" data-step="STEP_READY" class="step step--ready">
|
115 | <h1>
|
116 | NHN SDK Demo :: 시험 대기
|
117 | <button type="button" id="uid_begin_test_btn">시험 시작</button>
|
118 | <button type="button" id="uid_user_info_reset_btn">사용자 정보 변경 페이지 이동</button>
|
119 | </h1>
|
120 |
|
121 | <div id="uid_user_info_payload_step2" class="payload">
|
122 | <table>
|
123 | <caption>
|
124 | data
|
125 | </caption>
|
126 | <tbody>
|
127 | <tr>
|
128 | <th scope="row">user info</th>
|
129 | <td id="uid_user_info_preview_step2"></td>
|
130 | </tr>
|
131 | </tbody>
|
132 | </table>
|
133 | </div>
|
134 | <div class="helper">
|
135 | <h2>도움말</h2>
|
136 | <ul>
|
137 | <li>Communicator 를 이용해 Proctor를 제어하는 페이지입니다.</li>
|
138 | <li>
|
139 | [시험 시작] 버튼
|
140 | <ul>
|
141 | <li>Communicator를 이용하여 Proctor 의 시험시작 명령을 실행합니다.</li>
|
142 | </ul>
|
143 | </li>
|
144 | <li>
|
145 | [사용자 정보 변경 페이지 이동] 버튼
|
146 | <ul>
|
147 | <li>사용자 정보 설정 페이지로 이동합니다.</li>
|
148 | </ul>
|
149 | </li>
|
150 | </ul>
|
151 | </div>
|
152 | </div>
|
153 |
|
154 |
|
155 | <div id="uid_step_run" data-step="STEP_RUN" class="step step--run">
|
156 | <h1>NHN SDK Demo :: 시험 중 <button type="button" id="uid_end_test_btn">시험 종료</button></h1>
|
157 |
|
158 | <div id="uid_user_info_payload_step3" class="payload">
|
159 | <table>
|
160 | <caption>
|
161 | data
|
162 | </caption>
|
163 | <tbody>
|
164 | <tr>
|
165 | <th scope="row">user info</th>
|
166 | <td id="uid_user_info_preview_step3"></td>
|
167 | </tr>
|
168 | </tbody>
|
169 | </table>
|
170 | </div>
|
171 |
|
172 | <div class="section">
|
173 | <h2>WebRTC 예시 + 녹화</h2>
|
174 | <div class="button-wrapper">
|
175 | <p id="uid_step3_config_loading">초기 설정 정보를 불러오는 중...</p>
|
176 | <button type="button" id="uid_camera_connect">카메라 연결</button>
|
177 | <button type="button" id="uid_record_start">녹화 시작</button>
|
178 | <button type="button" id="uid_record_end">녹화 저장</button>
|
179 | <button type="button" id="uid_send_voice">음성 감지 요청 API 호출(음성 데이터)</button>
|
180 | <button type="button" id="uid_send_snapshot">행동 감지 요청 API 호출(스냅샷 데이터)</button>
|
181 | <button type="button" id="uid_revoke_token">발급 받은 Token을 취소(강제 만료) API 호출</button>
|
182 | <button type="button" id="uid_run_ui_reset">화면 초기화</button>
|
183 | </div>
|
184 |
|
185 | <div class="video-wrapper">
|
186 | <video id="uid_local_video" width="200" height="150" playsinline autoplay muted></video>
|
187 | </div>
|
188 | <div class="section" id="uid_record_result"></div>
|
189 | </div>
|
190 | <div class="api-result run">
|
191 | <h2>API 실행 결과</h2>
|
192 | <div id="uid_step_run_api_result"></div>
|
193 | </div>
|
194 | <div class="helper">
|
195 | <h2>도움말</h2>
|
196 | <ul>
|
197 | <li>Collector를 이용하여 레코딩된 음성 데이터와 샘플 코드를 전송할 수 있습니다.</li>
|
198 | <li>Communicator를 이용하여 Proctor 의 시험종료 기능을 실행할 수 있습니다.</li>
|
199 | <li>WebRTC 를 이용하여 음성을 레코딩하고 스냅샷을 생성하는 샘플 코드가 작성되어 있습니다.</li>
|
200 | <li>
|
201 | [시험 종료] 버튼
|
202 | <ul>
|
203 | <li>Communicator를 이용하여 시험종료 명령을 실행합니다.</li>
|
204 | </ul>
|
205 | </li>
|
206 | <li>
|
207 | [음성 감지 요청 API 호출] 버튼
|
208 | <ul>
|
209 | <li>Collector를 이용하여 레코딩된 음성 데이터를 전송합니다.</li>
|
210 | </ul>
|
211 | </li>
|
212 | <li>
|
213 | [행동 감지 요청 API 호출] 버튼
|
214 | <ul>
|
215 | <li>Collector를 이용하여 스냅샷 데이터를 전송합니다.</li>
|
216 | </ul>
|
217 | </li>
|
218 | <li>
|
219 | [발급 받은 Token을 취소(강제 만료) API 호출] 버튼
|
220 | <ul>
|
221 | <li>Collector를 이용하여 토큰을 만료시킵니다.</li>
|
222 | <li>토큰이 만료되면 API호출시 만료된 토큰 에러를 반환합니다.</li>
|
223 | </ul>
|
224 | </li>
|
225 | <li>
|
226 | [화면 초기화] 버튼
|
227 | <ul>
|
228 | <li>레코딩 데이터, API 호출결과 등 화면을 초기화 시킵니다.</li>
|
229 | </ul>
|
230 | </li>
|
231 | </ul>
|
232 | </div>
|
233 | </div>
|
234 | </div>
|
235 | </body>
|
236 | <script src="/nhn-cd-sdk.js"></script>
|
237 | <script type="module" src="/js/app.js"></script>
|
238 | </html>
|