美文网首页.Net Core
.Net Core MVC使用阿里云Vod视频点播批量上传视频

.Net Core MVC使用阿里云Vod视频点播批量上传视频

作者: 独孤wind小白 | 来源:发表于2019-07-18 11:30 被阅读0次

    目前公司资源需要从服务器上转移至阿里云Vod(视频点播)上,仔细看了下阿里云相关文档,发现只有.Net 视频点播SDK并没有Vod OSS上传的SDK,如果想要使用的话,也只有通过其他的SDK上传或者自己计算阿里云的签名封装一个。。。

    这里介绍的就是使用JavaScript的SDK进行上传,后端使用.Net Core 来获取视频凭证

    后端环境

    .Net Core 2.2
    通过Nuget
    aliyun-net-sdk-core
    aliyun-net-sdk-vod

    前端

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/js/aliyunvod/aliyun-upload-sdk-1.5.0.min.js"></script>
    <script src="~/js/aliyunvod/lib/aliyun-oss-sdk-5.3.1.min.js"></script>
    

    什么是视频点播
    视频点播有点类似于Oss对象存储,实际上也是OSS一个东西,不同的是视频点播专精于视频处理,提供了转码、播放、分析、审核等,功能是很多,代价嘛。。当然是很贵的,反正各位看官,更具自己需求慎用!

    前期准备

    开通视频点播,计费模式选择后付费就好了,上传几十G也没有几块钱,用来测试,足够用了,上传和不转码都不收费,转码的话,分辨率和码率越高,价格越贵,详细价格点击传送门
    当然了解了这些之后,需要我们开通阿里云的AccessKey来进行访问点击进行设置
    做完之后,我们下载阿里云的相关SDK并引用至项目中
    Vod 视频点播SDK
    JavaScript上传SDK
    至于jQuery的。。。自己百度吧

    上传思路

    实例化VodUpload类,用户选择上传文件后,使用uploader.addFile(event.target.files[i], null, null, null, userData)方法,将文件添加至上传列表。这时候我们可以设定一些媒体相关属性。使用SDK中内置方法,可以对上传列表进行增删改等操作。

    对上传列表完成设置后,使用startUpload方法进行上传。

    上传方法调用后,开始上传的回调里,获取并设置视频的上传凭证(upload_auth)和上传地址(upload_address)。

    流程图

    通俗的来讲就是选择文件>>创建vod对象>>添加文件>>通过文件信息向后端获取上传凭证和地址(这时候在视频点播控制台只能看到一个视频的标题和视频id还有相关的存储信息,有点像我们把抗挖好了,就等待往里面灌水了)>>使用JavaScript的SDK进行上传>>返回上传完成
    大致流程就是这样的,批量上传和单个上传都是一样的流程

    后端代码

    我是封装了一个类来使用的,具体使用方式看根据自己需求,可以卸载控制器下面

    视频凭证类

      public class Aliyun_Vod_UploadVideo
        {
            public static readonly string AccessKey = "自己的key";
            public static readonly string AccessKeySecret = "自己的Secret";
            public static readonly string regionId = "自己的存储地址区域";
            public static readonly string RemoteStorageLocation = "存储地址";
            public static readonly long CateId = 分类的id;
            public static readonly string TemplateGroupId = "转码模组的ID";
            public DefaultAcsClient InitVodClient()
            {
                IClientProfile profile = DefaultProfile.GetProfile(regionId, AccessKey, AccessKeySecret);
                return new DefaultAcsClient(profile);
            }
            public CreateUploadVideoResponse GetUploadURL(string title,string fileName)
            {
                try
                {
                    // 构造请求
                    CreateUploadVideoRequest request = new CreateUploadVideoRequest();
                    request.Title = title;//"测试视频";
                    request.FileName = fileName; // "测试视频上传.mp4";
                    request.CateId = CateId;
                    request.TemplateGroupId = TemplateGroupId;
                    // 初始化客户端
                    DefaultAcsClient client = InitVodClient();
                    // 发起请求,并得到响应结果
                    CreateUploadVideoResponse response = client.GetAcsResponse(request);
                    return response;
                }
                catch (ServerException ex)
                {
                    Console.WriteLine(ex.ToString());
                    return null;
                }
                catch (ClientException ex)
                {
                    Console.WriteLine(ex.ToString());
                    return null;
                }
            }
            public RefreshUploadVideoResponse RefreshUploadURL(string videoId)
            {
                try
                {
                    // 构造请求
                    RefreshUploadVideoRequest request = new RefreshUploadVideoRequest();
                    request.VideoId = videoId;
                    // 初始化客户端
                    DefaultAcsClient client = InitVodClient();
                    // 发起请求,并得到 response
                    RefreshUploadVideoResponse response = client.GetAcsResponse(request);
                    Console.WriteLine("RequestId = " + response.RequestId);
                    Console.WriteLine("UploadAddress = " + response.UploadAddress);
                    Console.WriteLine("UploadAuth = " + response.UploadAuth);
                    return response;
                }
                catch (ServerException ex)
                {
                    Console.WriteLine(ex.ToString());
                    return null;
                }
                catch (ClientException ex)
                {
                    Console.WriteLine(ex.ToString());
                    return null;
                }
            }
        }
    
    

    控制器方法

    
            /// <summary>
            /// 创建视频凭证 接口
            /// </summary>
            /// <returns></returns>
            public JsonResult ICreateUploadVideo(string title, string fileName)
            {
                Aliyun_Vod_UploadVideo aliyun_Vod = new Aliyun_Vod_UploadVideo();
                CreateUploadVideoResponse response = aliyun_Vod.GetUploadURL(title, fileName);
                VodModel vodMode = new VodModel
                {
                    RequestId = response.RequestId,
                    UploadAddress = response.UploadAddress,
                    UploadAuth = response.UploadAuth,
                    VideoId = response.VideoId
                };
                AppendExcel(fileName, vodMode.VideoId);
                return Json(vodMode);
            }
    

    前端代码

    @{
        ViewData["Title"] = "UploadVideo";
    }
    
    <h1>UploadVideo</h1>
    
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/js/aliyunvod/aliyun-upload-sdk-1.5.0.min.js"></script>
    <script src="~/js/aliyunvod/lib/aliyun-oss-sdk-5.3.1.min.js"></script>
    <input type="file" class="layui-btn" value="添加上传" id="fileUpload" multiple />
    <label class="layui-text">上传状态:<span id="status"></span></label>
    <input type="button" class="layui-btn" value="开始上传" id="authUpload" disabled="true" />
    <input type="button" class="layui-btn" value="暂停上传" id="pauseUpload" disabled="true" />
    <input type="button" class="layui-btn" value="恢复上传" id="resumeUpload" disabled="true" />
    <span class="progress">上传进度<i id="auth-progress">0</i>%</span>
    
    <table class="layui-table" id="tab">
        <thead>
            <tr>
                <th width="30%">文件名</th>
                <th>视频id</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
    
        </tbody>
    </table>
    <input type="button" class="layui-btn" value="插入" id="addTable" />
    <script>
        $(document).ready(function () {
            //创建上传对象
            function createUploader() {
                var uploader = new AliyunUpload.Vod({
                    timeout: 90000,
                    partSize: 1048576,
                    parallel: efile.target.files.length,//文件多少,就设置多少
                    retryCount: 3,
                    retryDuration: 2,
                    region: '储存地址区域',
                    userId: '阿里云id',
                    // 添加文件成功
                    addFileSuccess: function (uploadInfo) {
                        console.log('addFileSuccess')
                        $('#authUpload').attr('disabled', false)
                        $('#resumeUpload').attr('disabled', false)
                        $('#status').text('添加文件成功, 等待上传...')
                        console.log("添加文件名addFileSuccess: " + uploadInfo.file.name)
                    },
                    onUploadstarted: function (uploadInfo) {
                        // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
                        // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值,调用点播的不同接口获取uploadauth和uploadAddress
                        // 如果 uploadInfo.videoId 有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
                        // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
                        // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
                        // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
                        if (!uploadInfo.videoId) {
                       
                            var fileName = uploadInfo.file.name
                            //自定义上传接口
                            var createUrl = 'https://localhost:44325/vod/ICreateUploadVideo?title=' + fileName + '&fileName=' + fileName
    
                            console.log('上传凭证请求接口:' + createUrl)
                            $.get(createUrl, function (data) {
                                console.log('返回上传地址和上传凭证:' + data);
                                var uploadAuth = data.uploadAuth
                                var uploadAddress = data.uploadAddress
                                var videoId = data.videoId
                                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
                            }, 'json')
                            $('#status').text('文件开始上传...')
                        } else {
    
                            // 如果videoId有值,根据videoId刷新上传凭证
                            var refreshUrl = 'https://localhost:44325/vod/IRefreshUploadVideo?videoId=' + uploadInfo.videoId
                            var fileName = uploadInfo.file.name
                            //自定义上传接口
                          //afaf8aa3d3e2489fb55a5601f076d3d1这里会莫名多出一个id,由于时间问题,所以这边我直接调用了视频接口,没有调用刷新凭证接口
                            var createUrl = 'https://localhost:44325/vod/ICreateUploadVideo?title=' + fileName + '&fileName=' + fileName
                            $.get(createUrl, function (data) {
                                var uploadAuth = data.uploadAuth
                                var uploadAddress = data.uploadAddress
                                var videoId = data.videoId
                                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
                            }, 'json')
                        }
                    },
                    // 文件上传成功
                    onUploadSucceed: function (uploadInfo) {
                        console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
                        $('#status').text('文件上传成功!')
                         $('#tab').append('<tr><td>' + uploadInfo.file.name + '</td><td>' + uploadInfo.videoId + '</td><td>'+uploadInfo.file.name+'>>文件已上传完成</td></tr>')
                    },
                    // 文件上传失败
                    onUploadFailed: function (uploadInfo, code, message) {
                        console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
                        $('#status').text('文件上传失败!')
                    },
                    // 取消文件上传
                    onUploadCanceled: function (uploadInfo, code, message) {
                        console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
                        $('#status').text('文件上传已暂停!')
                    },
                    // 文件上传进度,单位:字节, 可以在这个函数中拿到上传进度并显示在页面上
                    onUploadProgress: function (uploadInfo, totalSize, progress) {
                        console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
                        var progressPercent = Math.ceil(progress * 100)
                        $('#auth-progress').text(progressPercent)
                        $('#status').text('文件上传中...')
                    },
                    // 上传凭证超时
                    onUploadTokenExpired: function (uploadInfo) {
                        // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
                        // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
                        // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
                        $('#status').text('文件上传超时!')
    
                        let refreshUrl = 'https://localhost:44325/vod/IRefreshUploadVideo?videoId=' + uploadInfo.videoId
                        $.get(refreshUrl, function (data) {
                            var uploadAuth = data.uploadAuth
                            uploader.resumeUploadWithAuth(uploadAuth)
                            console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
                        }, 'json')
                    },
                    // 全部文件上传结束
                    onUploadEnd: function (uploadInfo) {
                        $('#status').text('所有文件全部上传完毕!')
                        console.log("onUploadEnd: uploaded all the files")
                    }
                })
                return uploader
            }
            var uploader = null
            var efile;
            //选择上传文件
            $('#fileUpload').on('change', function (e) {
                efile = e;
                startUploadVido(efile)
            })
            var startUploadVido = function (file) {
                if (!file) {
                    alert("请先选择需要上传的文件!")
                    return
                }
                var Title = file.name
                var userData = '{"Vod":{}}'
                if (uploader) {
                    uploader.stopUpload()
                    $('#auth-progress').text('0')
                    $('#status').text("")
                }
                uploader = createUploader()
                // 首先调用 uploader.addFile(event.target.files[i], null, null, null, userData)
                //批量添加文件上传
                for (var i = 0; i < file.target.files.length; i++) {
                    uploader.addFile(file.target.files[i], null, null, null, userData)
                }
                $('#authUpload').attr('disabled', false)
                $('#pauseUpload').attr('disabled', true)
                $('#resumeUpload').attr('disabled', true)
                var tempInt;
                var bool = true
            }
            // 第一种方式 UploadAuth 上传
            $('#authUpload').on('click', function () {
                // 然后调用 startUpload 方法, 开始上传
                if (uploader !== null) {
                    uploader.startUpload()
                    $('#authUpload').attr('disabled', true)
                    $('#pauseUpload').attr('disabled', false)
                }
            })
            // 暂停上传
            $('#pauseUpload').on('click', function () {
                if (uploader !== null) {
                    uploader.stopUpload()
                    $('#resumeUpload').attr('disabled', false)
                    $('#pauseUpload').attr('disabled', true)
                }
            })
            //恢复上传
            $('#resumeUpload').on('click', function () {
                if (uploader !== null) {
                    uploader.startUpload()
                    $('#resumeUpload').attr('disabled', true)
                    $('#pauseUpload').attr('disabled', false)
                }
            })
        })
    </script>
    

    大部分代码阿里云提供了示例,当然直接复制我这个代码也是可以直接使用的,测试了一次性上传2000个视频,接近300GB,一晚上全部上传完毕,很稳定,没有出现异常,在如果视频id存在,而调用了刷新凭证接口后端会抛出该视频id不存在的异常,所以我直接调用了创建新的视频id接口,未发现异常,解决了的这个问题的朋友可以留言分享下

    相关文章

      网友评论

        本文标题:.Net Core MVC使用阿里云Vod视频点播批量上传视频

        本文链接:https://www.haomeiwen.com/subject/wejklctx.html