Mooc项目开发笔记（十八）：阿里云视频点播集成、添加小节上传视频前后端实现

一、阿里云视频点播测试

1、开通阿里云视频点播

在阿里云网站搜索视频点播，点击管理控制台，选择按流量计费开通视频点播服务。

2、创建service_vod子模块

在service中创建service_vod子模块，并在其pom文件中引入如下依赖：

<dependencies>
    <dependency>
        <groupId>com.aliyungroupId>
        <artifactId>aliyun-java-sdk-coreartifactId>
    dependency>
    <dependency>
        <groupId>com.aliyun.ossgroupId>
        <artifactId>aliyun-sdk-ossartifactId>
    dependency>
    <dependency>
        <groupId>com.aliyungroupId>
        <artifactId>aliyun-java-sdk-vodartifactId>
    dependency>
    <dependency>
        <groupId>com.aliyungroupId>
        <artifactId>aliyun-sdk-vod-uploadartifactId>
    dependency>
    <dependency>
        <groupId>com.alibabagroupId>
        <artifactId>fastjsonartifactId>
    dependency>
    <dependency>
        <groupId>org.jsongroupId>
        <artifactId>jsonartifactId>
    dependency>
    <dependency>
        <groupId>com.google.code.gsongroupId>
        <artifactId>gsonartifactId>
    dependency>

    <dependency>
        <groupId>joda-timegroupId>
        <artifactId>joda-timeartifactId>
    dependency>
dependencies>

3、初始化vod sdk

参考文档：https://help.aliyun.com/document_detail/61062.html

在test目录下创建初始化类

package cn.hanzhuang42.vodtest;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.exceptions.ClientException;

public class InitVod {
    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;
    }
}

4、测试获取播放地址

package cn.hanzhuang42.vodtest;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.vod.model.v20170321.GetPlayInfoRequest;
import com.aliyuncs.vod.model.v20170321.GetPlayInfoResponse;

import java.util.List;

public class TestVod {

    public static void main(String[] args) throws ClientException {
        //1、根据视频id获取视频播放地址
        //创建初始化对象
        DefaultAcsClient client = InitVod.initVodClient("你的Access ID", "你的Access Key");
        //创建获取视频地址的request对象
        GetPlayInfoRequest request = new GetPlayInfoRequest();
        //向request对象中设置视频id
        request.setVideoId("视频ID");

        //调用初始化对象里的方法，传递request，获取数据
        GetPlayInfoResponse response = client.getAcsResponse(request);
        List<GetPlayInfoResponse.PlayInfo> playInfoList = response.getPlayInfoList();
        //播放地址
        for (GetPlayInfoResponse.PlayInfo playInfo : playInfoList) {
            System.out.print("PlayInfo.PlayURL = " + playInfo.getPlayURL() + "\n");
        }
        //Base信息
        System.out.print("VideoBase.Title = " + response.getVideoBase().getTitle() + "\n");
    }

}

5、测试获取视频播放凭证

加密视屏使用视频播放地址不能直接播放，而需要通过获取播放凭证的方式进行播放

package cn.hanzhuang42.vodtest;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.vod.model.v20170321.GetPlayInfoRequest;
import com.aliyuncs.vod.model.v20170321.GetPlayInfoResponse;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthRequest;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthResponse;

import java.util.List;

public class TestVod {

    public static void main(String[] args) throws ClientException {
        //2、根据视频id获取视频播放凭证
        //创建初始化对象
        DefaultAcsClient client = InitVod.initVodClient("你的Access ID", "你的Access Key");
        //创建获取视频凭证的request对象
        GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
        //向request对象中设置视频id
         request.setVideoId("视频ID");

        //调用初始化对象里的方法，传递request，获取数据
        GetVideoPlayAuthResponse response = client.getAcsResponse(request);
        //播放凭证
        System.out.print("PlayAuth = " + response.getPlayAuth() + "\n");
    }
}

