Skip to content

choidabom/picpico-client

 
 

Repository files navigation

📸 PicPiCo

SW 정글 5기 나만의 무기

프로젝트 기간: 2022.12.22 ~ 2023.01.28

팀원: 강성우, 김재현, 이원희, 정나린, 최다봄

1. 소개

PicPiCo : take Pictures with Peer Connection

‘친구들과 실제로 만나서 즉석 사진 찍고 꾸미기’를 모바일 App으로 !

시연 및 발표 영상 : YouTube Link
팀스페이스 : Notion Link
PC 크롬환경에서 가장 잘 동작합니다 : PicPiCo 해보기

2. 주요 기능

1. 음성 채팅 (Peer to Peer - N:N Mesh 구현)

📍 각 페이지 전반에 걸친 음성 채팅 기능

2. 사진 찍는 PicPiCo Booth

Drag and Drop 시연 PicPiCo Booth 주요 기능

📍 실제로 같이 있는 것처럼 합성된 캠화면 제공

📍 카카오톡 API를 활용한 참여자 리스트 확인

📍 참여자 리스트 상 순서에 따라 화면에서 참여자들의 앞, 뒤 순서가 정해짐

📍 Drag and Drop으로 이 순서를 조작 가능

📍 참여자간 음소거 여부 및 촬영 횟수 동기화

📍 링크 모달로 카카오톡 공유하기

3. 사진 고르는 Select Pic

📍 촬영한 사진 중 Best 4컷 선택

4. 사진 꾸미는 Decoration

Drawing 시연 Sticker 시연 Decoration 주요 기능

📍 각 참여자가 어떤 사진을 꾸미고 있는 지 실시간 공유
(상단 닉네임 폰트 색 == 꾸미고 있는 사진 테두리의 색)

📍그리기 및 GIF 스티커 붙이기 동시 작업 지원

📍 가상 배경 추가 가능

5. GIF 결과를 확인하는 Download

GIF Download 시연 Download Page 주요 기능

📍 꾸민 결과가 화면상에 보여지고, GIF형식으로 유저 각자의 로컬에 저장 가능

📍 모바일 환경에서는 기기의 사양에 따라 GIF 생성 완료까지 20~30초 시간 소요

📍 GIF 생성이 완료되면 다운로드 버튼이 나타남

3. 기술 스택과 라이브러리

1. 기술 스택

기술스택 설명
NodeJS 자바스크립트 런타임
Nest.js 웹프레임워크
React.js 웹 프론트엔드 프레임워크
Redis 인메모리 저장소 (캐시)
WebRTC 화상 공유 및 음성 채팅(N:N Mesh)
Socket.io 시그널링, 룸 입장, 사진 촬영 및 꾸미기 이벤트 처리
NginX Proxy 서버
COTURN 자체 TURN 서버 구축

2. 주요 라이브러리

라이브러리 설명
배경 제거를 위한 인물 segmentation
gif 생성
방 번호 랜덤 생성
클라이언트-서버 간 이미지 데이터 parsing
촬영된 개별 이미지 합성 처리
컴포넌트간 상태 관리
컴포넌트간 상태 관리
클라이언트-서버간 실시간 통신
chroma-key 처리를 위한 webgl 사용

4. 시작하기

BE

Nginx 설치와 설정, 실행

Redis 설치와 실행

$ git clone https://github.com/TeamWooMoo/picpico-server.git

$ cd picpico-server

$ npm i

$ npm run start

FE

Nginx 설치와 설정, 실행

$ git clone https://github.com/TeamWooMoo/picpico-client.git

$ cd picpico-client/front-src

$ npm i

$ npm run build

$ cd ..

$ npm i

$ npm run start

5. 포스터

About

SWJungle 나만의 무기: PicPiCo

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 94.2%
  • CSS 4.1%
  • Other 1.7%