Tweet
Tweet

Slide 1

Slide 1 text

2021/10/02 Θͨͳ΂Ώ͏ REACT-NATIVE-FFMPEGΛ࢖ͬͯ ಈըΛ͍͘͡Γճͦ͏

Slide 2

Slide 2 text

▸ ಈըΛฤू͢ΔΑ͏ͳΞϓϦΛ࡞Ζ͏͔ͳͱߟ͍͑ͯΔਓ ຊεϥΠυͷλʔήοτ

Slide 3

Slide 3 text

▸ ࣗݾ঺հ ▸ ·ͱΊ ໨࣍

Slide 4

Slide 4 text

ࣗݾ঺հ Θͨͳ΂Ώ͏ גࣜձࣾg&h CTO + ଞͷ͓ख఻͍ Twitterɿ@hmktsu GitHubɿ@watanabeyu

Slide 5

Slide 5 text

࡞͍ͬͯΔαʔϏε ▸ ಈըΛݟͳ͕ΒϝϞ͕ॻ͚ΔΞϓϦROLL (ۙʑެ։༧ఆ) ▸ μϯε΍ͦͷଞ֤छεϙʔπͳͲͰ࢖ͬͯ΋Β͍͍ͨ ▸ ୺຤ͷಈըΛબ୒ͯ͠ΞϓϦ಺ʹอଘ͢Δܗࣜ ▸ ศརͳϓϨΠϠʔػೳ ▸ όοΫΞοϓػೳ͸FirebaseΛ࢖ͬͯߏங ▸ ϚʔέςΟϯά༻్ͱͯ͠ͷಈըҰ෦੾Γൈ͖ػೳ ▸ ಈը੾Γൈ͖ػೳ΍ಈըΛ͍͘͡ΔػೳΛࠓޙఏڙ༧ఆ ▸ Bare Work fl ow(react-native-unimodules)Ͱߏங ಈըͷ੾Γൈ͖΍͍͘͡Δʹ͸ʁ ͱ͍͏͜ͱΛຊ೔͸঺հ

Slide 6

Slide 6 text

ຊ೔ͷςʔϚ react-native-ffmpegΛ࢖ͬͯಈըΛ͍͘͡Γճͦ͏

Slide 7

Slide 7 text

ಈըΛ͍͘͡Δཧ૝ܥ ▸ iPhoneͷΧϝϥϩʔϧͷΑ͏ͳܗ ▸ ࿐ޫௐ੔΍৭ௐ੔ͳͲ͸͍Βͳ͍ ▸ ࣌ؒͷτϦϛϯά͕Ͱ͖Ε͹Α͍ ▸ Ξοϓϩʔυ࣌ʹը֯(εέʔϧ)ΛมߋͰ͖ΔͱΑ͍ ▸ iOS/Android྆ରԠ͍ͨ͠ ▸ ӈͷΑ͏ͳը໘͸࠷ѱࣗ෼Ͱ࡞ͬͯ΋͍͍

Slide 8

Slide 8 text

ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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

Slide 9

Slide 9 text

ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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ͰͷτϦϛϯά͕Ͱ͖ͳ͍

Slide 10

Slide 10 text

ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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 ɾॲཧ͕ॏ͍ɺࣗ༝౓͕௿͍

Slide 11

Slide 11 text

ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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 ɾಋೖ͕໘౗ɺΦʔόʔεϖοΫ

Slide 12

Slide 12 text

ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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 ɾฤूը໘΋͋Δ͕ɺ͓͕͔͔ۚΔ…

Slide 13

Slide 13 text

ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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Λ࢖͍׳Ε͍ͯΔ + ಋೖ΋ҙ֎ͱ؆୯ ฤूը໘͸؆୯ʹࣗ෼Ͱ࡞Ε͹͍͍

Slide 14

Slide 14 text

REACT-NATIVE-FFMPEGͰΑ͘࢖͏Ͱ͋Ζ͏ίϚϯυ ϑΝΠϧͷίϐʔ

Slide 15

Slide 15 text

REACT-NATIVE-FFMPEGͰΑ͘࢖͏Ͱ͋Ζ͏ίϚϯυ ઌ಄10ඵ͚ͩ੾Γൈ͍ͯɺԣ320pxʹεέʔϧมߋ

Slide 16

Slide 16 text

REACT-NATIVE-FFMPEGͰΑ͘࢖͏Ͱ͋Ζ͏ίϚϯυ fpsΛ10Ͱԣ320pxͷgifը૾Λ࡞੒

Slide 17

Slide 17 text

REACT-NATIVE-FFMPEGͰΑ͘࢖͏Ͱ͋Ζ͏ίϚϯυ 10ඵ໨ͰαϜωΠϧΛ࡞Δ

Slide 18

Slide 18 text

஫ҙ఺ ▸ ੾Γൈ͖͸͔͔࣌ؒΒͳ͍͚Ͳεέʔϧมߋ͸͕͔͔࣌ؒΔ ▸ όΠφϦ͸ׂͱେ͖ΊʹͳΔ ▸ ୺຤ͳ͍͠͸ϑΝΠϧαΠζʹΑͬͯ͸ॲཧ͕஗͍͜ͱ΋ ▸ ΞϓϦ಺αΠζ͕૿͕͑ͪͳͷͰɺҰ࣌ϑΝΠϧͷ࡟আ͕ඞཁ ▸ ม׵தʹॲཧ͕ࢭ·ͬͨͱ͖ͷresumeॲཧΛೖΕΔඞཁ͋Γ ▸ ม׵ͨ͠ಈըΛwebͰ΋࢖͍͍ͨ৔߹ͳͲ͸ίʔσοΫʹ஫ҙ ▸ ΧϝϥϩʔϧͷΑ͏ͳฤूػೳΛ࡞Ζ͏ͱ͢Δͱίϯϙʔωϯ τͷ࡞ΓࠐΈ͕ൃੜׂͯ͠ͱਏ͍

Slide 19

Slide 19 text

REACT-NATIVE-FFMPEGΛ࢖ͬͯಈըΛ͍͘͡Γճͦ͏ ·ͱΊ

Slide 20

Slide 20 text

·ͱΊ ▸ ༷ʑͳϥΠϒϥϦ͕͋Δ͕ɺϕετͳಈըฤूϥΠϒϥϦ͸ͳ͍ ▸ ffmpegΛ࢖ͬͯࣗલͰฤूը໘Λ࡞ΔܗʹͳΓ͕ͪ ಈըฤूΛΞϓϦ಺Ͱ΍Δͷ͸೜଱ྗ͕ඞཁ

Slide 21

Slide 21 text

͓ΘΓ