谷粒学院 —— 10、课程管理：整合阿里云视频点播

目录

1、创建模块

1.1、引入视频点播所需依赖

1.2、application.properties

1.3、启动类

2、实现视频上传

2.1、后端

2.1.1、创建常量类

2.1.2、上传视频到阿里云

2.2、配置 nginx

2.3、前端

2.3.1、上传视频组件

2.3.2、方法定义

3、视频删除

3.1、后端

3.1.1、初始化阿里云视频点播客户端

3.1.2、根据视频 ID 删除阿里云视频

3.2、前端

3.2.1、定义 API

3.2.2、定义组件方法

---

1、创建模块

在 service 下创建 service_vod 模块

1.1、引入视频点播所需依赖

    <dependencies>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
            <version>4.6.0</version>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-vod</artifactId>
            <version>2.16.11</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.83</version>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-kms</artifactId>
            <version>2.10.1</version>
        </dependency>

        <!-- 视频上传 -->
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
            <version>4.5.1</version>
        </dependency>
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.10.2</version>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-vod</artifactId>
            <version>2.16.11</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.83</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20170516</version>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.2</version>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-sdk-vod-upload</artifactId>
            <version>1.4.15</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
        </dependency>
    </dependencies>

1.2、application.properties

# 服务端口
server.port=8003
# 服务名
spring.application.name=service-vod

# 环境设置：dev、test、prod
spring.profiles.active=dev

#阿里云 vod
#不同的服务器，地址不同
aliyun.vod.file.keyid=accessKeyId
aliyun.vod.file.keysecret=accessKeySecret

# 最大上传单个文件大小：默认1M
spring.servlet.multipart.max-file-size=1024MB
# 最大置总上传的数据大小 ：默认10M
spring.servlet.multipart.max-request-size=1024MB

1.3、启动类

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class) // 不加载数据库
@ComponentScan(basePackages = {"com.zyj"})  // 扫描包
public class VodApplication {
    public static void main(String[] args) {
        SpringApplication.run(VodApplication.class, args);
    }
}

2、实现视频上传

2.1、后端

2.1.1、创建常量类

@Component
public class ConstantVodUtils implements InitializingBean {

    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;

    @Value("${aliyun.vod.file.keyid}")
    private String accessKeyId;

    @Value("${aliyun.vod.file.keysecret}")
    private String accessKeySecret;

    @Override
    public void afterPropertiesSet() throws Exception {
        ACCESS_KEY_ID = accessKeyId;
        ACCESS_KEY_SECRET = accessKeySecret;
    }
}

2.1.2、上传视频到阿里云

VodService

public interface VodService {

    /**
     * 上传视频到阿里云
     * @param file 视频文件
     * @return 上传后的视频ID
     */
    String uploadVideo(MultipartFile file);
    
}

VodServiceImpl

@Service
public class VodServiceImpl implements VodService {

