The project is being continuously updated:
the short video APP column imitating Douyin
Table of contents
The process of publishing short videos
Save video information into storage
The process of publishing short videos
Traditional upload process
Note: After the controller receives the file, it will upload the file to the server. At the same time, the controller obtains a certain frame to obtain our cover image and upload it to our file server. The addresses of videos and covers are saved to our database.
traditional upload
There are two nodes here, and the entire link bandwidth resource occupies 2G, and there will be a loss of 2G bandwidth. The risks posed by users are also significant.
CDN upload
Cloud vendors provide:
CDN, static resource service, can be accessed all over the world.
Traditional method: After the front end uploads the file to the CDN, we can get the playback address in the CDN, and then we will transfer the video file to the controller again.
Now: only need to get the url address of the video file, and store some basic video information in our controller. Here we only upload a file once, and the resulting bandwidth loss happens to cloud vendors, and they also bear the risk.
Supplement: cdn has the function of truncating frames
Optimization: reduce bandwidth once, optimize transmission rate, and improve user experience.
CDN upload process
We will get two urls, and submit the text information to the controller for processing.
Use Unicloud cloud function
unicloud can write cloud functions in the cloud, and cloud functions serve as interfaces for the front end, and we don't need to operate here.
The cloud also provides cloud database services.
Open the official console:
create a service space:
Open HBuilder:
Associated cloud space: 
unicloud after successful integration
Realize app-side video upload
Sent on the frontend:
Open the frontend:
The monitoring function, representing the + button in the middle, allows APP.Vue to monitor, and then the corresponding method can be executed:
Here e is a file event object,
Jump to the publish page:
progress bar: 
After the upload is successful, we will get a file object (f):
Here Alibaba Cloud will provide a frame interception service.
Finally restart, open the home page, click + upload:
The cover image here is a screenshot
Click to preview the video:
Return to the webpage to see our cloud storage:
This is the address we just uploaded.
This completes the video upload to our CDN.
Save video information into storage
Find the route to publish the video on the front end:
In the model:
Build service:
interface:
Interface implementation:
@Service
public class VlogServiceImpl implements VlogService {
@Resource
private VlogMapper vlogMapper;
@Autowired
private Sid sid;
private static final String USER_FACE1 = "http://122.152.205.72:88/group1/M00/00/05/CpoxxF6ZUySASMbOAABBAXhjY0Y649.png";
@Transactional
@Override
public void createdVlog(VlogBO vlogBO) {
String vid = sid.nextShort();
Vlog vlog = new Vlog();
BeanUtils.copyProperties(vlogBO,vlog);
vlog.setId(vid);
vlog.setCommentsCounts(0);
vlog.setIsPrivate(YesOrNo.NO.type);
vlog.setCreatedTime(new Date());
vlog.setUpdatedTime(new Date());
vlogMapper.insert(vlog);
}
} In the controller layer:
Install in Meavn, restart and run.
Click Publish, the page disappears, the release is successful, and the database is opened:
Search the url address of the video in unicloud to check if it matches.
