Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Technology of LINE LIVE Client

Technology of LINE LIVE Client

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

LINE Developers

March 27, 2019
Tweet

More Decks by LINE Developers

Other Decks in Technology

Transcript

  1. Akira Iwaya • @hoshi_gaki • 2016೥౓৽ଔ • LINE LIVE Android

    App ~3 years • ࠷ۙ͸ผαʔϏεͷiOS App • ϦϚΠϯ͘Μ 2
  2. Agenda • LINE LIVE App Features • Architecture • Tech

    stacks • In-house media processing module (Yuki) 3
  3. LINE LIVE App • v3.16 since Dec. 2015 • Player

    Screen • Player Screen (in LINE app) • Broadcast Screen • Home, MyPage, Rankings, Search, ... 4
  4. App Tech stacks iOS • Swift 100% • PromiseKit •

    ReSwift • MVC, MVVM, Redux • ishkawa/APIKit 5
  5. App Tech stacks Android • Kotlin 30%~ and increasing •

    RxJava2 • Dagger2 • MVVM, Redux • Retrofit2 + OkHttp3 6
  6. Player Screen Features • Playback LIVE / Archive videos •

    Chat • Support items • Supporter Rankings • Send Heart 7
  7. Playback LIVE / Archive videos • Playing HLS • iOS

    • AVPlayer • Android • ExoPlayer • MediaPlayer for a few chipsets 8
  8. 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
  9. 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
  10. 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
  11. Broadcast Screen Features • Real-time broadcasting • Adaptive Bitrate •

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

    About 170 Face stickers • Filters • Collaboration • Music(karaoke) NEW! • Chat / Support items 13
  13. 14

  14. 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
  15. 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
  16. Yuki Features • Broadcasting • Face stickers • Face morphing

    • Character Effects • AR • Filters • Karaoke 19
  17. 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