react-native-ffmpegを使って動画をいじくりmawasou

react-native-ffmpegについて

Transcript

1. 2021/10/02 Θͨͳ΂Ώ͏ REACT-NATIVE-FFMPEGΛ࢖ͬͯ ಈըΛ͍͘͡Γճͦ͏
2. ▸ ಈըΛฤू͢ΔΑ͏ͳΞϓϦΛ࡞Ζ͏͔ͳͱߟ͍͑ͯΔਓ ຊεϥΠυͷλʔήοτ
3. ▸ ࣗݾ঺հ ▸ ·ͱΊ ໨࣍
4. ࣗݾ঺հ Θͨͳ΂Ώ͏ גࣜձࣾg&h CTO + ଞͷ͓ख఻͍ Twitterɿ@hmktsu GitHubɿ@watanabeyu
5. ࡞͍ͬͯΔαʔϏε ▸ ಈըΛݟͳ͕ΒϝϞ͕ॻ͚ΔΞϓϦROLL (ۙʑެ։༧ఆ) ▸ μϯε΍ͦͷଞ֤छεϙʔπͳͲͰ࢖ͬͯ΋Β͍͍ͨ ▸ ୺຤ͷಈըΛબ୒ͯ͠ΞϓϦ಺ʹอଘ͢Δܗࣜ ▸ ศརͳϓϨΠϠʔػೳ ▸ όοΫΞοϓػೳ͸FirebaseΛ࢖ͬͯߏங ▸ ϚʔέςΟϯά༻్ͱͯ͠ͷಈըҰ෦੾Γൈ͖ػೳ ▸ ಈը੾Γൈ͖ػೳ΍ಈըΛ͍͘͡ΔػೳΛࠓޙఏڙ༧ఆ ▸ Bare Work fl ow(react-native-unimodules)Ͱߏங ಈըͷ੾Γൈ͖΍͍͘͡Δʹ͸ʁ ͱ͍͏͜ͱΛຊ೔͸঺հ
6. ຊ೔ͷςʔϚ react-native-ffmpegΛ࢖ͬͯಈըΛ͍͘͡Γճͦ͏
7. ಈըΛ͍͘͡Δཧ૝ܥ ▸ iPhoneͷΧϝϥϩʔϧͷΑ͏ͳܗ ▸ ࿐ޫௐ੔΍৭ௐ੔ͳͲ͸͍Βͳ͍ ▸ ࣌ؒͷτϦϛϯά͕Ͱ͖Ε͹Α͍ ▸ Ξοϓϩʔυ࣌ʹը֯(εέʔϧ)ΛมߋͰ͖ΔͱΑ͍ ▸ iOS/Android྆ରԠ͍ͨ͠ ▸ ӈͷΑ͏ͳը໘͸࠷ѱࣗ෼Ͱ࡞ͬͯ΋͍͍
8. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ expo-image-picker ▸ react-native-image-picker ▸ react-native-image-crop-picker ▸ react-native-video-helper ▸ react-native-video-processing ▸ vesdk-react-native ▸ react-native-ffmpeg
9. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ expo-image-picker ▸ react-native-image-picker ▸ react-native-image-crop-picker ▸ react-native-video-helper ▸ react-native-video-processing ▸ vesdk-react-native ▸ react-native-ffmpeg ɾࡱӨ೔ΛऔಘͰ͖ͳ͍ ɾΦϦδφϧͷID͕औಘͰ͖ͳ͍ ɾAndroidͰͷτϦϛϯά͕Ͱ͖ͳ͍
10. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ expo-image-picker ▸ react-native-image-picker ▸ react-native-image-crop-picker ▸ react-native-video-helper ▸ react-native-video-processing ▸ vesdk-react-native ▸ react-native-ffmpeg ɾॲཧ͕ॏ͍ɺࣗ༝౓͕௿͍
11. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ expo-image-picker ▸ react-native-image-picker ▸ react-native-image-crop-picker ▸ react-native-video-helper ▸ react-native-video-processing ▸ vesdk-react-native ▸ react-native-ffmpeg ɾಋೖ͕໘౗ɺΦʔόʔεϖοΫ
12. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ expo-image-picker ▸ react-native-image-picker ▸ react-native-image-crop-picker ▸ react-native-video-helper ▸ react-native-video-processing ▸ vesdk-react-native ▸ react-native-ffmpeg ɾฤूը໘΋͋Δ͕ɺ͓͕͔͔ۚΔ…
13. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ expo-image-picker ▸ react-native-image-picker ▸ react-native-image-crop-picker ▸ react-native-video-helper ▸ react-native-video-processing ▸ vesdk-react-native ▸ react-native-ffmpeg ffmpegΛ࢖͍׳Ε͍ͯΔ + ಋೖ΋ҙ֎ͱ؆୯ ฤूը໘͸؆୯ʹࣗ෼Ͱ࡞Ε͹͍͍
14. REACT-NATIVE-FFMPEGͰΑ͘࢖͏Ͱ͋Ζ͏ίϚϯυ ϑΝΠϧͷίϐʔ
15. REACT-NATIVE-FFMPEGͰΑ͘࢖͏Ͱ͋Ζ͏ίϚϯυ ઌ಄10ඵ͚ͩ੾Γൈ͍ͯɺԣ320pxʹεέʔϧมߋ
16. REACT-NATIVE-FFMPEGͰΑ͘࢖͏Ͱ͋Ζ͏ίϚϯυ fpsΛ10Ͱԣ320pxͷgifը૾Λ࡞੒
17. REACT-NATIVE-FFMPEGͰΑ͘࢖͏Ͱ͋Ζ͏ίϚϯυ 10ඵ໨ͰαϜωΠϧΛ࡞Δ
18. ஫ҙ఺ ▸ ੾Γൈ͖͸͔͔࣌ؒΒͳ͍͚Ͳεέʔϧมߋ͸͕͔͔࣌ؒΔ ▸ όΠφϦ͸ׂͱେ͖ΊʹͳΔ ▸ ୺຤ͳ͍͠͸ϑΝΠϧαΠζʹΑͬͯ͸ॲཧ͕஗͍͜ͱ΋ ▸ ΞϓϦ಺αΠζ͕૿͕͑ͪͳͷͰɺҰ࣌ϑΝΠϧͷ࡟আ͕ඞཁ ▸ ม׵தʹॲཧ͕ࢭ·ͬͨͱ͖ͷresumeॲཧΛೖΕΔඞཁ͋Γ ▸ ม׵ͨ͠ಈըΛwebͰ΋࢖͍͍ͨ৔߹ͳͲ͸ίʔσοΫʹ஫ҙ ▸ ΧϝϥϩʔϧͷΑ͏ͳฤूػೳΛ࡞Ζ͏ͱ͢Δͱίϯϙʔωϯ τͷ࡞ΓࠐΈ͕ൃੜׂͯ͠ͱਏ͍
19. REACT-NATIVE-FFMPEGΛ࢖ͬͯಈըΛ͍͘͡Γճͦ͏ ·ͱΊ
20. ·ͱΊ ▸ ༷ʑͳϥΠϒϥϦ͕͋Δ͕ɺϕετͳಈըฤूϥΠϒϥϦ͸ͳ͍ ▸ ffmpegΛ࢖ͬͯࣗલͰฤूը໘Λ࡞ΔܗʹͳΓ͕ͪ ಈըฤूΛΞϓϦ಺Ͱ΍Δͷ͸೜଱ྗ͕ඞཁ
21. ͓ΘΓ