【视频流上传播放功能】前后端分离用springboot-vue简单实现视频流上传和播放功能【详细注释版本，包含前后端代码】

前言：

我是前端程序猿一枚，不是后端的，如有写的有不规范的地方别介意哈，自己摸索了两天算是把这个功能做出来了，网上看了很多帖子没注释说实话，我看的基本是懵逼的。毕竟没有系统学过，所以现在做出来了就总结一下，自己多写点注释解释一下逻辑，让前端的小伙伴们如果也想自己做一个这个功能，可以参考参考。

包含功能：

1，前端点击通过流的形式上传视频
2，视频到后端保存到服务器本地的磁盘中
3，视频上传成功后，数据库对应出现一条信息，分别展示视频的原名，视频的唯一识别码，视频的id，视频的磁盘路径地址。
4，前端渲染出表格展示所有视频信息，根据点击播放按钮，打开对应的视频
5，后端接到请求后根据前端返回的id不同，返回不同的视频，通过视频流的形式返回播放

各文件用处解释：

SelectVideoController：后端给前端的接口写在这个文件内，其中包含两个接口。
（1）/SelectVideo/policemen/{videoId}：用来前端请求后返回对应视频流数据给前端展示视频。
（2）/SelectVideo/table：用于前端表格展示所有video数据的

uploadVideoController：后端给前端的接口写在这个文件内，其中包含一个接口
（1）/api/uploadVideo3：用于前端把本地的视频上传给后端保存在服务器磁盘并在数据库内加一条信息。

VideoUpload：数据库视频表的实体类，前端的人理解为对象。这里的变量必须和数据库的字段一样，不然报错

VideoUploadMapper：接口文件，用于后端链接数据库增删改查等操作的接口，和前端没关系，这里包含三个查询sql语句。
（1）save：用于前端上传的视频保存在数据库内增加一条信息。
（2）SelectVideoAll：用于前端表格展示所有视频信息，查询数据库所有视频信息返回
（3）SelectVideoId：用于前端传id过来，根据id查询数据库对应的一条视频信息返回

NonStaticResourceHttpRequestHandler：用于把视频转换为视频流返回给前端

Demo2Application：配置文件，这里包含一个方法
（1）multipartConfigElement：和上传视频的功能文件uploadVideoController结合的，用于限制视频大小的。

效果图

前端上传页面

前端视频数据展示页面

前端点击播放后弹框页面，我手动打码了，不用在意


mysql数据库字段

后台传过来的视频上传信息

后端代码架构，红框标出来了，其他的不用管，不是相关代码。

说一句，其他的文件有不同的功能，我也写了帖子介绍，可以自行查看，对于创建项目后各个文件作用不清楚的也可以看我其他帖子，有详细解释

后端代码

SelectVideoController

package com.example.demo.controller;


import com.example.demo.entity.VideoUpload;
import com.example.demo.mapper.VideoUploadMapper;
import com.example.demo.utils.NonStaticResourceHttpRequestHandler;

import lombok.AllArgsConstructor;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.nio.charset.StandardCharsets;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.List;

//前端获取后端视频流
@RestController
@RequestMapping("/SelectVideo")
@AllArgsConstructor
public class SelectVideoController {
    //引入返回视频流的组件
    private final NonStaticResourceHttpRequestHandler nonStaticResourceHttpRequestHandler;
    //把后端链接数据库接口引入进来
    @Resource
    VideoUploadMapper videoUploadMapper;
    //解决跨域的注解
    @CrossOrigin(origins = "*", maxAge = 360