Tiktok practice ~ upload and release app video

One 、API read

1. Select or capture video

find uni.chooseVideo(OBJECT)API,

Select or capture a video file ：https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo

2. Cloud functions API~ Upload files

Use of api:uniCloud.uploadFile(Object uploadFileOptions)
uniCloud API file

3. Video cut frame

purpose ： Video frame cut as video cover
Alibaba cloud service for video frame cutting

Video framing service
Alibaba cloud video frames

Two 、App End video upload process

2.1. Upload flowchart

2.2. Process brief

• 1. Verify user login status , Not logged in , Then jump to the login page to log in , The login process continues .
• 2. Click the middle release button
• 3. Select or capture video , Click on the confirmation
• 4. Jump to the short video publishing page with the file information
• 5. When the short video publishing page is loaded , Receive video file information , Parsing file information
• 6. Configuration file path and cloud file name
• 7. Call cloud function , Perform short video cloud upload
• 8. Short video uploading process , The progress bar is dynamically displayed according to the actual upload progress
• 9. Short video upload completed , Call alicloud video framing service , Make video frame cut cover
• 10. Short video message encapsulation
• 11. Supplement the uploaded content
• 12. Post a short video , Call the back-end interface service
• 13. Short video file information , Brief treatment , Execute stock drop processing

3、 ... and 、 Front end source code practice

3.1. choice / Take a short video

			//  Listen for the click event of the middle button 
			uni.onTabBarMidButtonTap(()=>{
    
				
				//  Cannot publish video without logging in 
				var myUserInfo = getApp().getUserInfoSession();
				if (myUserInfo == null) {
    
					uni.showToast({
    
						duration: 3000,
						title: " Please log in ~",
						icon: "none"
					});
					uni.navigateTo({
    
						url: "../loginRegist/loginRegist",
						animationType: "slide-in-bottom",
						success() {
    
							me.loginWords = " Please log in "
						}
					});
					return;
				}
				
				// console.log('onTabBarMidButtonTap');
				uni.switchTab({
    
					url: "../me/me"
				});
				
				uni.chooseVideo({
    
					sourceType: ['album'],
					success(e) {
    
						uni.navigateTo({
    
							url: "/pages/publish/publish?fileObjectEvent=" + JSON.stringify(e)
						})
						
						/** *  Or use uniCloud, Finish uploading on the client , Reduce links , Because the file is large , The communication link and time consumption are doubled  */
						var times = new Date().getTime();
					}
				})
				
			});

3.2. Short video upload

	//  Triggered when the current page is loaded 
		onLoad(params) {
    
			var me = this;
			this.statusBarHeight = system.statusBarHeight;
			this.screenWidth = system.screenWidth;

			//  File event object passed from the previous page , It contains the video content selected from the album 
			var fileObjectEvent = JSON.parse(params.fileObjectEvent);
			var times = new Date().getTime();
			uniCloud.uploadFile({
    
				//  File object to upload  -> Get temporary video path 
				filePath: fileObjectEvent.tempFilePath,
				//  When using alicloud ,cloudPath Is the cloud file name 
				// Customize according to specific business  
				cloudPath: times + '.mp4',
				
				//  Progress bar Events 
				onUploadProgress(progressEvent) {
    
					var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
					//  This value is the percentage of dynamic change during video uploading , To show the specific progress of uploading 
					me.percentCompleted = percentCompleted;
				},
				//  Process operation after uploading 
				success(f) {
    
					//  Get the video path 
					var videoUrlTemp = f.filePath;
					//  Get video ID
					var videoUrl = f.fileID;

					//  Get video parameters 
					me.tempFilePath = videoUrlTemp;
					me.videoUrl = videoUrl;
					me.tempCover = videoUrl + "?x-oss-process=video/snapshot,t_1,f_jpg,ar_auto"; //  Cut frame 
					me.width = fileObjectEvent.width;
					me.height = fileObjectEvent.height;
				}
			});
		},

