iOS Twitch App을 직접 관찰과 어떤 기술들이 적용되었는지 추측 하면서 진행한 개인 프로젝트입니다.
사용성과 지속 가능하고 확장성을 바탕으로 유지보수가 쉽도록 제작하였습니다.
velog : https://velog.io/@diddbstjr55/Swift-TwitchClone-Project-Prologue
-
Swift, UIKit
-
Firebase( RealtimeDatabase, Storage, Messaging, GoogleSignIn )
-
Nginx Media Server ( RTMP → Nginx → HLS )
-
HaishinKit ( RTMP → Nginx )
-
ACThumbnailGenerator ( HLS → UIImage )
기존 Twitch App과 동일하게 시청 모드와 방송 모드를 분리해 시청, 방송에 집중할 수 있도록 제작하였습니다.
- 실시간 방송 리스트
- 각 사용자별 팔로잉 리스트를 DB에 저장해 원하는 방송을 화면에 노출이 가능하도록 제작.
- 탐색 부분은 팔로잉, 실시간 방송을 YouTube, Twitch와 동일하게 일정 부분 수직 스크롤 시 썸네일 화면에 방송을 재생시켜 사용자가 해당 방송을 미리 볼 수 있도록 제작.
- 찾기 부분 또한, 새로운 방송을 찾아볼 수 있고 일정 부분 가로 스크롤을 진행하면 리스트가 자동으로 고정되면서 방송이 재생되도록 Carousel 효과를 적용.
- 방송 리스트에 노출시킬 썸네일을 서버에 도움 없이 생성해 사용자에게 노출. → 시행착오
- 실시간 방송 시청
- 방송을 시청하던 중 App을 최소화해 다른 작업을 하더라도 PiP기능으로 작업과 시청이 동시에 가능.
- FB Event 기능을 사용해 다른 Users와 실시간 채팅이 가능.
- TouchEvent 발생 시 Timer 설정으로 상세화면을 자동으로 노출, 숨김 기능.
- 방송 송출은 Nginx MediaServer를 이용해 RTMP → HLS 형식으로 실시간 송출, 시청이 가능
- SRT가 아닌 RTMP 형식으로 딜레이가 약 3초 정도 발생.
- 시청자 수 또한, RTMP 환경에서 DB를 이용해 구현할 수 있었지만, 유지보수 측면에 불리해 **** 미구현.
- 카메라 전후면, 가로 세로 전환이 가능하고 전후면 동시 송출이 가능.
- 카메라 전후면 기능은 방송 환경에서 꼭 필요한 기능임으로 구현. 전후면 동시 송출은 실험적인 기능이기에 따로 키고 끌 수 있는 옵션을 넣어 제작하였음.
- 마이크 Mute 기능과 방송 FPS(30, 60) 변경 기능을 추가해 사용성 증가.
- 30FPS 송출에서는 이슈가 없지만, 60FPS에서는 메모리가 작은 기기에서(iPhone 12 Mini) 메모리 부족으로 송출이 중단되는 이슈가 존재함.
- Bit Rate 수준을 낮추어 진행하면 가능은 하지만, 높은 FPS의 의미가 없기에 메모리가 적은 기기들은 기능을 막거나 주의문을 작성할 예정.
- User에게 노출될 카테고리, 타이틀을 설정 가능.
- 스트리머는 사용자에게 노출시킬 타이틀과 카테고리 설정이 가능함. 카테고리를 고를 때 카테고리 이미지를 준비해 스트리머에게 편의성을 제공.
- 카테고리 이미지는 FB Storage에서 받아오지만, 카테고리의 바뀌지 않는 특성을 고려해 Storage에서 받은 이미지를 기기에 저장해 사용.
- User가 시청 중인 채팅방을 실시간으로 확인 가능.
- 스트리밍 특성상 사용자와 스트리머는 소통이 필요하기에 송출 화면에 실시간 채팅을 구현.
- 실시간 채팅은 FB Realtime Database Event 기능을 활용해 구현.
 |
 |
|---|
 |
 |
|---|