【React Native】「react-native-create-thumbnail」ライブラリで動画からサムネイル画像を生成する

タイトル通り、動画ファイルからサムネイル画像を生成する方法についてです。
ライブラリは他にもありましたが、今回、動画 URL と一緒にヘッダー情報を追加する必要があったので、こちらの「react-native-create-thumbnail」ライブラリを使用することにしました。

GitHub のページはこちらから。

GitHub – souvik-ghosh/react-native-create-thumbnail: iOS/Android thumbnail generator with support for both local and remote videos
https://github.com/souvik-ghosh/react-native-create-thumbnail

導入方法は、まず下記コマンドでライブラリをインストールします。

npm i react-native-create-thumbnail --save

// iOS の場合は下記も実行
npx pod-install

準備は以上です。

あとは、サムネイルを生成したいページに下記を追加し、ライブラリをインポートします。

import { createThumbnail } from "react-native-create-thumbnail";

そして、サムネイルを生成したいタイミングで下記を実行します。

createThumbnail({
  url: '[動画のURL]',
  headers: {
    /* ヘッダー情報 */
  }
})
.then(response => {
  // 生成されたサムネイル画像データ
  this.setState({ thumbnail: response.path });
})
.catch(err => console.log({ err }));

サムネイルの生成に成功すると、9行目が実行され、サムネイル画像のパスを state に保存しています。
処理としては以上です。
実際に <Image> コンポーネントで表示したところ、問題なくサムネイル画像が表示されました！

動画ファイルを扱うのはこれが初めてだったので、サムネイル画像が必要だということすら気がつくのが遅かったのですが…こんな便利なライブラリがあるとは知りませんでした。
予想以上に簡単に実装できたので良かったです！

以上、React Native で動画からサムネイル画像を生成できるライブラリ「react-native-create-thumbnail」のご紹介でした。
ご参考になれば幸いです。