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
610
react-native-ffmpegを使って動画をいじくりmawasou
react-native-ffmpegについて
Yu Watanabe
October 02, 2021
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
960
gandhの紹介です
watanabeyu
0
24
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
510
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.1k
react-native-unimodulesのススメ
watanabeyu
1
6k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
930
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
280
読みやすいコードの書き方のススメ
watanabeyu
7
4.5k
react-navigation v2 to v3
watanabeyu
0
410
Other Decks in Programming
See All in Programming
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
新宿ダンジョンを可視化してみた
satoshi7190
2
260
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
770
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
180
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
Apache Hive 4 on Treasure Data
ryukobayashi
0
340
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Snowflakeで眠ったデータを起こそう!
estie
0
120
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
For a Future-Friendly Web
brad_frost
172
9k
Automating Front-end Workflow
addyosmani
1356
200k
A better future with KSS
kneath
231
16k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
Web Components: a chance to create the future
zenorocha
305
41k
The Cult of Friendly URLs
andyhume
74
5.7k
Gamification - CAS2011
davidbonilla
76
4.6k
Visualization
eitanlees
136
14k
Atom: Resistance is Futile
akmur
259
25k
Embracing the Ebb and Flow
colly
80
4.1k
The World Runs on Bad Software
bkeepers
PRO
61
6.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ΛͬͯࣗલͰฤूը໘Λ࡞ΔܗʹͳΓ͕ͪ ಈըฤूΛΞϓϦͰΔͷྗ͕ඞཁ
͓ΘΓ