Technology of LINE LIVE Client

by LINE Developers

Slide 1

Slide 1 text

LINE LIVE Client ͷ഑৴ٕज़ Akira Iwaya, Line Corporation Streaming Conference #6 @LINE 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

App Tech stacks Android • Kotlin 30%~ and increasing • RxJava2 • Dagger2 • MVVM, Redux • Retroﬁt2 + OkHttp3 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Yuki components 20

Slide 21

Slide 21 text

YukiLive modules 21

Slide 22

Slide 22 text

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