はじめに

本記事は、Railsアプリに動画投稿機能を実装したものの、動画のサムネイルが表示されない不具合について解説します。

Railsアプリへの動画投稿機能の実装については下記記事をご参照ください。
【Rails】ポートフォリオに動画投稿機能を実装してみた【AWS S3 + EC2 + CarrierWave + Fog】

事象

動画を投稿する際に、FFmpegを用いてサムネイルを自動生成し、画像をAmazon S3に保存するようにしていました。
しかし、実際に保存した画像を読み込むと下図のように表示されません。

原因

サムネイル画像のContent-Typeが「video/mp4」となっていたことが原因でした。
おそらく動画を保存するのと同時にサムネイルも保存する動きをしていたので、動画と同じContent-Typeで保存されたのだと思われます。

解決策

アップローダはCarrierWaveを利用しています。
CarrierWaveで作成したアップローダのスクリーンショットを作成する処理の中に、content-typeをimage/jpegに変換する処理を入れてあげればOKです。

uploader.rb

  version :screenshot do
    process :screenshot
    def full_filename (for_file = model.logo.file)
      "screenshot.jpg"
    end
  end

  def screenshot
    tmpfile = File.join(File.dirname(current_path), "tmpfile")

    File.rename(current_path, tmpfile)

    movie = FFMPEG::Movie.new(tmpfile)
    movie.screenshot(current_path + ".jpg", {resolution: '512x312' }, preserve_aspect_ratio: :width)
    File.rename(current_path + ".jpg", current_path)
    
    # ここから追加
    # サムネイルのcontent_typeをvideo/mp4→image/jpegに変換する
    file.content_type = "image/jpeg"
    # ここまで追加

    File.delete(tmpfile)
  end

また、既に投稿済みの動画のサムネイル画像のcontent-typeはAmazon S3から直接変更することもできます。
該当サムネイル画像の[メタデータ] > [編集する]をクリックするを下図のようなメタデータの編集画面が表示されるので、ここでContent-Typeの値をimage/jpegに変更します。

おわりに

画像の表示エラーの原因の切り分けを行う際は、コードをじっくり見ることも重要ですが、ブラウザから送られるリクエストやサーバーからのレスポンスもしっかり見ると良いかもしれません。

今回、Content-Typeが原因だったこともレスポンスのデータを見て気づくことができました。

ご参考になれば幸いです…！