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
   

   View Slide

2. Akira Iwaya
   • @hoshi_gaki
   • 2016೥౓৽ଔ
   • LINE LIVE Android App ~3 years
   • ࠷ۙ͸ผαʔϏεͷiOS App
   • ϦϚΠϯ͘Μ
   2
   

   View Slide

3. Agenda
   • LINE LIVE App Features
   • Architecture
   • Tech stacks
   • In-house media processing module (Yuki)
   3
   

   View Slide

4. LINE LIVE App
   • v3.16 since Dec. 2015
   • Player Screen
   • Player Screen (in LINE app)
   • Broadcast Screen
   • Home, MyPage, Rankings, Search, ...
   4
   

   View Slide

5. App Tech stacks
   iOS
   • Swift 100%
   • PromiseKit
   • ReSwift
   • MVC, MVVM, Redux
   • ishkawa/APIKit
   5
   

   View Slide

6. App Tech stacks
   Android
   • Kotlin 30%~ and increasing
   • RxJava2
   • Dagger2
   • MVVM, Redux
   • Retrofit2 + OkHttp3
   6
   

   View Slide

7. Player Screen
   Features
   • Playback LIVE / Archive videos
   • Chat
   • Support items
   • Supporter Rankings
   • Send Heart
   7
   

   View Slide

8. Playback LIVE /
   Archive videos
   • Playing HLS
   • iOS
   • AVPlayer
   • Android
   • ExoPlayer
   • MediaPlayer for a few chipsets
   8
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. Broadcast Screen
    Features
    • Real-time broadcasting
    • Adaptive Bitrate
    • About 170 Face stickers
    • Filters
    • Collaboration
    • Music(karaoke) NEW!
    • Chat / Support items
    12
    

    View Slide

13. Broadcast Screen
    Features
    • Real-time broadcasting
    • Adaptive Bitrate
    • About 170 Face stickers
    • Filters
    • Collaboration
    • Music(karaoke) NEW!
    • Chat / Support items
    13
    

    View Slide

14. View Slide

15. Broadcast Screen architecture/
    technology
    • Client - iOS/Android
    • Yuki - in-house media processing module
    15
    

    View Slide

16. Client Architecture
    • Redux
    • iOS: ReSwift
    • Android: handmade with Kotlin + RxJava2
    16
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. Yuki Features
    • Broadcasting
    • Face stickers
    • Face morphing
    • Character Effects
    • AR
    • Filters
    • Karaoke
    19
    

    View Slide

20. Yuki components
    20
    

    View Slide

21. YukiLive modules
    21
    

    View Slide

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
    

    View Slide