如何解决使用Fluent-ffmpeg将屏幕截图上传到Google云存储桶
我目前正在使用multer将视频上传到我的Google存储桶,并使用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,`${Date.now()}_${file.originalname}`)
},fileFilter: (req,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",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')
}
})
}
解决方法
Here,您可以找到应用程序网页的示例代码,提示用户提供要存储在Cloud Storage中的文件。该代码使用环境变量配置存储桶,并在存储桶中创建一个新的Blob以上传文件数据。
我希望这些信息对您有帮助。
,您可能需要在使用 ffmpeg 生成它们后移动它们。
例如,我将它们写入 ffmpeg 输出的临时目录,然后移动到云函数中的 Cloud Storage 存储桶:
const uploadResult = await bucket.upload(targetTempFilePath,{
destination: targetStorageFilePath,gzip: true
});
不确定您使用的是哪种环境(flex、cloud run 等),但这些是我参考的说明,并且通常与您要遵循的步骤相同:https://firebase.google.com/docs/storage/extend-with-functions
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。