映画のエンドロール風の動画を自動生成するツールを作った

【第06回】Funabashi.dev supported by KIKKAKE CREATION
https://funabashidev.connpass.com/event/382000/

Transcript

1. 映画のエンドロール風の動画を 自動生成する君を作った 【第06回】Funabashi.dev supported by KIKKAKE CREATION うーたん
2. 自己紹介 • うーたん ◦ 𝕏：@uutan1108 • バックエンドエンジニア • 勉強会や同人誌を作った りしてます 2
3. 映画のエンドロール風の動画を自動生成する君を 使った場所
6. 5月にもやるので来てね
8. 映画のエンドロール風の 動画を自動生成する君 とは
11. GitHub OHMORIYUSUKE/movie-end-credits
12. 映画のエンドロール風の動画を自動生成する君で 使ったもの
13. Remotion
14. Remotionとは Remotionは、Reactを使用してプログラム的に 動画を作成するためのフレームワークです。 なぜReactで動画を作成するのか？ - ウェブ技術を活用する：CSS、Canvas、SVG、WebGLなど、あらゆる技術 を活用する。 - プログラミングを活用する：変数、関数、API、数学、アルゴリズムを使用し て新しい効果を作成する - Reactを活用する：再利用可能なコンポーネント、強力な構成、高速なリフ レッシュ、パッケージエコシステム 参考：https://github.com/remotion-dev/remotion
15. 映画のエンドロール風の動画を自動生成する君の 仕組み
16. connpass の 参加者一覧CSV Google Photos 参加者から集めた画像 いい感じに動画を生成
17. Google Photos 参加者から集めた画像
19. connpass の 参加者一覧 CSV
21. いい感じ (指定したBGMの長さに合わせて画像 の枚数を決定 し、画像も時系列順に満 遍なく抽出 し、画像の１枚あたりの表 示時間やフェードアウトの時間も設定 できる) に動画を生成
22. いい感じ (指定したBGMの長さに合わせて画像 の枚数を決定 し、画像も時系列順に満 遍なく抽出 し、画像の１枚あたりの表 示時間やフェードアウトの時間も設定 できる) に動画を生成
23. いい感じ (指定したBGMの長さに合わせて画像 の枚数を決定 し、画像も時系列順に満 遍なく抽出し、画像の１枚あたりの表 示時間やフェードアウトの時間も設定 できる) に動画を生成
24. BGM(MP3)の長さを取得
25. afinfo コマンド
26. % afinfo --help Audio File Info Version: 2.0 Copyright 2003-2016, Apple Inc. All Rights Reserved. Specify -h (-help) for command options Usage: afinfo [option...] audio_file(s) Options: (may appear before or after arguments) {-h --help} print help {-b --brief} print a brief (one line) description of the audio file {-r --real} get the estimated duration after obtaining the real packet count { --leaks } run leaks at the end { -i --info } print contents of the InfoDictionary { -u --userprop } 4-cc find and print a property or user data property (as hex string) [does not print to xml] { -c --chunkdata } 4-cc find and print a chunk (as hex string) [does not print to xml] { -x --xml } print output in xml format { --warnings } print warnings if any (by default warnings are not printed in non-xml output mode)
27. afinfo でできること • 音声ファイルの再生時間を取得 • ビットレート / サンプルレート / チャンネル数 を確認 • メタデータ （タグ情報）を取得 • XML形式などで構造化出力 • 必要に応じて正確な再生時間を再計算
28. % afinfo public/music/126_BPM142.mp3 File: public/music/126_BPM142.mp3 File type ID: MPG3 Num Tracks: 1 ---- Data format: 2 ch, 48000 Hz, .mp3 (0x00000000) 0 bits/channel, 0 bytes/packet, 1152 frames/packet, 0 bytes/frame no channel layout. estimated duration: 230.328000 sec audio bytes: 5527872 audio packets: 9597 bit rate: 192000 bits per second packet size upper bound: 968 maximum packet size: 576 audio data file offset: 256809 optimized ----
29. いい感じ (指定したBGMの長さに合わせて画像 の枚数を決定し、 画像も時系列順に満 遍なく抽出 し、画像の１枚あたりの表 示時間やフェードアウトの時間も設定 できる) に動画を生成
30. 画像から撮影時刻を取得
31. Exif
32. Exif に記録されている情報 Exif（エグジフ/イグジフ）は、デジタルカメラやスマホで撮影し た画像（JPEG/TIFF等）にメタデータを埋め込む規格。 埋め込まれる情報： 撮影日時、位置情報（ジオタグ）、撮影方向、撮影機器のメーカー名、撮影機器 のモデル名、画像全体の解像度、水平・垂直方向の単位あたり解像度、シャッ ター速度、絞り（F値）、ISO感度、測光モード、フラッシュ使用の有無、露光補正 ステップ値、焦点距離、色空間（カラースペース）、サムネイル（160×120画素）
33. いい感じ (指定したBGMの長さに合わせて画像 の枚数を決定し、画像も時系列順に満 遍なく抽出し、 画像の１枚あたりの表 示時間やフェードアウトの時間も設定 できる) に動画を生成
34. config ファイルを書けるように
35. { "mediaPath": "public/photos", "audioPath": "public/music/end.mp3", "logoPath": "public/logo/logo.svg", "participantsCsv": "public/credit/participants.csv", "sponsorsCsv": "public/credit/sponsors.csv", "photoDisplaySeconds": 5, "photoFadeSeconds": 0.5 }
36. 映画のエンドロール風の動画を自動生成する君 の完成 🎉
37. 感想
38. 変な画像が紛れていて、 会場で笑いが起こったがご愛嬌
39. 可能なら人間が写真を選んだ方がいい