6、测试上传本地视频

下载Java示例代码VODUploadDemo-java-1.4.12.zip开发包(包含示例代码和所需jar包）, 见服务端上传SDK ;

可直接在您的项目中添加maven依赖，也可以将VODUploadDemo-java-1.4.12.zip包中的所有jar包引入您的项目中使用。其中，aliyun-java-vod-upload-1.4.12.jar 还未正式开源，请您直接引入jar包至您的项目中使用。

测试代码如下：

package cn.hanzhuang42.vodtest;

import com.aliyun.vod.upload.impl.UploadVideoImpl;
import com.aliyun.vod.upload.req.UploadVideoRequest;
import com.aliyun.vod.upload.resp.UploadVideoResponse;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.vod.model.v20170321.GetPlayInfoRequest;
import com.aliyuncs.vod.model.v20170321.GetPlayInfoResponse;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthRequest;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthResponse;

import java.util.List;

public class TestVod {

    public static void main(String[] args) throws ClientException {
        //3、上传视频的方法
        String title = "6 - What If I Want to Move Faster - upload by sdk";

        String fileName = "C:\\6 - What If I Want to Move Faster.mp4";
        UploadVideoRequest request = new UploadVideoRequest("你的Access ID", "你的Access Key");
        /* 可指定分片上传时每个分片的大小，默认为1M字节 */
        request.setPartSize(1 * 1024 * 1024L);
        /* 可指定分片上传时的并发线程数，默认为1，(注：该配置会占用服务器CPU资源，需根据服务器情况指定）*/
        request.setTaskNum(1);
        /* 是否开启断点续传, 默认断点续传功能关闭。当网络不稳定或者程序崩溃时，再次发起相同上传请求，可以继续未完成的上传任务，适用于超时3000秒仍不能上传完成的大文件。
        注意: 断点续传开启后，会在上传过程中将上传位置写入本地磁盘文件，影响文件上传速度，请您根据实际情况选择是否开启*/
        request.setEnableCheckpoint(false);

        UploadVideoImpl uploader = new UploadVideoImpl();
        UploadVideoResponse response = uploader.uploadVideo(request);
        if (response.isSuccess()) {
            System.out.print("VideoId=" + response.getVideoId() + "\n");
        } else {
            /* 如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因 */
            System.out.print("VideoId=" + response.getVideoId() + "\n");
            System.out.print("ErrorCode=" + response.getCode() + "\n");
            System.out.print("ErrorMessage=" + response.getMessage() + "\n");
        }
    }
}

二、添加小节上传视频后端实现

1、引入依赖

如上所示，创建service_vod模块。引入相关的maven依赖，以及将aliyun-java-vod-upload-1.4.12.jar 导入

2、创建application配置文件

将resource文件夹 make dir as设置为 resource文件夹

在resource文件夹下面创建application.properties文件，并加入如下内容

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

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

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

#设置文件的上传大小，否则默认1M，过大会报错
# 最大上传单个文件大小
spring.servlet.multipart.max-file-size=1024MB
# 最大置总上传的数据大小
spring.servlet.multipart.max-request-size=1024MB

3、创建启动类

在java文件夹下，创建cn.hanzhuang42.vod文件并在启动创建VodApplication启动类

package cn.hanzhuang42.vod;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class) //去除加载数据库的模块
@ComponentScan(basePackages = {"cn.hanzhuang42"})//要使用swagger等，需要开启组件扫描
public class VodApplication {
    public static void main(String[] args) {
        SpringApplication.run(VodApplication.class, args);
    }
}

4、创建常量类

创建utils包，在下面创建ConstantVodUtils.java类用于读取配置文件中的内容：

package cn.hanzhuang42.vod.utils;

import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

@Component
public class ConstantVodUtils implements InitializingBean {

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

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

    public static String KEY_ID;
    public static String KEY_SECRET;

    @Override
    public void afterPropertiesSet() throws Exception {
        KEY_ID = keyId;
        KEY_SECRET = keySecret;
    }
}