3.3. Progress bar page

<!--  Progress bar  -->
		<view style="marginTop:60rpx;display: flex;flex-direction: column;justify-content: center;"
			v-if="percentCompleted != 100">
			<progress :percent="percentCompleted" stroke-width="3" activeColor="#ef274d" backgroundColor="#F1F1F1"
				:style="{screenWidth: screenWidth + 'px'}" />
			<text style="color: #F1F1F1;font-size: 16px;text-align: center;margin-top: 20px;"
				:style="{screenWidth: screenWidth + 'px'}"> Video uploading ~  Please be patient ~~</text>
			<image mode="aspectFit" src="../../static/images/loading-4.gif"
				style="width: 600rpx;height: 600rpx;align-self: center;">
		</view>

3.4. Add short video content

<textarea class="vlog-content" placeholder-style="color: #9798a0;" placeholder=" Add appropriate title content " :value="title"
				:model="title" maxlength="60" @input="typingContent" confirm-type="done"></textarea>

3.5. Video release

			<view :class="{'btn-publish':!publichTouched, 'btn-publish-touched': publichTouched}"
				style="margin-top: 30rpx;height: 90rpx;display: flex;justify-content: center;border-radius: 20px;"
				@touchstart="touchstartPublich" @touchend="touchendPublich" @click="doPublich">
				<text style="color: #e6e6e6;font-size: 18px;align-self: center;font-weight: 500;"> Release  Vlog</text>
			</view>

	doPublich() {
    
				var me = this;
				var userId = getApp().getUserInfoSession().id;

				var vlog = {
    
					"vlogerId": userId,
					"url": me.videoUrl,
					"cover": me.tempCover,
					"title": me.title,
					"width": me.width,
					"height": me.height
				};

				//  Release video 
				var serverUrl = app.globalData.serverUrl;
				uni.request({
    
					method: "POST",
					header: {
    
						headerUserId: userId,
						headerUserToken: app.getUserSessionToken()
					},
					url: serverUrl + "/vlog/publish",
					data: vlog,
					success(result) {
    

						if (result.data.status == 200) {
    
							uni.showToast({
    
								title: " Successful release ！",
								icon: "none"
							})

							uni.navigateBack({
    
								delta: 1,
								animationType: 'zoom-fade-in',
								animationDuration: 1000
							});

							uni.switchTab({
    
								url: "../me/me"
							})
						} else {
    
							uni.showToast({
    
								title: result.data.msg,
								icon: "none",
								duration: 3000
							});
						}

					}
				});

			},

3.6. Video preview

	preview() {
    
				uni.navigateTo({
    
					url: "/pages/publish/preview?videoUrl=" + this.videoUrl + "&width=" + this.width + "&height=" +
						this.height,
					animationType: 'slide-in-bottom',
					animationDuration: 500
				})
			},

Four 、 Back end source code practice

4.1. Short video release

 /** *  Release vlog video  * * @param vlogBO * @return */
    @PostMapping("publish")
    public GraceJSONResult publish(@RequestBody VlogBO vlogBO) {
    
        vlogService.createVlog(vlogBO);
        return GraceJSONResult.ok();
    }

4.2. Logical processing

    /** *  Release vlog video  * * @param vlogBO */
    @Transactional
    @Override
    public void createVlog(VlogBO vlogBO) {
    

        // video ID
        String vid = sid.nextShort();

        Vlog vlog = new Vlog();
        BeanUtils.copyProperties(vlogBO, vlog);

        vlog.setId(vid);

        vlog.setLikeCounts(0);
        vlog.setCommentsCounts(0);
        vlog.setIsPrivate(YesOrNo.NO.type);

        vlog.setCreatedTime(new Date());
        vlog.setUpdatedTime(new Date());

        vlogMapper.insert(vlog);
    }

5、 ... and 、 Appreciation of renderings

5.1.