最近项目要求,一键生成房子的推荐视频,选几张图,加上联系人的方式就是一个简单的视频,因为有web端、小程序端,为了多端口用,决定放在服务器端生成。
目前用的是react中的nextjs来开发项目。
nextjs中怎样用ffcreator上一章有讲到过,这里不再详细说了,考虑多端口用,并发和处理视频合成等一系列对服务器压力过大的情况,这时候队列就有必要了。
一通了解后FFCreatorCenter能实现队列。官方有koa实现队列的例子。看过后怎样在nextjs中实现?
找准思路:
1.制作预设视频动画模板,意思是合成视频的模板提前预设好的,比如静态内容都提前准备好
2.用户选择想要的视频模板,然后根据视频模板添加动态内容,排队生成视频
3.查询视频生成情况
按照上述流程,我们开干:
1。制作预设视频模板,做一个模板比如相册视频,放到模板详情接口中调用AddTPL(id)
import { FFAlbum, FFScene, FFImage, FFCreator, FFRect, FFText, FFCreatorCenter } from 'ffcreator'
const path = require('path');
import colors from 'colors'
export default function AddTPL({ id }) {
FFCreatorCenter.createTemplate(id, async ({ }) => {
//用官方图片例子
const ROOT_PATH = process.cwd();
const bg1 = path.join(ROOT_PATH, '/assets/imgs/bg/05.jpg');
console.log(bg1)
const bg2 = path.join(ROOT_PATH, '/assets/imgs/bg/04.jpeg');
const logo2 = path.join(ROOT_PATH, '/assets/imgs/logo/logo2.png');
const cloud = path.join(ROOT_PATH, '/assets/imgs/cloud.png');
const mars = path.join(ROOT_PATH, '/assets/imgs/mars.png');
const rock = path.join(ROOT_PATH, '/assets/imgs/rock.png');
const title = path.join(ROOT_PATH, '/assets/imgs/title.png');
const audio = path.join(ROOT_PATH, '/assets/audio/05.wav');
const outputDir = path.join(ROOT_PATH, '/video/');
const cacheDir = path.join(ROOT_PATH, '/cache/');
FFCreator.setFFmpegPath('D:/nextAppV2/H5/ffmpeg