5、创建service

创建service包，在其中添加接口：VideoService.java

package cn.hanzhuang42.vod.service;

import org.springframework.web.multipart.MultipartFile;

public interface VodService {
    String uploadVideoAliYun(MultipartFile file);
}

在service包中添加impl包，添加实现service实现类：VideoServiceImpl.java

package cn.hanzhuang42.vod.service.impl;

import cn.hanzhuang42.vod.service.VodService;
import cn.hanzhuang42.vod.utils.ConstantVodUtils;
import com.aliyun.vod.upload.impl.UploadVideoImpl;
import com.aliyun.vod.upload.req.UploadStreamRequest;
import com.aliyun.vod.upload.resp.UploadStreamResponse;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;

@Service
public class VodServiceImpl implements VodService {


    @Override
    public String uploadVideoAliYun(MultipartFile file) {
        try {
            //上传文件的原始名称
            String fileName = file.getOriginalFilename();
            //上传后显示的名称
            int dotIdx = fileName.lastIndexOf('.');
            String title = fileName.substring(0,dotIdx);
            //文件流
            InputStream inputStream = null;
                inputStream = file.getInputStream();
            UploadStreamRequest request = new UploadStreamRequest(ConstantVodUtils.KEY_ID
                    , ConstantVodUtils.KEY_SECRET, 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为空，此时需要根据返回错误码分析具体错误原因
                System.out.print("VideoId=" + response.getVideoId() + "\n");
                System.out.print("ErrorCode=" + response.getCode() + "\n");
                System.out.print("ErrorMessage=" + response.getMessage() + "\n");
            }
            return videoId;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }
}

6、创建controller

创建controller包，在其中添加VodController类

package cn.hanzhuang42.vod.controller;

import cn.hanzhuang42.commonutils.R;
import cn.hanzhuang42.vod.service.VodService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/eduvod/video")
@CrossOrigin
public class VodController {

    @Autowired
    private VodService vodService;


    /**
     * 上传视频到阿里云
     * @param file
     * @return
     */
    @PostMapping("upload")
    public R uploadVideo(MultipartFile file) {
        //返回上传视频的ID
        String videoId = vodService.uploadVideoAliYun(file);
        return R.ok().data("videoId",videoId);
    }

}

7、swagger测试

启动服务后打开swagger进行测试，点击try it out并选择视频文件

等待上传，结果显示成功：

控制台回显vedioId

三、添加小节上传视频前端实现

1、配置nginx反向代理

将接口地址加入nginx配置

location ~ /eduvod/ {
    proxy_pass http://localhost:8082;
}

配置nginx上传文件大小，否则上传时会有 413 (Request Entity Too Large) 异常

打开nginx主配置文件nginx.conf，找到http{}，添加

client_max_body_size 1024m;

最后重启nginx

2、数据定义

在views\edu\course\chapter,vue的data中提娜佳如下数据定义：

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

3、整合上传组件

在html中添加上传组件

<el-form-item label="上传视频">
    <el-upload
           :on-success="handleVodUploadSuccess"
           :on-remove="handleVodRemove"
           :before-remove="beforeVodRemove"
           :on-exceed="handleUploadExceed"
           :file-list="fileList"
           :action="BASE_API+'/admin/vod/video/upload'"
           :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>

4、方法定义

//成功回调
//上传视频成功调用的方法
handleVodUploadSuccess(response, file, fileList){
    this.video.videoSourceId = response.data.videoId;//上传视频文件的id
    this.video.videoOriginalName = file.name //上传视频文件的名称
},
//视图上传多于一个视频
handleUploadExceed(files, fileList) {
  this.$message.warning('想要重新上传视频，请先删除已上传的视频')
},

5、测试

点击上传视频，选择视频就能直接上传视频

查看数据库中的edu_video表可以看到新添加的小节数据，其中也包含视频ID