JavaScript 썸네일형 리스트형 Test Selfie segmentation on unreal editor 모바일 사용(Google IP Web Cam) 1.0 버전 실행 순서: IP Webcam 실행 - 제작한 MediaPipe 웹 실행 - NDI 실행 및 웹 페이지 스크린 캡쳐 - 언리얼 실행 - url 입력 방식: 원본 이미지와, 웹 페이지의 변환 이미지를 언리얼에서 합성. 결과: 굉장히 느리고 실행 과정이 복잡. JS code 더보기 // main.js // HTMLElements setting const inputElement = document.getElementsByClassName('input_video')[0]; const outputElement = document.getElementsByClassName('output_canvas')[0]; const canvasCtx = outputEle.. 웹 앱 호스팅 처음으로 웹앱을 배포해보았다. node와 js만 사용했으며, 작업 진행 순서는 다음과 같다. 1. 웹 앱 테스트 서버 준비(express + yarn + npm) 2. TTS 기능(Azure) 적용 3. 영상과 TTS 음성 합성 후 녹화 기능 적용 4. 웹서버(Azure) 구축 및 배포 1~3번은 별 문제 없이 진행 되었으나, 4번 과정에 난항이 많았다. a. Azure 배포 상태: VS Code 확장프로그램 배포 과정 중 Zip 이후에 실패가 떴다. 이유를 찾을 수 없었다. 프로젝트 내 모든 import, export 구조는 ES6 방식으로 사용하고 있었다. 해결1: 아예 프로젝트를 지우고 다시 배포했다. 방법1: 배포 시도 중 로그가 길게 나오는 경우 확인. 덕분에 검색으로 임시파일 폴더의 용량 문제.. Merge video and audio (with MediaRecorder) 목표 Video tag 영상과 TTS api 결과물을 하나로 합친다. (비디오 파일(.mp4)과 오디오 리턴값(.wav)을 하나로 묶는다.) 결과물을 파일로 저장한다. 문제1 - 방법 검색 방법 검색에 시간이 상당히 소요되었다. (다른 일도 있었지만, 이틀이나 걸렸다.) 먼저 Video tag + Audio tag 형식으로 자료조사를 했는데, 암만 찾아도 방법을 못 찾았다. 방법에 대한 확신이 크지 않았는데도 키워드를 너무 뚜렷하게 잡았었다. 해결 이후 영상 + 오디오 형식의 넓은 키워드에서 찾다가 방법을 발견했다. 발견한 방법은 목표로 삼았던 상황과 차이가 있었는데, Video tag 대신 Canvas 요소를 사용하는 방법이었다. 또한 캔버스에서 영상을 재생하는 방법도 추가적으로 검색 한 후 테스트를 .. 지뢰찾기 Git : 소스링크 JavaScript 공부를 위해 Youtube영상을 시청하던 중 중급으로 넘어가면서 지뢰찾기 실습예제를 만났다. 계속 영상을 봤더니 지쳐서 잠시 강의시청은 멈추고 일단 먼저 만들어보기로 했다. 예전에는 신경 안 썼는데, 생각보다 기능이 많다. 1. 맵 크기 및 지뢰 수량 설정 2. 플레이타임 확인 3. 클리어 확인 4. 게임오버 확인 5. 근처의 지뢰 수량 확인 6. 지뢰가 2칸 이내에 없는 안전 타일들 모두 확인 7. 첫 클릭 시 지뢰는 게임오버 무효 8. 좌클릭 : 한 개의 타일 확인 9. 우클릭 : 한 개의 타일에 깃발을 심었다가 뺐다가 10. 휠클릭 : 반자동 기능. 주변타일초함 총 9개의 타일 확인. (주변에 지뢰 없으면 체크) 사용 언어 : HTML, Javascript(+.. 이전 1 다음
