TNTWeb – The full name of Tencent news front end team, partners in the group have practiced and accumulated experience in Web front end, NodeJS development, UI design, mobile APP and other large front end fields.

At present, the team mainly supports the front-end development of Tencent news business. Besides business development, some front-end infrastructure has been accumulated to enable business efficiency improvement and product innovation.

The team advocates open source construction, has a variety of technical masters, the team Github address: github.com/tnfe

Today, WE introduce FFCreator, the author of this article, Delai, project address: FFCreator

(Preface) Say something

These are peaceful times, but the Internet has been a turbulent one. Today we’re talking about short video.

Short videos have become an increasingly popular form of media communication. Apps like Weishi and Douyin produce thousands of short and exciting videos every day. And those videos drive a lot of traffic to the product. Then, how to let users quickly produce a short video; Or how the product platform uses the existing pictures, videos, music materials to synthesize a large number of videos becomes a technical difficulty.

Node.js is a lightweight, flexible short video creation library. All you need to do is add a few pictures or video clips and a piece of background music to quickly create a cool video clip.

  • Github address: github.com/tnfe/FFCrea…
  • NPM address: www.npmjs.com/package/ffc…

This article will walk you through making a short video from start to finish.

Build the project and install the dependencies

First you have to build a project, then you have to do NPM init, and then you just hit enter.

mkdir ffcreator-example && cd ffcreator-example
npm init
Copy the code

Next, we will install the package today

npm install ffcreator
or
yarn add ffcreator
Copy the code

Most importantly, FFCreator relies on FFnpeg, so FFmpeg must be installed.

FFCreatorLite relies on FFmpeg>=0.9 and above. Set FFmpeg to a global variable. Otherwise, use setFFmpegPath to add the FFmpeg local path. Ffmpeg for Windows users is most likely not in your %PATH, so you must set %FFMPEG_PATH.

Install FFmpeg tutorial, I only say Windows and MAC, about the rest of the above github has a more detailed explanation, the reason only say Windows and MAC, because for front-end developers, most are MAC, but also some Windows. For other developers, if you want to try it out, go to Github above to see how other environments are installed.

Windows:

There are four steps: download, decompress, set environment variables, use.

Reference documentation

MAC:

There are two parts:

  • Install Homebrew (if already installed, ignore and go to the next step) :

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

  • Install FFMPEG with Homebrew:

    brew install ffmpeg
Copy the code

Reference documentation

At this point, the project, environment, and dependencies are ready for the next step.

On the use

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

  • FFScene, // Screen, also known as scene

    // Create a new display
const scene = new FFScene();
// Set the background color
scene.setBgColor('#30336b');    
// Set the residence duration
scene.setDuration(8.5);             
// Set transition animation (type, time)
scene.setTransition('Fat'.1.5);    
// Add the screen to the video creator instance
creator.addChild(scene);
Copy the code

  • FFNode, the base class for all of the following types, can be seen directly below.

  • FFText, text element

    const text = new FFText({text: 'This is a text'.x: 250.y: 80});
// Text color
text.setColor('#ffffff');         
/ / the background color
text.setBackgroundColor('#b33771');         
// The animation is fadeIn, the animation duration is 1 second, the delay time is 1 second,
text.addEffect("fadeIn".1.1);   
// Center the text horizontally
text.alignCenter();                         
// Set the style object
text.setStyle({padding: [4.12.6.12]});   
// Add the current text node to the screen
scene.addChild(text);
Copy the code

  • FFImage, image element

    // Create an image element with the image path.. /images/demo.png
const img = new FFImage({path: '.. /images/demo.png'});
// Set the location
img.setXY(250.340);                
// Set the zoom
img.setScale(2);                   
// Set the rotation
img.setRotate(45);               
// Set transparency
img.setOpacity(0.3);                
// Set width and height
img.setWH(100.200);                
// Set the animation effect
// Set the animation effect to slideInDown, animation duration to 1.2 seconds, delay time to 0
img.addEffect("slideInDown".1.2.0);
// Add the current image node to the screen
scene.addChild(img);
Copy the code

  • FFVideo, video elements

    // Create a video element with the video path.. /videos/demo.mp4, positions 100 and 150 on the screen
