전체보기

openVidu와 Teachable machine 사용해보기

우리 프로젝트는 실시간 화상 채팅을 하며 다같이 운동을 하도록 제공하는 서비스를 제공한다. 운동 동작(스쿼트, 런지 등등)을 카운트 해주어야 하는데, 이를 위해서 웹캠 영상을 통해 실시간으로 자세를 분석하고 미리 학습시켜둔 데이터로 올바르게 수행하는지 체크한다. 운동 동작 학습을 위해서 구글의 teachale machine을 사용한다. teachable machine 홈페이지에서 쉽게 동작 학습 시켜 모델을 만들 수 있다. 문제는 react에서 모델을 불러와서 영상의 포즈를 학습 시키는것 teachable machine에서 웹에서 쉽게 사용 가능하도록 구현해둔 라이브러리인 Teachable Machine Pose를 사용하면 웹캠 생성부터 쉽게 이용이 가능하다. //웹캠을 생성,초기화,시작하는 코드 web..

OpenVidu 적용 테스트

지난주는 기본적인 페이지들 UI 뼈대 잡는 작업정도 진행했고 이번주는 본격적으로 기능 구현 개발 시작했다. OpenVidu로 화상 채팅방을 만들어야 하는데 openvidu 홈페이지의 예제가 잘 되어 있어서 바로 구현이 가능했다. 근데... 원래라면 마이크 아이콘, 카메라 아이콘 등등 기본적으로 toolbar에 주어진 아이콘들도 그대로 쓰려고 했는데 예제에서 사용된 material-ui 컴포넌트와 현재 프로젝트의 react버전이 맞지 않아서 오류가 났다. 버전에 맞게 수정해서 쓸까 하다가 ui 프레임워크를 사용하지 않으려고 이번에 tailwind를 도입했는데 material-ui를 설치하고싶진 않았다. 그래서 해당하는 아이콘 손수 하나씩 찾아서 적용했다.. 이것들 또 CSS작업 해주고 아래와 같이 만들었는..

웹팩, webpack

웹팩 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러 모듈 번들러 : 웹 애플리케이션을 구성하는 자원(HTML,CSS,JS, Images 등)을 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만드는 도구 웹팩에서의 모듈 웹 애플리케이션을 구성하는 모든 자원을 의미 (HTML, CSS, JS등 ) 모듈 번들링 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작 빌드, 번들링, 변환은 모두 같은 의미. 웹팩이 필요한 이유 파일 단위의 js 모듈 관리의 필요성 웹 개발 작업 자동화 도구 웹 서버 배포시 HTML,CSS,JS 압축, 이미지 압축, CSS 전처리기 변환과 같은 작업을 해야하는데 이런 일을 자동화 해 주는 도구 등장 웹 애플리케이션의 ..

[axios] axios 인터셉터 추가하기

access token이 필요한 요청일 때 마다 해당 요청 메소드에 앞서 계속해서 header에 토큰을 추가 해 주었다. 이런 방식이 두가지 이유로 맘에 들지 않았는데 1. 중복된 코드 반복해서 작성 2. 토큰이 필요한 요청인지 아닌지 판단하는 과정 반복 axios 인터셉터를 통해 이를 해결하는 방법을 찾았다. request 요청이 이루어지기 전에, response가 이루어진 직후 미리 설정, 결과 값을 가공하는 인터셉터를 통해 한번에 관리가 가능하다. 기존 코드 //api/index.js function Instance() { const instance = axios.create({ baseURL: "url", headers: { "Content-type": "application/json", }, }..

OpenVidu API 구성 살펴보기 - 클래스

OpenVidu API를 살펴보며 유용한 클래스들을 알아봅니다. https://docs.openvidu.io/en/stable/tutorials/openvidu-insecure-react/ openvidu-insecure-react - OpenVidu Docs From here you can search these documents. Enter your search terms below. docs.openvidu.io 실행 방법은 위 링크의 설명 대로 도커에서 서버를 돌리고 리액트 앱을 실행시켜서 로컬호스트 3000으로 접속한다. 이렇게 실행시켜놓고 코드와 문서를 살펴본다. 이 튜토리얼은 클라이언트 사이드부분만 다루고 있으므로 openvidu - browser 의 내용만을 다룬다. OpenVidu Cla..

WebRTC를 구현하기 위한 프레임워크 Kurento VS OpenVidu

Kurento, OpenVidu 차이점 Kurento WebRTC 미디어 서버이자 클라이언트, api세트 www와 스마트폰 플랫폼을 위해 비디오 앱 개발을 간편하게 도와줌 쿠렌토 미디어 서버는 그룹간의 통신, 녹음,방송 시처각 흐름 라우팅 기술을 지원 다른 미디어 서버와 차별화된 기능 : 컴퓨터 비전, 음성 분석 등 미디어 처리 기능 Openvidu 웹 모바일 환경에서 영상 통화 기능을 쉽게 추가할 수 있도록 하는 오픈소스 플랫폼 다양한 데모, 기술 스택 제공 WebRTC 미디어 서버 구현시 소모되는 리소스 줄일 수 있는게 장점. 화면 공유, 메세지 브로드캐스팅 등 화상 회의 앱에 필요한 대부분의 기능을 오픈소스로 제공 OpenVidu Brower 클라이언트에서 사용할 라이브러리 화상 통화 생성, 비디오..