Make a short video from scratch

TNTWeb-the full name of Tencent News front-end team, the small partners in the group have practiced and accumulated in the front-end fields of Web front-end, NodeJS development, UI design, and mobile APP.
At present, the team mainly supports the front-end development of Tencent News's various businesses. In addition to business development, it has also accumulated some front-end infrastructure to empower business efficiency and product innovation.
The team advocates open source and co-construction, and has a variety of technical experts. The team’s Github address: https://github.com/tnfe
Today I will introduce FFCreator to everyone, the author of this article Delai asked , project address: FFCreator

(Foreword) Say something

The current peaceful and prosperous times, but the Internet field can be regarded as chaotic times all the time. Today we are talking about the short video field.

Short video has become an increasingly popular form of media communication. Apps like and Douyin produce thousands of wonderful short videos every day. And these videos also brought huge traffic to the product.
Subsequently, how to allow users to quickly produce a short video; or how the product platform uses existing pictures, videos, and music materials to synthesize a large number of videos in batches has become a technical difficulty.

Today I bring you a lightweight and flexible short video production library node.js You only need to add a few pictures or video clips and a background music, you can quickly generate a cool video clip.

github address: https://github.com/tnfe/FFCreator
npm address: https://www.npmjs.com/package/ffcreator

This article will lead you to make a short video from start to finish.

Build the project and install dependencies

First you have to build a project, then execute npm init, just press Enter.

mkdir ffcreator-example && cd ffcreator-example
npm init

Next, we will install the package today

npm install ffcreator
or
yarn add ffcreator

top priority, ffcreator relies on FFnpeg, so FFmpeg must be installed.

FFCreatorLite depends on the FFmpeg>=0.9 above 061275f2536450. Please set FFmpeg as a global variable, otherwise you need to use setFFmpegPath to add FFmpeg native path. (The ffmpeg for windows users is probably not in your %PATH , so you must set %FFMPEG_PATH ).

The tutorial for installing FFmpeg, I only talk about windows and mac, and there are more detailed explanations about the others in the above github. The reason why I only talk about windows and mac, because for front-end developers, most of them are mac , There are also some windows. For other developers, if you want to try, you can go to the above github to view the installation methods of other environments.

`windows：`

A total of four steps: download, unzip, set environment variables, and use.

Reference document

`mac：`

There are two parts:

Install homebrew (if it is installed, you can ignore it and proceed directly to the next step):

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Install ffmpeg using homebrew:
```
brew install ffmpeg
```

Reference Document

At this point, the project, environment, and dependencies are all ready, and we can proceed to the next step.

`About use`

ffcreator is a node library that provides a variety of constructors that can be used:

FFScene, // screen, also called scene

// 新建一个显示屏
const scene = new FFScene();
// 设置背景色   
scene.setBgColor('#30336b');    
// 设置停留时长   
scene.setDuration(8.5);             
// 设置过渡动画(类型, 时间)
scene.setTransition('Fat', 1.5);    
// 把屏幕添加到视频创造器实例上面
creator.addChild(scene);

FFNode, the base class of all types below, can be directly viewed below.

FFText, text element

const text = new FFText({text: '这是一个文字', x: 250, y: 80});
// 文字颜色
text.setColor('#ffffff');         
// 背景色
text.setBackgroundColor('#b33771');         
// 出现动画为fadeIn，动画的时长1秒，delay时间为1秒，
text.addEffect("fadeIn", 1, 1);   
// 设置文本水平居中
text.alignCenter();                         
// 设置样式object 
text.setStyle({padding: [4, 12, 6, 12]});   
// 把当前文本节点添加到屏幕上面
scene.addChild(text);

FFImage, picture element

