[Rails] About the problem that the video thumbnail automatically created by FFmpeg is not displayed [AWS S3 + EC2 + CarrierWave + Fog]

Introduction

This article explains the problem that the thumbnail of the video is not displayed even though the video posting function is implemented in the Rails application.

Please refer to the following article for the implementation of the video posting function to the Rails application. [Rails] I implemented a video posting function in my portfolio [AWS S3 + EC2 + CarrierWave + Fog]

Event

When posting a video, I used FFmpeg to automatically generate thumbnails and save the images to Amazon S3. However, when the actually saved image is loaded, it is not displayed as shown in the figure below.

Cause

The cause was that the Content-Type of the thumbnail image was "video/mp4". Probably, it was moving to save the thumbnail at the same time as saving the video, so it seems that it was saved with the same Content-Type as the video.

solution

The uploader uses CarrierWave. It is OK if you include the process of converting the content-type to image/jpeg in the process of creating a screenshot of the uploader created with CarrierWave.

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)
    
    #Add from here
    #Thumbnail content_type to video/mp4→image/Convert to jpeg
    file.content_type = "image/jpeg"
    #Add up to here

    File.delete(tmpfile)
  end

You can also change the content-type of thumbnail images of videos that have already been posted directly from Amazon S3. Click [Metadata]> [Edit] of the corresponding thumbnail image. The metadata edit screen as shown below will be displayed. Change the Content-Type value to image/jpeg here.

in conclusion

It is important to take a closer look at the code when isolating the cause of the image display error, but it may also be good to look closely at the request sent from the browser and the response from the server.

This time, I was able to notice by looking at the response data that the Content-Type was the cause.

We hope for your reference…!