从零搭建仿抖音短视频APP-后端开发短视频业务模块(1)

项目持续更新中:
仿抖音短视频APP专栏

目录

发布短视频的流程梳理

传统上传流程 

传统上传

CDN上传

CDN上传流程

使用Unicloud云端功能

 实现app端视频上传

保存视频信息入库


发布短视频的流程梳理

传统上传流程 

注:controller接受到文件之后会把文件上传到服务器,同时controller获得某一帧帧来获得我们的封面图,上传到我们的文件服。视频和封面的地址保存到我们的数据库。

传统上传

 这里是两个节点,整个链路带宽资源占了2G,会有2G带宽的损耗。用户产生的风险也很大。

CDN上传

云厂商提供:

CDN,静态资源服务,全球都能访问。 

传统方式:前端上传文件到cdn之后,我们可以拿到cdn中的播放地址,随后我们会把视频文件再次传到controller。

现在:只需要拿到视频文件的url地址,一些基本的视频信息放到我们的controller中存储就可以了。这里我们只有一次文件的上传,产生的带宽损耗发生在云厂商,风险的承担也由他们承担。

补:cdn带有截帧的功能

优化:减少一次带宽,优化传输速率,提升用户体验。

CDN上传流程

 我们会拿到两个url,文本信息提交到controller做处理。

使用Unicloud云端功能

 unicloud可以在云端编写云函数,云函数作为接口为前端服务,这里不需要我们操作。

云端也提供了云数据库服务。

 打开官方控制台:
创建服务空间:

 打开HBuilder:

 关联云空间: 

 集成成功之后的unicloud

 实现app端视频上传

发送在前端的:

 打开前端:

监听函数,代表中间的+按钮,可以让APP.Vue监听,就可以有相应方法的执行:

 这里的e是一个文件事件对象,

 跳转到publish页面:

 进度条: 

上传成功之后,我们会得到一个文件对象(f):

 这里阿里云会提供一个截帧服务。

最后重启,打开主页,点击+上传:

 这里的封面图是截帧截取的

 

 点击预览视频:

 返回网页看我们的云存储:

 这个就是我们刚刚上传的地址。

这就完成了我们CDN的视频上传。

保存视频信息入库

在前端找到发布视频的路由:

 在model中:

 构建service:

接口:

 接口实现:
 

@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);
    }
}

 在controller层:

 Meavn中install,重启运行。

 点击发布,页面消失,发布成功,打开数据库:

把视频的url地址在unicloud中搜索,检查是否匹配。

猜你喜欢

转载自blog.csdn.net/m0_64005381/article/details/127489902