使用 Fluent-ffmpeg 将屏幕截图上传到谷歌云存储桶答案

【问题标题】：Upload screenshots to google cloud storage bucket with Fluent-ffmpeg使用 Fluent-ffmpeg 将屏幕截图上传到谷歌云存储桶
【发布时间】：2020-12-12 17:31:15
【问题描述】：

我目前正在使用 multer 将视频上传到我的谷歌存储桶，并使用 fluent-ffmpeg 来捕获视频的缩略图。视频正在正确上传到存储桶中，但不是来自 ffmpeg 的缩略图。如何将缩略图的位置更改到我的 Google 存储桶？

后端视频上传

require ('dotenv').config()
const express = require('express');
const router = express.Router();
const multer = require("multer");
var ffmpeg = require('fluent-ffmpeg');
const multerGoogleStorage = require('multer-google-storage');
const { Video } = require("../models/Video");
const {User} = require("../models/User")
const { auth } = require("../middleware/auth");


var storage = multer({
    destination: function (req, file, cb) {
        cb(null, 'videos/')
    },
    filename: function (req, file, cb) {
        cb(null, `${Date.now()}_${file.originalname}`)
    },
    fileFilter: (req, file, cb) => {
        const ext = path.extname(file.originalname)
        if (ext !== '.mp4' || ext !== '.mov' || ext !== '.m3u' || ext !== '.flv' || ext !== '.avi' || ext !== '.mkv') {
            return cb(res.status(400).end('Error only videos can be uploaded'), false);
        }
        cb(null,true)
    }
})
// Set location to google storage bucket
var upload = multer({ storage: multerGoogleStorage.storageEngine() }).single("file")

router.post("/uploadfiles", (req, res) => {

    upload(req, res, err => {
        if (err) {
            return res.json({sucess: false, err})
        }
        return res.json({ success: true, filePath: res.req.file.path, fileName: res.req.file.filename})
    })
});

后端缩略图上传

router.post("/thumbnail", (req, res) => {

    let thumbsFilePath = "";
    let fileDuration = "";

    ffmpeg.ffprobe(req.body.filePath, function (err, metadata) {
        console.dir(metadata);
        console.log(metadata.format.duration);

        fileDuration = metadata.format.duration;
    })


    ffmpeg(req.body.filePath)
        .on('filenames', function (filenames) {
            console.log('Will generate ' + filenames.join(', '))
            thumbsFilePath = "thumbnails/" + filenames[0];
        })
        .on('end', function () {
            console.log('Screenshots taken');
            return res.json({ success: true, thumbsFilePath: thumbsFilePath, fileDuration: fileDuration })
        })
        //Can this be uploaded to google storage?
        .screenshots({
            // Will take 3 screenshots
            count: 3,
            folder: '/thumbnails/',
            size: '320x240',
            //Names file w/o extension
            filename:'thumbnail-%b.png'
        });
});

前端视频上传

 const onDrop = (files) => {
        let formData = new FormData();
        const config = {
            header: {'content-type': 'multipart/form-data'}
        }
        console.log(files)
        formData.append("file", files[0])

        axios.post('/api/video/uploadfiles', formData, config)
            .then(response => {
                if (response.data.success) {
                    let variable = {
                        filePath: response.data.filePath,
                        fileName: response.data.fileName
                    }
                    setFilePath(response.data.filePath)

                    //Thumbnail
                    axios.post('/api/video/thumbnail', variable)
                        .then(response => {
                            if (response.data.success) {
                                setDuration(response.data.fileDuration)
                                setThumbnail(response.data.thumbsFilePath)
                            } else {
                                alert("Failed to generate a thumbnail");
                            }
                        })

                } else {
                    alert('Failed to save video to the server')
                }
            })
    }

【问题讨论】：

标签： node.js google-cloud-platform ffmpeg google-cloud-storage mern

【解决方案1】：

Here您可以找到应用程序网页的示例代码，提示用户提供要存储在云存储中的文件。代码是使用环境变量配置bucket，并在bucket中创建一个新的blob来上传文件数据。

我希望这些信息对您有所帮助。

【讨论】：

【解决方案2】：

您可能只需要在使用 ffmpeg 生成它们后移动它们。

例如，我将它们写入 ffmpeg 输出的临时目录，然后移动到我的云函数中的 Cloud Storage 存储桶：

    const uploadResult = await bucket.upload(targetTempFilePath, {
      destination: targetStorageFilePath,
      gzip: true
    });

不确定您使用的是哪个环境（flex、云运行等），但这些是我参考的说明，通常是您想要遵循的相同步骤：https://firebase.google.com/docs/storage/extend-with-functions

【讨论】：