Visual building — Visual building of video

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 I would like to introduce shida, project address: Shida

introduce

Visual scaffolding sounds mysterious and powerful. But it can be very simple.

With the continuous growth of short video flow on the Internet and the change of consumption and living habits, the convenient and vivid display of video content has successfully won the trust of users, and the dependence of users on short video has also risen sharply. The penetration of video visualization platform is becoming stronger and stronger.

Video visualization tool is a common operation tool that allows users to quickly edit and generate videos, improving efficiency. But designing and developing such tools from scratch isn’t easy.

Today, we will introduce “Visual building”, which provides the core functions of video visual building, eliminating the difficulty of realizing video visual building tools from zero.

Vision Building is a video visual construction project. You can quickly produce a short video by simple drag-and-drop, as easy as using H5 building tools such as Yiqixiu or Baidu H5. At present, there are few open source projects about video visualization construction in the industry. “Vision Building” is a relatively complete open source project, and I only hope you like it.

“Depending on the take” backend video synthesis is partly based on FFCreatorgithub.com/tnfe/FFCrea… FFCreator is a lightweight and flexible short video processing library based on Node.js. 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.

The front part of “Vision Partnership” was developed by quark-H5 project, which did not make much expansion. Quark-h5 is a great open source tool for BUILDING H5, with reasonable architecture and relatively clear and easy to read code. Thanks to the author.

Project Preview:

Project directory

| - client -- -- -- -- -- -- -- -- the front-end interface code project | - common -- -- -- -- -- -- -- -- the front-end interface corresponding static resources | - components -- -- -- -- -- -- -- -- component | - config -- -- -- -- -- -- -- - | - eventBus configuration file -- -- -- -- -- -- -- -- eventBus | - filter filter -- -- -- -- -- -- -- - | -- mixins -- -- -- -- -- -- -- - | - pages with -- -- -- -- -- -- -- -- page | - the router -- -- -- -- -- -- -- - | - store routing configuration -- -- -- -- -- -- -- -- vuex state management | - service -- -- -- -- -- -- -- -- axios package | -- App. Vue -- -- -- -- -- -- -- -- the App | -- main. Js -- -- -- -- -- -- -- -- the entry file | -- permission. Js -- -- -- -- -- -- -- -- access control | - server -- -- -- -- -- -- -- -- the server program code | - confog -- -- -- -- -- -- -- - | - controller configuration file -- -- -- -- -- -- -- -- the database link | - the extend -- -- -- -- -- -- -- - | - model framework extension -- -- -- -- -- -- -- Schema and Model | - middleware -- -- -- -- -- -- -- - | - the core middleware -- -- -- -- -- -- -- -- Koa MVC automatic loading core file | - views -- -- -- -- -- -- -- - | - public ejs page template Static resource -- -- -- -- -- -- -- - | -- the router. Js routing | -- -- -- -- -- -- -- -- -- app. Js -- -- -- -- -- -- -- -- the service side entrance | - common -- -- -- -- -- -- -- - front and back side public code modules (such as encryption) | - engine - the template -- -- -- -- -- -- -- -- page template engine, use webpack packaged into js provides reference page | -- config. Json -- -- -- -- -- -- -- -- the configuration fileCopy the code

Editor overall design

Video compositing core

• Based on theFFCreatorGithub.com/tnfe/FFCrea…With few dependencies and a low machine configuration to start working quickly

Development and debugging

Start the mongo

Install dependencies

npm i
Copy the code

Start the front end and turn on watch mode

npm run watch-publish
Copy the code

Starting the server

npm run dev-server
Copy the code

Start accesshttp://localhost:4000You can see the project page

First register the user, then log in to experience the operation

Release deployment

Start the mongo

• Install mongodb:zhuanlan.zhihu.com/p/394960855
• Configure mongodb: The configuration file is in/server/config/index.js
• Start the mongodb:www.cnblogs.com/zhm1985/p/1…

Pm2 needs to be installed globally

npm install pm2 -g
Copy the code

Start the command

npm run publish && npm run start
Copy the code

The year of 2021 has passed. Many things have happened in the front end of this year, and we can even find some new things. I hope we can stand in the present and see the future.

Here I quote a sentence — keep on going. In the future, we will continue to work deeply in the front-end field. We also believe that we will reap the due value if we continue to do so.

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…