Technology of LINE LIVE Client

Streaming Conference #6 @LINE
Akira Iwaya( @hoshi_gaki )

Transcript

1. LINE LIVE Client ͷ഑৴ٕज़ Akira Iwaya, Line Corporation Streaming Conference #6 @LINE 1
2. Akira Iwaya • @hoshi_gaki • 2016೥౓৽ଔ • LINE LIVE Android App ~3 years • ࠷ۙ͸ผαʔϏεͷiOS App • ϦϚΠϯ͘Μ 2
3. Agenda • LINE LIVE App Features • Architecture • Tech stacks • In-house media processing module (Yuki) 3
4. LINE LIVE App • v3.16 since Dec. 2015 • Player Screen • Player Screen (in LINE app) • Broadcast Screen • Home, MyPage, Rankings, Search, ... 4
5. App Tech stacks iOS • Swift 100% • PromiseKit • ReSwift • MVC, MVVM, Redux • ishkawa/APIKit 5
6. App Tech stacks Android • Kotlin 30%~ and increasing • RxJava2 • Dagger2 • MVVM, Redux • Retrofit2 + OkHttp3 6
7. Player Screen Features • Playback LIVE / Archive videos • Chat • Support items • Supporter Rankings • Send Heart 7
8. Playback LIVE / Archive videos • Playing HLS • iOS • AVPlayer • Android • ExoPlayer • MediaPlayer for a few chipsets 8
9. Chat • Real-time communications via chat messages • Max ~1G messages / min • by WebSocket • users' messages • system messages • refs. LINE LIVE νϟοτػೳΛࢧ͑Δ ΞʔΩςΫνϟ1 1 https://engineering.linecorp.com/ja/blog/the-architecture-behind-chatting- on-line-live/ 9
10. Support items • User can cheer LINE LIVER up by sending support items • Items have animations and add more fun • Sent to all viewer and broadcaster via chat • APNG 10
11. Animated PNG • Animated PNG • iOS: APNGKit2 3 • Android: ApngDrawable4 • Both made by LINER 4 https://github.com/line/apng-drawable 3 https://employment.en-japan.com/engineerhub/entry/2019/03/05/103000 2 https://github.com/onevcat/APNGKit 11
12. Broadcast Screen Features • Real-time broadcasting • Adaptive Bitrate • About 170 Face stickers • Filters • Collaboration • Music(karaoke) NEW! • Chat / Support items 12
13. Broadcast Screen Features • Real-time broadcasting • Adaptive Bitrate • About 170 Face stickers • Filters • Collaboration • Music(karaoke) NEW! • Chat / Support items 13
15. Broadcast Screen architecture/ technology • Client - iOS/Android • Yuki - in-house media processing module 15
16. Client Architecture • Redux • iOS: ReSwift • Android: handmade with Kotlin + RxJava2 16
17. Redux • To handle many states/condition during broadcasting • from API server: polling every 10sec • from user: interactions • from Yuki: RTMP status, face stickers, playing music (karaoke), ... 17
18. Yuki • Common C++ based graphics/camera/broadcasting module • For iOS, Android, and Desktop(win/osx) • In-house library made by Yuki team • Equipped in LINE, LINE LIVE 18
19. Yuki Features • Broadcasting • Face stickers • Face morphing • Character Effects • AR • Filters • Karaoke 19
20. Yuki components 20
21. YukiLive modules 21
22. Summary • Built on many in-house components • Each team concentrates on each component • Take advantages of recent mobile architectures • Adding new features & Improving for 4 years and more 22