UNPKG

9.36 kBHTMLView Raw
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>