Pro Yearly is on sale from $80 to $50! »

Technology of LINE LIVE Client

Technology of LINE LIVE Client

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

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers

March 27, 2019
Tweet

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
  14. 14

  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