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

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

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

react-native-ffmpegについて

Yu Watanabe

October 02, 2021
Tweet

More Decks by Yu Watanabe

Other Decks in Programming

Transcript

  1. ࡞͍ͬͯΔαʔϏε ▸ ಈըΛݟͳ͕ΒϝϞ͕ॻ͚ΔΞϓϦROLL (ۙʑެ։༧ఆ) ▸ μϯε΍ͦͷଞ֤छεϙʔπͳͲͰ࢖ͬͯ΋Β͍͍ͨ ▸ ୺຤ͷಈըΛબ୒ͯ͠ΞϓϦ಺ʹอଘ͢Δܗࣜ ▸ ศརͳϓϨΠϠʔػೳ

    ▸ όοΫΞοϓػೳ͸FirebaseΛ࢖ͬͯߏங ▸ ϚʔέςΟϯά༻్ͱͯ͠ͷಈըҰ෦੾Γൈ͖ػೳ ▸ ಈը੾Γൈ͖ػೳ΍ಈըΛ͍͘͡ΔػೳΛࠓޙఏڙ༧ఆ ▸ Bare Work fl ow(react-native-unimodules)Ͱߏங ಈըͷ੾Γൈ͖΍͍͘͡Δʹ͸ʁ ͱ͍͏͜ͱΛຊ೔͸঺հ
  2. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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ͰͷτϦϛϯά͕Ͱ͖ͳ͍
  3. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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 ɾॲཧ͕ॏ͍ɺࣗ༝౓͕௿͍
  4. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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 ɾಋೖ͕໘౗ɺΦʔόʔεϖοΫ
  5. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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 ɾฤूը໘΋͋Δ͕ɺ͓͕͔͔ۚΔ…
  6. ಈըΛ͍͘͡ΔϥΠϒϥϦͷબ୒ࢶ ▸ 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Λ࢖͍׳Ε͍ͯΔ + ಋೖ΋ҙ֎ͱ؆୯ ฤूը໘͸؆୯ʹࣗ෼Ͱ࡞Ε͹͍͍
  7. ஫ҙ఺ ▸ ੾Γൈ͖͸͔͔࣌ؒΒͳ͍͚Ͳεέʔϧมߋ͸͕͔͔࣌ؒΔ ▸ όΠφϦ͸ׂͱେ͖ΊʹͳΔ ▸ ୺຤ͳ͍͠͸ϑΝΠϧαΠζʹΑͬͯ͸ॲཧ͕஗͍͜ͱ΋ ▸ ΞϓϦ಺αΠζ͕૿͕͑ͪͳͷͰɺҰ࣌ϑΝΠϧͷ࡟আ͕ඞཁ ▸

    ม׵தʹॲཧ͕ࢭ·ͬͨͱ͖ͷresumeॲཧΛೖΕΔඞཁ͋Γ ▸ ม׵ͨ͠ಈըΛwebͰ΋࢖͍͍ͨ৔߹ͳͲ͸ίʔσοΫʹ஫ҙ ▸ ΧϝϥϩʔϧͷΑ͏ͳฤूػೳΛ࡞Ζ͏ͱ͢Δͱίϯϙʔωϯ τͷ࡞ΓࠐΈ͕ൃੜׂͯ͠ͱਏ͍