抖音实战~实现App端视频上传、发布、落库

在这里插入图片描述

文章目录

- - - - 一、API阅读
      - 1. 选择或拍摄视频
        2. 云函数API~文件上传
        3. 视频截帧
      - 二、App端视频上传流程
      - 2.1. 上传流程图
        2.2. 流程简述
      - 三、前端源码实战
      - 3.1. 选择/拍摄短视频
        3.2. 短视频上传
        3.3. 进度条页面
        3.4. 补充短视频内容
        3.5. 视频发布
        3.6. 视频预览
      - 四、后端源码实战
      - 4.1. 短视频发布
        4.2. 逻辑处理
      - 五、效果图鉴赏
      - 5.1. 未登陆状态
        5.2. 发布模式选择
        5.3. 选择/录制短视频
        5.4. 短视频发布
        5.5. 查看已发布作品
        5.6. 首页查看短视频

一、API阅读

1. 选择或拍摄视频

找到uni.chooseVideo(OBJECT)API，

选择或拍摄视频文件：https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo
在这里插入图片描述

2. 云函数API~文件上传

用到的api:uniCloud.uploadFile(Object uploadFileOptions)
uniCloud API文档

在这里插入图片描述

3. 视频截帧

用途：视频截帧当视频封面
视频截帧阿里云服务
在这里插入图片描述

视频截帧服务
阿里云视频截帧
在这里插入图片描述

二、App端视频上传流程

2.1. 上传流程图

在这里插入图片描述

2.2. 流程简述

1.校验用户登录状态，未登录，则跳转登录页面进行登录，登录流程继续。
2.点击中间发布按钮
3.选择或拍摄视频，点击确认
4.携带文件信息跳转短视频发布页面
5.短视频发布页面加载时，接收视频文件信息，解析文件信息
6.配置文件路径和云端文件名称
7.调用云函数，执行短视频云端上传
8.短视频上传过程中，进度条根据实际上传进度动态展示
9.短视频上传完成，调用阿里云视频截帧服务，进行视频截帧封面制作
10.短视频信息封装
11.补充上传内容
12.发布短视频，调用后端接口服务
13.短视频文件信息，简要处理，执行落库处理

三、前端源码实战

3.1. 选择/拍摄短视频

			// 监听中间按钮的点击事件uni.onTabBarMidButtonTap(()=>{// 未登录不能发布视频var myUserInfo = getApp().getUserInfoSession();if (myUserInfo == null) {uni.showToast({duration: 3000,title: "请登录~",icon: "none"});uni.navigateTo({url: "../loginRegist/loginRegist",animationType: "slide-in-bottom",success() {me.loginWords = "请登录"}});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)})/*** 或者采用uniCloud，在客户端完成上传，减少链路，因为文件大，通信链路和耗时是双倍的*/var times = new Date().getTime();}})});

3.2. 短视频上传

	// 当前页面加载时触发onLoad(params) {var me = this;this.statusBarHeight = system.statusBarHeight;this.screenWidth = system.screenWidth;// 上个页面传过来的文件事件对象，其中包含了相册中选择的视频内容var fileObjectEvent = JSON.parse(params.fileObjectEvent);var times = new Date().getTime();uniCloud.uploadFile({// 要上传的文件对象 ->获取视频临时路径filePath: fileObjectEvent.tempFilePath,// 使用阿里云时，cloudPath为云端文件名//根据具体业务自定义 cloudPath: times + '.mp4',// 进度条事件onUploadProgress(progressEvent) {var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);// 这个数值在视频上传过程中是动态变化的百分比，以此来展示上传的具体进度me.percentCompleted = percentCompleted;},// 上传完成后的流程操作success(f) {// 获取视频路径var videoUrlTemp = f.filePath;// 获取视频IDvar videoUrl = f.fileID;// 获得视频参数me.tempFilePath = videoUrlTemp;me.videoUrl = videoUrl;me.tempCover = videoUrl + "?x-oss-process=video/snapshot,t_1,f_jpg,ar_auto"; // 截帧me.width = fileObjectEvent.width;me.height = fileObjectEvent.height;}});},

3.3. 进度条页面

<!-- 进度条 --><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'}">视频上传中~ 请耐心等待~~</text><image mode="aspectFit" src="../../static/images/loading-4.gif"style="width: 600rpx;height: 600rpx;align-self: center;"></view>

3.4. 补充短视频内容

<textarea class="vlog-content" placeholder-style="color: #9798a0;" placeholder="添加合适的标题内容" :value="title":model="title" maxlength="60" @input="typingContent" confirm-type="done"></textarea>

3.5. 视频发布

<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;">发布 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};// 发布视频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: "发布成功！",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. 视频预览

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

四、后端源码实战

4.1. 短视频发布

 /*** 发布vlog视频** @param vlogBO* @return*/@PostMapping("publish")public GraceJSONResult publish(@RequestBody VlogBO vlogBO) {vlogService.createVlog(vlogBO);return GraceJSONResult.ok();}

4.2. 逻辑处理

    /*** 发布vlog视频** @param vlogBO*/@Transactional@Overridepublic void createVlog(VlogBO vlogBO) {//视频IDString 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);}