// 创建一个图片元素，图片路径为../images/demo.png
const img = new FFImage({path: '../images/demo.png'});
// 设置位置   
img.setXY(250, 340);                
// 设置缩放
img.setScale(2);                   
// 设置旋转   
img.setRotate(45);               
// 设置透明度 
img.setOpacity(0.3);                
// 设置宽高
img.setWH(100, 200);                
// 设置动画效果
// 设置动画效果为slideInDown，动画时长为1.2秒，delay时间为0
img.addEffect("slideInDown", 1.2, 0);
// 把当前图片节点添加到屏幕上面
scene.addChild(img);

FFVideo, video element

// 创建一个视频元素，视频路径为../videos/demo.mp4，位置在屏幕的100和150处
// 宽度为500，高度为350.
const video = new FFVideo({
    path: videopath,
    x: 100,
    y: 150,
    width: 500,
    height: 350
});
设置是否有音乐
video.setAudio(true);  
// 设置是否循环播放
video.setLoop(true);
// 截取播放时长,设置视频播放的开始时间和结束时间
video.setTimes("00:00:43", "00:00:50");
// 单独设置视频播放的开始时间
video.setStartTime("00:00:43"),
// 单独设置视频播放的结束时间
video.setEndTime("00:00:50"),
// video还有很多其他的方法
...
// 把当前视频元素添加到屏幕上面
scene.addChild(video);

FFAlbum, album elements

// 新建相册元素。
const album = new FFAlbum({
    list: [img1, img2, img3, img4],   // 相册的图片集合
    x: 250,
    y: 300,
    width: 500,
    height: 300,
});
 // 设置相册切换动画
album.setTransition('zoomIn');     
// 设置单张停留时长
album.setDuration(2.5);             
// 设置单张动画时长
album.setTransTime(1.5);            
scene.addChild(album);
// 把当前相册元素添加到屏幕上面
scene.addChild(video);

FFVtuber, virtual anchor image

const vtuber = new FFVtuber({ x: 100, y: 400 });
// 设置动画时间循环周期
vtuber.setPeriod([
    [0, 3],
    [0, 3]
]);
// 路径设置这里 baby/[d].png 和 baby/%d.png 两种方式均可以
const vpath = path.join(__dirname, "./avator/baby/[d].png");
 // 从第1-7.png
vtuber.setPath(vpath, 1, 7);   
// 播放速度
vtuber.setSpeed(6);             
creator.addVtuber(vtuber);

FFSubtitle, subtitle element

const content = '跟计算机工作酷就酷在这里，它们特别听话，说让干什么就干什么...';
const subtitle = new FFSubtitle({
    text: content,
    comma: true,                  // 是否逗号分割
    backgroundColor: '#00219C',   // 背景色
    color: '#fff',                // 文字颜色
    fontSize: 24                  // 字号
});
// 设置文案，也可以放到conf里
subtitle.setText(content);      
// 缓存帧
subtitle.frameBuffer = 24;      
// 设置字幕总时长
subtitle.setDuration(12);       
scene.addChild(subtitle);
// 设置语音配音-tts
subtitle.setSpeech(dub);

FFTween, gradient

In addition to the above types, there are examples and operations:

FFCreator, // Create an instance

const creator = new FFCreator({
  cacheDir,                 // 缓存目录
  outputDir,                // 输出目录
  output,                   // 输出文件名(FFCreatorCenter中可以不设)
  width: 500,               // 影片宽
  height: 680,              // 影片高
  audioLoop: true,          // 音乐循环
  fps: 24,                  // fps
  threads: 4,               // 多线程(伪造)并行渲染
  debug: false,             // 开启测试模式
  defaultOutputOptions: null,// ffmpeg输出选项配置
});

// 往创造器实例里面添加屏幕
creator.addChild(scene);
// 创造器的开始函数。启动。
creator.start();

FFCreatorCenter, // core runtime library, run by way of addTask

// 可以通过这种方式启动多个任务，
FFCreatorCenter.addTask(createFFTask)
当然也可以不使用FFCreatorCenter，直接运行
createFFTask();