// The width is 500 and the height is 350.
const video = new FFVideo({
    path: videopath,
    x: 100.y: 150.width: 500.height: 350}); Set whether there is music video.setaudio (true);  
// Set whether to loop
video.setLoop(true);
// Set the start time and end time of video playback
video.setTimes("00:00:43"."00:00:50");
// Set the start time of video playback separately
video.setStartTime("00:00:43"),
// Set the end time of video playback separately
video.setEndTime("00:00:50"),
// Video There are many other ways.// Add the current video element to the screen
scene.addChild(video);
Copy the code

  • FFAlbum, album element

    // Create a new album element.
const album = new FFAlbum({
    list: [img1, img2, img3, img4],   // A collection of pictures from the album
    x: 250.y: 300.width: 500.height: 300});// Set the album toggle animation
album.setTransition('zoomIn');     
// Set the stay time of the single
album.setDuration(2.5);             
// Set the length of the single animation
album.setTransTime(1.5);            
scene.addChild(album);
// Add the current album element to the screen
scene.addChild(video);
Copy the code

  • FFVtuber, virtual anchor image

    const vtuber = new FFVtuber({ x: 100.y: 400 });
// Set the animation time cycle
vtuber.setPeriod([
    [0.3],
    [0.3]]);[d].png and baby/%d.png
const vpath = path.join(__dirname, "./avator/baby/[d].png");
 1-7. / / from PNG
vtuber.setPath(vpath, 1.7);   
// Playback speed
vtuber.setSpeed(6);             
creator.addVtuber(vtuber);
Copy the code

  • FFSubtitle, subtitle element

    const content = 'That's what's cool about working with computers. They do what they're told... ';
const subtitle = new FFSubtitle({
    text: content,
    comma: true.// Whether to separate by comma
    backgroundColor: '#00219C'./ / the background color
    color: '#fff'.// Text color
    fontSize: 24                  / / size
});
// Set copywriting, also can be put in conf
subtitle.setText(content);      
/ / the cache frame
subtitle.frameBuffer = 24;      
// Set the total subtitle duration
subtitle.setDuration(12);       
scene.addChild(subtitle);
// Set voice dubbing to -tts
subtitle.setSpeech(dub);        
Copy the code

  • FFTween, gradient

In addition to the above types, there are instances and runs:

  • FFCreator,// Create an instance

    const creator = new FFCreator({
  cacheDir,                 // Cache directory
  outputDir,                // Output directory
  output,                   // Output file name (FFCreatorCenter can be omitted)
  width: 500./ / wide film
  height: 680./ / film is high
  audioLoop: true.// Music loop
  fps: 24.// fps
  threads: 4.// Multithreading (fake) parallel rendering
  debug: false.// Enable test mode
  defaultOutputOptions: null.// ffmpeg output option configuration
});

// Add a screen to the creator instance
creator.addChild(scene);
// The start function of the creator. Start.
creator.start();

Copy the code

  • FFCreatorCenter, // The core runtime, runs by addTask

// Multiple tasks can be started in this way,Ffcreatorcenter.addtask (createFFTask) You can also run the createFFTask() without using FFCreatorCenter.Copy the code

Have a demo

  • Picture animation:

Picture animation demo address, Demo source address

  • Multi-photo album:

Multi – picture album demo address, demo source address

  • Scene transition:

Demo address, demo source address

  • Dubbing subtitles:

Dubbing subtitle Demo address, Demo source address

  • Video animation:

Video animation Demo address, Demo source address

Write in the last

Short video is rampant on the Internet, why not comply with the trend, with code to achieve the creation of short video?

Since node can create short videos, why not match with the server to achieve drag and drop combination and visually generate short videos?

All of this should be achievable.

If you are happy, work hard to make yourself happier; If you can’t be happy, work hard to be happy; In a word, work makes me happy ~

Wish you all the best and happy every day

If you feel good, click “STAR” before you go

team

TNTWeb – Tencent news front end team, TNTWeb is committed to the exploration of cutting-edge technology in the industry and the improvement of team members’ personal ability. For front-end developers to organize the applets and the latest quality content in the field of web front-end technology, weekly update ✨, welcome star, github address: github.com/tnfe/TNT-We…