React-NativeでiOSのローカル動画の取り扱いについて。

react-nativeにてローカル動画を読み込む方法。

ローカル動画の読み込みについて、調べてみたところ、nativeコード（object-c/swift）のブリッジにて行なうといったものが多くみられました。
react-nativeのみでiOSのローカル動画をいじる方法はないのでしょうか？

動画のファイル管理について。

AVFoundationの理解が必要ですか？軽くドキュメントを読みましたが、なかなか難しいです。

やりたいこと。

ローカル動画を読み込み、reactnativeのviewに表示。（サムネイルのみの読み込みでも可）
読み込んだ動画を何かしら編集する。

わからないこと

ローカル動画ファイルを読み込んだ時、react-nativeに動画を表示するファイルと、編集するファイルは同一のファイル形式で読み込むことになるのか？

react-nativeにローカル動画を表示する方法。

追記添付です。

行動規範の内容に同意します

回答1件

カメラロールから動画を取得するには次の API が使えます。

https://facebook.github.io/react-native/docs/cameraroll.html

また、動画編集ということですが、次が割りと使われているパッケージのようです。
それぞれでやりたいことができるかどうか調べてみてください。

react-native-video

https://github.com/react-native-community/react-native-video
多く使われているようだが最近メンテナンスされていない

react-native-video-processing

https://github.com/shahen94/react-native-video-processing
それなりに使われている、メンテナンスもされている

投稿2018/02/19 11:48

januswel

総合スコア301

MOTOMUR

2018/02/22 06:15

ありがとうございます。参考にしてCamerarollの導入できました。ありがとうございます。 react-native-video-prosessingは挑戦中なのですが、先ほどのURLのGettingStartedの6の項目がやり方ができず、導入に困っています。どのようにImport RNVideoProcessing.h into your project_name-bridging-header.h. したらいいのでしょう。

januswel

2018/02/22 07:42

Objective-C の `#import ` を使えばいいのではないでしょうか ?

MOTOMUR

2018/02/22 09:07

質問文に添付として写真を追加します。プロジェクトファイルの下に、<projectname>-bridging-header.hというファイル作成し、 #importとしたのですが、これであってますでしょうか？ stackOverFlowにはbuild setting の swift compiler - code generationにてこのヘッダーファイルを参照するようにする、というようにみたのですが、そのような設定項目が見当たりませんでした。。

januswel

2018/02/22 09:10

これじゃないでしょうか https://github.com/shahen94/react-native-video-processing/issues/144

MOTOMUR

2018/02/22 10:05

https://www.youtube.com/watch?v=HRjgeT6NQJM&feature=youtu.be この通りやってみたのですが、 error opening input file '/Users/owner/works/videoCut/node_modules/react-native-video-processing/ios/RNVideoProcessing-Bridging-Header.h' (No such file or directory) このようなものが表示されてしまいます。なぜiosフォルダを参照しているか謎です。 <project name>-bridging-Header.hの#importが間違っているのでしょうか？

januswel

2018/02/22 10:27

ios フォルダーが Xcode プロジェクトのルートディレクトリーだから参照しています VideoProcessing-Bridging-Header.h のおかれている場所にあわせて設定をいれこんでみてください http://www.ict-fractal.com/blog/2012/07/xcode.html

MOTOMUR

2018/02/23 05:02

searchのheader search pathに存在するパスを指定しましたが、同じエラーが出続けています。 "$(SRCROOT)/../ios/RNVideoProcessing/RNVideoProcessing-Bridging-Header.h" これが存在するパスなのですが、これを指定してもbuild falseとなり、エラーのログに反映しないので、別の部分で参照しているのだと思います。質問文にエラーコードの写真を載せます。

januswel

2018/02/23 06:13

あ、 react-native-video-processing レベルでのビルドエラーが出ているのですね本家 issue に解決法が載っていましたこれが議論 issue https://github.com/shahen94/react-native-video-processing/issues/143 これが解決方法 https://github.com/shahen94/react-native-video-processing/issues/144

MOTOMUR

2018/02/23 07:01

私もこの解決方法を見て、 appname-Bridging-Header.hを作成し、 #ifndef AppName_Bridging_Header_h #define AppName_Bridging_Header_h #import <React/RCTRootView.h> #import <React/RCTView.h> #import "React/RCTBridgeModule.h" #import "RNVideoProcessing.h" #endif /* AppName_Bridging_Header_h */ として、object-c bridging　Headerに追加しました。しかし、まだ先ほどのエラーが表示されてしまいます。。

januswel

2018/02/23 07:42

作ったファイルが appname-Bridging-Header.h なのであればそれを `#import` しないといけないですね

MOTOMUR

2018/02/23 07:54

Appname-Bridging-Header.hに #import "Appname-Bridging-Header.h" を追加するということでしょうか？？

januswel

2018/02/23 08:20

フォルダ構成 ``` / ios/ appname-Bridging-Header.h ``` Objective-C Bridging Header に appname-Bridging-Header.h を追加するということだと思うのですが

MOTOMUR

2018/02/24 03:01

ごめんなさい。それは行いました。昨日の16:01の僕のチャットにあるように、作って追加までは行ったのですが、動作しません。