見出し画像

GDG Tokyo Monthly Online Tech Talksに登壇しました

本業無職になって請けている案件で色々と挑戦させてもらっているんですが、なかなか細かい情報を公開するのも難しかったのですが、ちょうど良さそうなタイミングでLT募集のイベントがあったので勢いで申し込みました。
ただ、登壇自体かなり久々なので緊張しました。
以下に資料を置いておきます。

ここからは文字起こしです。

文字起こし

Firebaseで動画共有アプリという内容を発表します。
今回話す内容はフリーランスとして請けている案件のものです。
TranSeという会社が運営しているkyuというイメージングブランドのアプリ開発をしています。
過去にはバックパック、クロス、SDカードスリーブを生産・販売していました。
今は物理的なカメラとアプリの開発に注力しています。

ここからはアプリの紹介です。

(2024/02/01現在)ベータ版で一部の方にのみ公開中です。
簡単にいうと部屋を作って友だちを招待して動画を撮影して共有するアプリです。
動画は1動画9秒制限、1日に9つまでアップロード可能になっています。
動画は一度下書きに保存され、6時間に一度公開される仕様です。
Highlight機能でまとめ動画を生成することで、部屋を閉じることができます。

活用しているFirebaseは、

  • Firestore

  • Storage

  • Authentication

  • Functions

  • Messaging

  • Remote Config

  • Crashlytics

  • etc…

色々と網羅していると思います。

動画をStorageで活用する

動画をアプリで活用するためには動画だけがあればいいというわけではありません。
サムネイル画像、動画の長さなどのメタ情報が必要になります。
サムネイルは動画から切り出します。
動画がStorageに上がったら、ffmpegで切り出し、Storageにあげます。
動画・画像のパス、動画の長さはFirestoreに保存します。

サムネイル画像の生成・保存フロー

具体的に動画から画像を抜き出す内容を紹介します。
まず、ffmpeg関連のライブラリをインストールします。

npm install @ffmpeg-installer/ffmpeg fluent-ffmpeg

動画から画像を抜き出すコードはこんな感じです。

/**
 * generate screen shot
 * @param {string} videoFilePath local video path
 * @param {string} newFileName thumbnail file name
 * @return {Promise}
 */
async function takeScreenshot(videoFilePath, newFileName) {
  return new Promise((resolve, reject) => {
    ffmpeg({source: videoFilePath})
        .on("filenames", (filenames) => {})
        .on("end", () => {
          resolve(null);
        })
        .on("error", (error) => {
          reject(error);
        })
        .screenshots({
          count: 1,
          timestamps: [0],
          filename: newFileName,
          folder: os.tmpdir(),
        })
        .aspect(1);
  });
}

Highlight動画を作成する

部屋のオーナーは全ての動画が公開されたらまとめ動画を生成するためにHighlightボタンをタップします。
動画の真ん中の1秒を取得して繋げてHighlight動画にします。
動画を繋ぎ合わせるにはGoogle CloudのTranscoder APIを利用しています。
Storageと互換性があるので使いやすいです。

Highlight動画の生成・保存フロー

Transcoder APIを使い始めるにはドキュメントに詳しく書かれていますので、そちらを参考にしてください。

動画を繋ぎ合わせるためのコードはGistに置いておきましたので、参考になりましたら幸いです。

今後したいこと

動画の選択・動画の中でもHighlightに選択する場所をイイ感じにしたいと思っています。
画像解析や音声解析などの技術が想定されるが、どのように実現できるのか不透明なのが現状です。
また、今後物理カメラとの連携機能が必要になってきます。
ハードウェア連携の方法が不透明なのでこの辺りも調べていく必要があります。
ということで、こういう動画を扱うプロダクトに興味がありましたらお気軽にお声がけください。
現状は正社員での募集というよりは副業など隙間で対応してもらえる人を求めている感じです。

まとめ

動画共有アプリの開発にFirebaseをフル活用しています。
Firebaseだけでは開発できない機能は別途ライブラリをインストールしたり、Google Cloudの機能を利用しています。
こんなサービスへの開発に興味が出た方がいましたらお声がけください。


この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?