    /**
     * 上传视频到阿里云
     * @param file 视频文件
     * @return 上传后的视频ID
     */
    @Override
    public String uploadVideo(MultipartFile file) {
        try {
            String accessKeyId = ConstantVodUtils.ACCESS_KEY_ID;
            String accessKeySecret = ConstantVodUtils.ACCESS_KEY_SECRET;
            String fileName = file.getName();   // 上传文件输入流
            String title = fileName.substring(0, fileName.lastIndexOf("."));;  // 阿里云的文件名
            InputStream inputStream = file.getInputStream();

            UploadStreamRequest request = new UploadStreamRequest(accessKeyId, accessKeySecret, title, fileName, inputStream);

            UploadVideoImpl uploader = new UploadVideoImpl();
            UploadStreamResponse response = uploader.uploadStream(request);
            String videoId = null;
            if (response.isSuccess()) {
                videoId = response.getVideoId();
            } else {
                //如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因
                videoId = response.getVideoId();
            }
            return videoId;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

}

VodController

@RestController
@CrossOrigin
@RequestMapping("/vod/video")
@Api(description="阿里云视频点播微服务")
public class VodController {

    @Autowired
    private VodService vodService;

    /**
     * 上传视频到阿里云
     * @param file 视频文件
     * @return
     */
    @ApiOperation("上传视频到阿里云")
    @PostMapping("/uploadAliyunVideo")
    public R uploadAliyunVideo(MultipartFile file) {
        String videoId = vodService.uploadVideo(file);
        return R.ok().data("videoId", videoId);
    }

}

2.2、配置 nginx

在 nginx.conf 中的 server{} 中配置

		location ~ /vod/ {           
			proxy_pass http://localhost:8003;
		}

在 server{} 的 server_name 下配置

client_max_body_size 1024m;

2.3、前端

2.3.1、上传视频组件

src\views\edu\course\chapter.vue

                <el-form-item label="上传视频">
                    <el-upload 
                        :on-success="handleVodUploadSuccess" 
                        :on-remove="handleVodRemove" 
                        :before-remove="beforeVodRemove"
                        :on-exceed="handleUploadExceed" 
                        :file-list="fileList" 
                        :action="BASE_API +'/vod/video/uploadAliyunVideo'" 
                        :limit="1"
                        class="upload-demo"
                    >
                        <el-button size="small" type="primary">上传视频</el-button>
                        <el-tooltip placement="right-end">
                            <div slot="content">最大支持1G，<br>
                                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                                SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
                            <i class="el-icon-question" />
                        </el-tooltip>
                    </el-upload>
                </el-form-item>

2.3.2、方法定义

首先在 data 中定义

                fileList: [],   //上传文件列表
                BASE_API: process.env.BASE_API // 接口API地址

然后定义方法

            /**
             * 上传视频成功调用的方法：赋值上传后视频的ID及文件名
             */
            handleVodUploadSuccess(response, file, fileList) {
                this.video.videoSourceId = response.data.videoId;
                this.video.videoOriginalName = file.name;
            },

            // 试图上传多于一个视频
            handleUploadExceed(files, fileList) {
                this.$message.warning('想要重新上传视频，请先删除已上传的视频');
            },

3、视频删除

3.1、后端

3.1.1、初始化阿里云视频点播客户端

public class InitVodClient {

    /**
     * 初始化阿里云视频点播客户端
     * @param accessKeyId
     * @param accessKeySecret
     * @return
     * @throws ClientException
     */
    public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
        String regionId = "cn-shanghai";  // 点播服务接入地域
        DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
        DefaultAcsClient client = new DefaultAcsClient(profile);
        return client;
    }

}

3.1.2、根据视频 ID 删除阿里云视频

官方文档：媒资管理

    /**
     * 根据视频ID删除阿里云中的视频
     * @param videoId
     * @return
     */
    @DeleteMapping("/{videoId}")
    public R deleteAliyunVideo(
            @ApiParam(name = "videoId", value = "视频ID", required = true) @PathVariable String videoId
    ) {
        try {
            // 初始化客户端
            DefaultAcsClient client = InitVodClient.initVodClient(ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);

            // 创建删除视频 request 对象
            DeleteVideoRequest request = new DeleteVideoRequest();

            // 像 request 对象设置视频ID
            request.setVideoIds(videoId);

            // 调用初始化对象方法实现删除
            client.getAcsResponse(request);

            return R.ok();
        } catch (Exception e) {
            e.printStackTrace();
            throw new GuliException(20001, "删除视频失败");
        }
    }

3.2、前端

3.2.1、定义 API

src\api\edu\video.js

    /**
     * 根据视频ID删除阿里云中的视频
     * @param {*} videoId 
     * @returns 
     */
    deleteAliyunVod(videoId) {
        return request({
            url: `/vod/video/${videoId}`,
            method: 'DELETE',
        })
    }

3.2.2、定义组件方法

            /**
             * 上传视频时删除列表中的视频
             */
            beforeVodRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },

            /**
             * 根据视频ID删除阿里云中的视频
             */
            handleVodRemove() {
                video.deleteAliyunVod(this.video.videoSourceId)
                    // 删除成功
                    .then(response => {
                        // 提示信息
                        this.$message({
                            type: 'success',
                            message: '删除视频成功!'
                        });

                        // 清空文件列表
                        this.fileList = [];

                        // 初始化小节中的视频ID和名称
                        this.video.videoSourceId = '';
                        this.video.videoOriginalName = '';
                    })
                    // 删除失败
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            }