nhn-cd-sdk

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>NHN SDK Demo</title> <link rel="stylesheet" href="/style.css" /> <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script> </head> <body> <div class="page-test">  <div id="uid_step_prepare" data-step="STEP_PREPARE" class="step step--prepare"> <h1>NHN SDK Demo :: 사용자 정보 초기화 & 사전 등록(시선, 측면)</h1> <h2>사용자 정보 초기화</h2> <table> <tr> <th>AppKey</th> <td> <input type="text" name="appKey" value="" /> </td> <td rowspan="4"> <button type="button" id="uid_init_user_data">사용자 정보 초기화 + 토큰 재발급</button> </td> </tr> <tr> <th>UserID</th> <td> <input type="text" name="userId" value="test_user" /> </td> </tr> <tr> <th>ExamNo</th> <td> <input type="text" name="examNo" value="777" /> </td> </tr> </table> <div class="btn-container-next"> <button type="button" id="uid_step_prepare_next_btn">시험 대기 페이지 이동</button> </div> <h2>사전 등록(시선, 측면), 얼굴인식 API 테스트 <button type="button" id="uid_prepare_ui_reset">API 폼/결과 초기화</button></h2> <form> <table> <tr> <th>가운데 시선 정보 등록</th> <td> <input type="file" id="uid_behavior_reg_input" style="width: 300px" /> <button type="button" id="uid_behavior_reg_btn">가운데 시선 정보 등록 API 호출</button> </td> </tr> <tr> <th>측면 카메라 사전 검증</th> <td> <input type="file" id="uid_pre_check_side_camera_input" style="width: 300px" /> <button type="button" id="uid_pre_check_side_camera_btn">측면 카메라 사전 검증 API 호출</button> </td> </tr> <tr> <th>얼굴인식</th> <td> <input type="file" id="uid_face_detect_input" style="width: 300px" /> <button type="button" id="uid_face_detect_btn">얼굴인식 API 호출</button> </td> </tr> </table> </form> <div class="api-result prepare"> <h2>API 실행 결과</h2> <div id="uid_step_prepare_api_result"></div> </div> <div class="helper"> <h2>도움말</h2> <ul> <li>Collector 와 Communicator에 주입될 정보를 제어합니다.</li> <li>Collector 를 이용하여 사전 등록 API를 테스트 할 수 있습니다.</li> <li>API 실행결과를 <em>API 실행 결과</em> 영역에 노출합니다.</li> <li> [사용자 정보 초기화 + 토큰 재발급] 버튼 <ul> <li>Communicator와 Collector의 사용자 정보를 초기화 시키고 토큰을 재발급합니다.</li> </ul> </li> <li> [시험 대기 페이지 이동] 버튼 <ul> <li>시험 대기 페이지로 이동합니다.</li> </ul> </li> <li> [가운데 시선 정보등록 API 호출] 버튼 <ul> <li>Collector를 이용하여 가운데 시선 정보등록 데이터를 전송합니다.</li> </ul> </li> <li> [측면 카메라 사전 검증 API 호출] 버튼 <ul> <li>Collector를 이용하여 측면 카메라 사전 검증 데이터를 전송합니다.</li> </ul> </li> <li> [얼굴인식 API 호출] 버튼 <ul> <li>Collector를 이용하여 얼굴인식 데이터를 전송합니다.</li> </ul> </li> </ul> </div> </div>  <div id="uid_step_ready" data-step="STEP_READY" class="step step--ready"> <h1> NHN SDK Demo :: 시험 대기 <button type="button" id="uid_begin_test_btn">시험 시작</button> <button type="button" id="uid_user_info_reset_btn">사용자 정보 변경 페이지 이동</button> </h1> <div id="uid_user_info_payload_step2" class="payload"> <table> <caption> data </caption> <tbody> <tr> <th scope="row">user info</th> <td id="uid_user_info_preview_step2"></td> </tr> </tbody> </table> </div> <div class="helper"> <h2>도움말</h2> <ul> <li>Communicator 를 이용해 Proctor를 제어하는 페이지입니다.</li> <li> [시험 시작] 버튼 <ul> <li>Communicator를 이용하여 Proctor 의 시험시작 명령을 실행합니다.</li> </ul> </li> <li> [사용자 정보 변경 페이지 이동] 버튼 <ul> <li>사용자 정보 설정 페이지로 이동합니다.</li> </ul> </li> </ul> </div> </div>  <div id="uid_step_run" data-step="STEP_RUN" class="step step--run"> <h1>NHN SDK Demo :: 시험 중 <button type="button" id="uid_end_test_btn">시험 종료</button></h1> <div id="uid_user_info_payload_step3" class="payload"> <table> <caption> data </caption> <tbody> <tr> <th scope="row">user info</th> <td id="uid_user_info_preview_step3"></td> </tr> </tbody> </table> </div> <div class="section"> <h2>WebRTC 예시 + 녹화</h2> <div class="button-wrapper"> <p id="uid_step3_config_loading">초기 설정 정보를 불러오는 중...</p> <button type="button" id="uid_camera_connect">카메라 연결</button> <button type="button" id="uid_record_start">녹화 시작</button> <button type="button" id="uid_record_end">녹화 저장</button> <button type="button" id="uid_send_voice">음성 감지 요청 API 호출(음성 데이터)</button> <button type="button" id="uid_send_snapshot">행동 감지 요청 API 호출(스냅샷 데이터)</button> <button type="button" id="uid_revoke_token">발급 받은 Token을 취소(강제 만료) API 호출</button> <button type="button" id="uid_run_ui_reset">화면 초기화</button> </div> <div class="video-wrapper"> <video id="uid_local_video" width="200" height="150" playsinline autoplay muted></video> </div> <div class="section" id="uid_record_result"></div> </div> <div class="api-result run"> <h2>API 실행 결과</h2> <div id="uid_step_run_api_result"></div> </div> <div class="helper"> <h2>도움말</h2> <ul> <li>Collector를 이용하여 레코딩된 음성 데이터와 샘플 코드를 전송할 수 있습니다.</li> <li>Communicator를 이용하여 Proctor 의 시험종료 기능을 실행할 수 있습니다.</li> <li>WebRTC 를 이용하여 음성을 레코딩하고 스냅샷을 생성하는 샘플 코드가 작성되어 있습니다.</li> <li> [시험 종료] 버튼 <ul> <li>Communicator를 이용하여 시험종료 명령을 실행합니다.</li> </ul> </li> <li> [음성 감지 요청 API 호출] 버튼 <ul> <li>Collector를 이용하여 레코딩된 음성 데이터를 전송합니다.</li> </ul> </li> <li> [행동 감지 요청 API 호출] 버튼 <ul> <li>Collector를 이용하여 스냅샷 데이터를 전송합니다.</li> </ul> </li> <li> [발급 받은 Token을 취소(강제 만료) API 호출] 버튼 <ul> <li>Collector를 이용하여 토큰을 만료시킵니다.</li> <li>토큰이 만료되면 API호출시 만료된 토큰 에러를 반환합니다.</li> </ul> </li> <li> [화면 초기화] 버튼 <ul> <li>레코딩 데이터, API 호출결과 등 화면을 초기화 시킵니다.</li> </ul> </li> </ul> </div> </div> </div> </body> <script src="/nhn-cd-sdk.js"></script> <script type="module" src="/js/app.js"></script> </html>