# short-video-creator
**Repository Path**: bctos_cn/short-video-creator
## Basic Information
- **Project Name**: short-video-creator
- **Description**: 摸索两天，我让 Node 自动生成抖音短视频
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-10-19
- **Last Updated**: 2021-10-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# short-video-creator
摸索两天，我让 Node 自动生成短视频
## Installation
### 安装 `nodejs` 环境
### 安装相关依赖
1. [https://nodejs.org/](https://nodejs.org/)
2. [graphicsmagick](http://www.graphicsmagick.org/) 或 [ImageMagick](http://www.imagemagick.org)
3. [FFmpeg](https://tnfe.github.io/FFCreator/#/guide/installation?id=%e5%ae%89%e8%a3%85ffmpeg)
### 安装 `npm` 依赖
```javascript
npm install
```
### 启动项目
```javascript
npm start
```
## Introduction
上周在摸索抖音，我想要做个垂直账号，经营了一个文案号（抖音号：cuicuisha1999）剪了几天视频后我发现这过程蛮重复的（准备背景图、文案图、加音乐、再一点点特效动画），作为一名程序员👨💻，我产生了一个
大胆的想法😜，嘿嘿~~。能不能让程序自动为我完成这个过程，经过两天的摸索，成功让 Node 为我自动生成抖音短视频，skr~。
### 目标
使用 Node 自动生产简单的抖音短视频。
成果视频：[脆脆鲨文案视频.mp4](https://www.yuque.com/attachments/yuque/0/2021/mp4/1382482/1616742391164-43898fd6-513f-4259-91f0-daf3381ee0ca.mp4?_lake_card=%7B%22uid%22%3A%221616742390620-0%22%2C%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2021%2Fmp4%2F1382482%2F1616742391164-43898fd6-513f-4259-91f0-daf3381ee0ca.mp4%22%2C%22name%22%3A%22%E8%84%86%E8%84%86%E9%B2%A8%E6%96%87%E6%A1%88%E8%A7%86%E9%A2%91.mp4%22%2C%22size%22%3A1659236%2C%22type%22%3A%22video%2Fmp4%22%2C%22ext%22%3A%22mp4%22%2C%22progress%22%3A%7B%22percent%22%3A99%7D%2C%22status%22%3A%22done%22%2C%22percent%22%3A0%2C%22id%22%3A%22sCOQw%22%2C%22card%22%3A%22file%22%7D)
视频截图：
### 素材准备
#### 背景图
通过 node 脚本爬取 [3g 手机壁纸-风景类](https://www.3gbizhi.com/wallQFJ/) 站点的高清图片为背景图素材库。
#### 文案图片
文案图示例：
这里比较复杂因为文案内容不是一成不变的，需要将**文本内容**与**空白文案底图**合成文案图
空白文案底图示例：
图片合成思路：
1. 准备环境
- 主要 node 依赖：[gm](https://github.com/aheckmann/gm#readme) (功能强大的图片处理库，这里主要用来在底图上写字~~）
- 电脑需安装 [graphicsmagick](http://www.graphicsmagick.org/) 或 [ImageMagick](http://www.imagemagick.org)
- 中英文字体：在 [字体天下](https://www.fonts.net.cn/) 找
2. 处理图片并输出
```javascript
// 示例代码
const gm = require('gm')
function makeHomePage ({text, name}, dir) {
return new Promise((resolve, reject) => {
// 输出目录
const outPut = `${dir}/${name}`
gm('path/to/image')
// 字体
.font('path/to/font', 45)
.fill('#fff')
// 文案
.drawText(0, 0, text, 'Center')
.write(outPut, function (err) {
if (!err) {
console.log('up: 生成图片')
resolve(outPut)
} else { reject(err) }
})
})
}
```
#### 背景音乐
视频发布平台时在 App 上选个热门音乐插入 skr~
### 生成短视频
准备环境
1. 主要 node 依赖：[FFCreator](https://tnfe.github.io/FFCreator/#/)
1. 电脑需安装：[FFmpeg](https://tnfe.github.io/FFCreator/#/guide/installation?id=%e5%ae%89%e8%a3%85ffmpeg)
合成视频
```javascript
const path = require('path');
const colors = require('colors');
const {FFCreatorCenter, FFScene, FFImage, FFCreator} = require('ffcreator');
const createFFTask = (img1, img2) => {
const bg = path.join(__dirname, './assets/image/bg.png');
const img1 = path.join(__dirname, './assets/image/01.png');
const img2 = path.join(__dirname, './assets/image/03.png');
const audio = path.join(__dirname, './assets/audio/01.mp3');
const outputDir = path.join(__dirname, './output/');
const cacheDir = path.join(__dirname, './cache/');
// 按照抖音 9：16 宽高比设置页面宽高
const width = 1080;
const height = 1920;
// 创建视频入口
const creator = new FFCreator({
cacheDir,
outputDir,
width,
height,
debug: false,
fps: 60,
threads: 4,
audio,
});
// 创建场景，当然一个可以创建多个场景，并增加转场动画
const scene = new FFScene();
scene.setBgColor('#000000');
// 给场景加背景图片
const fiBg = new FFImage({path: bg, x: width / 2, y: height / 2});
// 创建图片，放在中心
const fiImg1 = new FFImage({path: img1, x: width / 2, y: height / 2});
const fiImg2 = new FFImage({path: img2, x: width / 2, y: height / 2});
// 动画参考 https://animate.style/
// 给图片添加入场出场动画三个参数分别是：动画名，持续时间，执行时机
fiImg1.addEffect('zoomInDown', 1)
fiImg1.addEffect('zoomOutDown', 1, 2)
fiImg2.addEffect('zoomInDown', 1, 4);
fiImg2.addEffect('zoomOutDown', 1, 5);
// 将素材放入该场景
scene.addChild(fiBg);
scene.addChild(fiImg1);
scene.addChild(fiImg2);
// 该场景持续时间
scene.setDuration(7);
// 将场景放入该视频
creator.addChild(scene);
// 开始
creator.start();
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.state} ${(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;
};
module.exports = createFFTask
```
### 男同学放学留一下
不会爬虫的同学，我手把手教你爬上面那个壁纸网站的所有[美女图片](https://www.3gbizhi.com/meinv/)
有图为证，检两张能过审的放出来 skr~~。
## FAQ
- ~~Apple Mac M1 芯片无法运行会出现如下报错~~
```bash
Error: Could not locate the bindings file. Tried:
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/build/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/build/Debug/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/build/Release/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/out/Debug/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/Debug/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/out/Release/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/Release/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/build/default/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/compiled/14.15.3/darwin/x64/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/addon-build/release/install-root/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/addon-build/debug/install-root/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/addon-build/default/install-root/webgl.node
→ /Users/lorcannn/code/project/short-video-creator/node_modules/gl/lib/binding/node-v83-darwin-x64/webgl.node
at bindings (/Users/lorcannn/code/project/short-video-creator/node_modules/bindings/bindings.js:126:9)
at Object. (/Users/lorcannn/code/project/short-video-creator/node_modules/gl/src/javascript/native-gl.js:1:40)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (/Users/lorcannn/code/project/short-video-creator/node_modules/gl/src/javascript/webgl-rendering-context.js:4:58)
at Module._compile (internal/modules/cjs/loader.js:1063:30) {
tries: [
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/build/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/build/Debug/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/build/Release/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/out/Debug/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/Debug/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/out/Release/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/Release/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/build/default/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/compiled/14.15.3/darwin/x64/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/addon-build/release/install-root/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/addon-build/debug/install-root/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/addon-build/default/install-root/webgl.node',
'/Users/lorcannn/code/project/short-video-creator/node_modules/gl/lib/binding/node-v83-darwin-x64/webgl.node'
]
}
```
**在我的 Apple Mac Mini M1 上解决了该问题**
```
rm -rf node_modules
rm -rf package-lock.json
npm cache clean --force
```
确保 node 版本是 `v14`, 先安装除 `ffcreator` 的所有依赖，单独安装 `npm install ffcreator -S` 后可以成功运行
另外可参考 [issues](https://github.com/tnfe/FFCreator/issues/31)
# 欢迎关注
