如何创建网站老鱼网,网站上的专题 怎么设计,天津建站管理系统信息,成套小说网站模板最近项目要求#xff0c;一键生成房子的推荐视频#xff0c;选几张图#xff0c;加上联系人的方式就是一个简单的视频#xff0c;因为有web端、小程序端#xff0c;为了多端口用#xff0c;决定放在服务器端生成。
目前用的是react中的nextjs来开发项目。
nextjs中怎样…最近项目要求一键生成房子的推荐视频选几张图加上联系人的方式就是一个简单的视频因为有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-6.0-full_build/bin/ffmpeg.exe);// create creator instanceconst width 576;const height 1024;const creator new FFCreator({cacheDir,outputDir,width,height,//log: true,highWaterMark: 3mb,parallel: 8,fps: 30,audio,});// create FFSceneconst scene1 new FFScene();const scene2 new FFScene();scene1.setBgColor(#0b0be6);scene2.setBgColor(#b33771);// add scene1 backgroundconst fbg1 new FFImage({ path: bg1, x: width / 2, y: height / 2 });scene1.addChild(fbg1);// add bottom cloudconst fcloud new FFImage({ path: cloud, x: width });fcloud.setAnchor(1);fcloud.addAnimate({from: { y: height 180 },to: { y: height },time: 0.8,ease: Back.Out,});scene1.addChild(fcloud);// add mars ballconst fmars new FFImage({ path: mars, x: width / 2, y: height / 2 });fmars.addEffect([rollIn, zoomIn], 1.8, 0.8);scene1.addChild(fmars);// add rock imageconst frock new FFImage({ path: rock, x: width / 2 100 });frock.addAnimate({from: { y: height / 2 720 },to: { y: height / 2 80 },time: 1,delay: 2.3,ease: Cubic.InOut,});scene1.addChild(frock);// add rock imageconst ftitle new FFImage({ path: title, x: width / 2, y: height / 2 - 300 });ftitle.addEffect(fadeInUp, 1, 4);scene1.addChild(ftitle);// add logoconst flogo1 new FFImage({ path: logo2, x: width / 2, y: 50 });flogo1.setScale(0.5);scene1.addChild(flogo1);scene1.setDuration(8);scene1.setTransition(InvertedPageCurl, 1.5);creator.addChild(scene1);// add scene2 backgroundconst fbg2 new FFImage({ path: bg2, x: width / 2, y: height / 2 });scene2.addChild(fbg2);// add logoconst flogo2 new FFImage({ path: logo2, x: width / 2, y: height / 2 - 80 });flogo2.setScale(0.9);flogo2.addEffect(fadeInDown, 1, 1.2);// 9s removeflogo2.remove(9);scene2.addChild(flogo2);scene2.setDuration(5);creator.addChild(scene2);creator.start();//creator.openLog();creator.on(start, () {console.log(FFCreator start);});creator.on(error, e {console.log(FFCreator error: ${e.error});});creator.on(progress, e {console.log(colors.yellow(FFCreator progress: ${(e.percent * 100) 0}%));});creator.on(complete, e {console.log(colors.magenta(FFCreator completed: \n USEAGE: ${e.useage} \n PATH: ${e.output} ),);console.log(colors.green(\n --- You can press the s key or the w key to restart! --- \n));});return creator;
})
} 2.添加队列
//添加队列
export function AddTask({ Templateid }) {const Taskid FFCreatorCenter.addTaskByTemplate(Templateid, { });res.statusCode 200res.json({code: 0,data: {taskid: Taskid}})
}
3.查询成功接口并下载mp4
//下载
import { FFAlbum, FFScene, FFImage, FFCreator, FFRect, FFText, FFCreatorCenter } from ffcreator
export default async (req, res) {
const taskid req.query.taskid
var fs require(fs);FFCreatorCenter.onTaskError(taskid, function (err) {console.log(onTaskError, err)})FFCreatorCenter.onTaskComplete(taskid, function (e) {console.log(onTaskComplete, e)let { file, taskObj } elet output file ? file.replace(/\/\//g, /) : fs.readFile(output, function (isErr, data) {if (isErr) {} else {let file_name new Date().getTime()let Disposition inline;;if (scene pwa) {Disposition attchment;;}if (scene mini) {Disposition inline;;}res.setHeader(Content-Type, video/mp4; charsetutf-8);res.setHeader(Content-Disposition, ${Disposition}filename${encodeURIComponent(file_name)}.mp4);res.status(200)res.end(data)}})})}
另附上视频转gif的方法
let cp require(child_process);let flie_gif ${cacheDir}${taskid}.gifconst bb ffmpeg -ss 00:00:00 -to 00:00:${videoConfig.duration} -i ${output} -r 10 -vf scale1050:-1 ${flie_gif}cp.exec(bb,function (error, stdout, stderr) {if (error) {console.log(执行的结果error:, error)} else {fs.readFile(flie_gif, function (isErr, data) {if (isErr) {console.log(执行的结果error:, isErr)} else {let file_name new Date().getTime()let Disposition inline;;if (scene pwa) {Disposition attchment;;}if (scene mini) {Disposition inline;;}res.setHeader(Content-Type, image/gif; charsetutf-8);res.setHeader(Content-Disposition, ${Disposition}filename${encodeURIComponent(file_name)}.gif);res.status(200)res.end(data)}})}// console.log(执行的结果stdout:, stdout)// console.log(执行的结果stderr:, stderr)})
