Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react-native-ffmpegを使って動画をいじくりmawasou
Search
Yu Watanabe
October 02, 2021
Programming
0
950
react-native-ffmpegを使って動画をいじくりmawasou
react-native-ffmpegについて
Yu Watanabe
October 02, 2021
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Bolt 🤝 Expo
watanabeyu
0
340
npm packageとリリースとモノレポ
watanabeyu
0
64
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
35
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
660
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.3k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
330
Other Decks in Programming
See All in Programming
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Devoxx BE - Local Development in the AI Era
kdubois
0
140
NIKKEI Tech Talk#38
cipepser
0
250
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.9k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
430
What's new in Spring Modulith?
olivergierke
1
170
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
450
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
270
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Scaling GitHub
holman
463
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Transcript
2021/10/02 ΘͨͳΏ͏ REACT-NATIVE-FFMPEGΛͬͯ ಈըΛ͍͘͡Γճͦ͏
▸ ಈըΛฤू͢ΔΑ͏ͳΞϓϦΛ࡞Ζ͏͔ͳͱߟ͍͑ͯΔਓ ຊεϥΠυͷλʔήοτ
▸ ࣗݾհ ▸ ·ͱΊ ࣍
ࣗݾհ ΘͨͳΏ͏ גࣜձࣾg&h CTO + ଞͷ͓ख͍ Twitterɿ@hmktsu GitHubɿ@watanabeyu
࡞͍ͬͯΔαʔϏε ▸ ಈըΛݟͳ͕ΒϝϞ͕ॻ͚ΔΞϓϦROLL (ۙʑެ։༧ఆ) ▸ μϯεͦͷଞ֤छεϙʔπͳͲͰͬͯΒ͍͍ͨ ▸ ͷಈըΛબͯ͠ΞϓϦʹอଘ͢Δܗࣜ ▸ ศརͳϓϨΠϠʔػೳ
▸ όοΫΞοϓػೳFirebaseΛͬͯߏங ▸ ϚʔέςΟϯά༻్ͱͯ͠ͷಈըҰ෦Γൈ͖ػೳ ▸ ಈըΓൈ͖ػೳಈըΛ͍͘͡ΔػೳΛࠓޙఏڙ༧ఆ ▸ Bare Work fl ow(react-native-unimodules)Ͱߏங ಈըͷΓൈ͖͍͘͡Δʹʁ ͱ͍͏͜ͱΛຊհ
ຊͷςʔϚ react-native-ffmpegΛͬͯಈըΛ͍͘͡Γճͦ͏
ಈըΛ͍͘͡Δཧܥ ▸ iPhoneͷΧϝϥϩʔϧͷΑ͏ͳܗ ▸ ࿐ޫௐ৭ௐͳͲ͍Βͳ͍ ▸ ࣌ؒͷτϦϛϯά͕Ͱ͖ΕΑ͍ ▸ Ξοϓϩʔυ࣌ʹը֯(εέʔϧ)ΛมߋͰ͖ΔͱΑ͍ ▸
iOS/Android྆ରԠ͍ͨ͠ ▸ ӈͷΑ͏ͳը໘࠷ѱࣗͰ࡞͍͍ͬͯ
ಈըΛ͍͘͡ΔϥΠϒϥϦͷબࢶ ▸ 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
ಈըΛ͍͘͡ΔϥΠϒϥϦͷબࢶ ▸ 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ͰͷτϦϛϯά͕Ͱ͖ͳ͍
ಈըΛ͍͘͡ΔϥΠϒϥϦͷબࢶ ▸ 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 ɾॲཧ͕ॏ͍ɺࣗ༝͕͍
ಈըΛ͍͘͡ΔϥΠϒϥϦͷબࢶ ▸ 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 ɾಋೖ͕໘ɺΦʔόʔεϖοΫ
ಈըΛ͍͘͡ΔϥΠϒϥϦͷબࢶ ▸ 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 ɾฤूը໘͋Δ͕ɺ͓͕͔͔ۚΔ…
ಈըΛ͍͘͡ΔϥΠϒϥϦͷબࢶ ▸ 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Λ͍׳Ε͍ͯΔ + ಋೖҙ֎ͱ؆୯ ฤूը໘؆୯ʹࣗͰ࡞Ε͍͍
REACT-NATIVE-FFMPEGͰΑ͘͏Ͱ͋Ζ͏ίϚϯυ ϑΝΠϧͷίϐʔ
REACT-NATIVE-FFMPEGͰΑ͘͏Ͱ͋Ζ͏ίϚϯυ ઌ಄10ඵ͚ͩΓൈ͍ͯɺԣ320pxʹεέʔϧมߋ
REACT-NATIVE-FFMPEGͰΑ͘͏Ͱ͋Ζ͏ίϚϯυ fpsΛ10Ͱԣ320pxͷgifը૾Λ࡞
REACT-NATIVE-FFMPEGͰΑ͘͏Ͱ͋Ζ͏ίϚϯυ 10ඵͰαϜωΠϧΛ࡞Δ
ҙ ▸ Γൈ͖͔͔࣌ؒΒͳ͍͚Ͳεέʔϧมߋ͕͔͔࣌ؒΔ ▸ όΠφϦׂͱେ͖ΊʹͳΔ ▸ ͳ͍͠ϑΝΠϧαΠζʹΑͬͯॲཧ͕͍͜ͱ ▸ ΞϓϦαΠζ͕૿͕͑ͪͳͷͰɺҰ࣌ϑΝΠϧͷআ͕ඞཁ ▸
มதʹॲཧ͕ࢭ·ͬͨͱ͖ͷresumeॲཧΛೖΕΔඞཁ͋Γ ▸ มͨ͠ಈըΛwebͰ͍͍ͨ߹ͳͲίʔσοΫʹҙ ▸ ΧϝϥϩʔϧͷΑ͏ͳฤूػೳΛ࡞Ζ͏ͱ͢Δͱίϯϙʔωϯ τͷ࡞ΓࠐΈ͕ൃੜׂͯ͠ͱਏ͍
REACT-NATIVE-FFMPEGΛͬͯಈըΛ͍͘͡Γճͦ͏ ·ͱΊ
·ͱΊ ▸ ༷ʑͳϥΠϒϥϦ͕͋Δ͕ɺϕετͳಈըฤूϥΠϒϥϦͳ͍ ▸ ffmpegΛͬͯࣗલͰฤूը໘Λ࡞ΔܗʹͳΓ͕ͪ ಈըฤूΛΞϓϦͰΔͷྗ͕ඞཁ
͓ΘΓ