Media Handling for Animated Sticker in Sticker Maker

Transcript

1. © LY Corporation Media Handling for Animated Sticker in Sticker Maker LINEϠϑʔɹApp Dev෦ Sticker Maker App Dev νʔϜ Dev Lead ΆʔɹPo-Hao Chen
2. © LY Corporation - Άʔ - Android Engineer - 2020.11 LINE Fukuoka - 2024.01 LINE Yahoo - LINE Client Dev -> LINE Sticker Maker Dev Lead - X: @kuramu1108 - ࠷ۙͷ೰Έ - ࣾһূ๨Ε͕ͪ - Xcode࢖͍ͮΒ͍ 2 Speaker
3. © LY Corporation LINEελϯϓϝʔΧʔ 3
4. © LY Corporation Ξχϝʔγϣϯελϯϓ 4 - Ϣʔβʔͷಈը͔Βελϯϓ࡞Δ - LINEΞϓϦ্ͰͰൢചͰ͖Δɺ࢖͑Δ
5. © LY Corporation Timeline 5 July 2022 First Animated Sticker Proposal made Late 2022 Project Kick Off Early 2023 Android Prototype Jan 2024 Android Beta Release Mar 2024 iOS Beta Release Mid-Late 2023 Release Planning Development
6. © LY Corporation Challenges and Improvement 6 - In-House APNG encoder to fulfill LINE Creators Market restriction - Video frame extraction - Customized Camera screen - Customized Gallery screen - Some other stuff - APNG in compose (Not included today) - etc
7. © LY Corporation Animated Sticker Guidelines 7 • Loops: 1 – 4 loops per sticker whose combined length does not exceed 4 seconds. • Playback time: Up to 4 seconds per sticker. • PNG frame limits per APNG: Between 5 and 20 frames. • The maximum file size for each image is 300 KB. If submitting all images in a single ZIP file, make sure the ZIP file is 20 MB or less.
8. © LY Corporation Solutions 8 - If Created APNG with full color info (RGBA) the file would be too big - Converting 4 second video to RGBA encode apng of 320 * 270 would over 1MB - Need to encode with indexed color and optimization color palette - Color space is limited -> Color info optimization
9. © LY Corporation PNG Spec 9 - http://www.libpng.org/pub/png/spec/1.2/PNG-Contents.html
10. © LY Corporation PNG Spec 10 - http://www.libpng.org/pub/png/spec/1.2/PNG-Contents.html - 90 pages in PDF
11. © LY Corporation PNG Spec 11 - http://www.libpng.org/pub/png/spec/1.2/PNG-Contents.html - 90 pages in PDF - In-House customized encoder - Kotlin Encoder - C++ Encoder with NDK - Color palette optimization with dynamic color palette and color quantization
12. © LY Corporation Video Frame Extraction and Encode APNG 12 Project Info (Video uri, decoration etc
13. © LY Corporation Video Frame Extraction and Encode APNG 13 Project Info (Video uri, decoration etc Color Palette Creation
14. © LY Corporation Video Frame Extraction and Encode APNG 14 Project Info (Video uri, decoration etc Extract Critical Video Frames (1/2 of frames) Color Palette Creation
15. © LY Corporation Video Frame Extraction and Encode APNG 15 Project Info (Video uri, decoration etc Extract Critical Video Frames (1/2 of frames) Color Palette Creation Apply Transform and decoration
16. © LY Corporation Video Frame Extraction and Encode APNG 16 Project Info (Video uri, decoration etc Extract Critical Video Frames (1/2 of frames) Color Palette Creation Apply Transform and decoration Calculate Color Palette
17. © LY Corporation Video Frame Extraction and Encode APNG 17 Project Info (Video uri, decoration etc Color Palette Creation
18. © LY Corporation Video Frame Extraction and Encode APNG 18 Project Info (Video uri, decoration etc Apply Transform and decoration to Each Frame Color Palette Creation
19. © LY Corporation Video Frame Extraction and Encode APNG 19 Project Info (Video uri, decoration etc Apply Transform and decoration to Each Frame Final Encoding with Optimized Palette Color Palette Creation
20. © LY Corporation Video Frame Extraction and Encode APNG 20 Project Info (Video uri, decoration etc Apply Transform and decoration to Each Frame Final Encoding with Optimized Palette Color Palette Creation
21. © LY Corporation Customized Camera 21 - CameraX - https://developer.android.com/media/camera/ camerax - https://medium.com/@seungbae2/camera2- vs-camerax-a-comparison-of-android- camera-apis-5db2b5ff302e
22. © LY Corporation Customized Photo Picker 22 - Android Photo Picker - Android 11 (API 30)+ - https://developer.android.com/training/ data-storage/shared/photopicker - MediaStore - Flexible apis - https://developer.android.com/training/ data-storage/shared/media
23. © LY Corporation - Android Photo Picker - Android 11 (API 30)+ - https://developer.android.com/training/ data-storage/shared/photopicker - MediaStore - Flexible apis - https://developer.android.com/training/ data-storage/shared/media Customized Photo Picker 23
24. © LY Corporation - Android Photo Picker - Android 11 (API 30)+ - https://developer.android.com/training/ data-storage/shared/photopicker - MediaStore - Flexible apis - https://developer.android.com/training/ data-storage/shared/media Customized Photo Picker 24
25. © LY Corporation Next Steps 25 - ৽͍͠ػೳ௥Ճ͢Δ༧ఆ
26. © LY Corporation ελϯϓΛ࡞Γ·͠ΐ͏ʂ Thank You!