web端利用腾讯云点播接口上传视频

腾讯云web上传文件文档

https://cloud.tencent.com/document/product/266/9239#.E5.B8.B8.E8.A7.81.E9.97.AE.E9.A2.98

sdk:https://github.com/tencentyun/vod-js-sdk-v6

根据文档下载sdk或参考sdk即可

前端源代码地址 https://github.com/tencentyun/vod-js-sdk-v6/blob/master/docs/index.html

注意,前端获取签名的地址要改成自己后台的签名生成地址

在视频上传成功里面加入自己的逻辑

c# 签名代码 

签名规范及参数文档 https://cloud.tencent.com/document/product/266/9221 

 /// <summary>
    /// 获取web端上传视频签名   https://cloud.tencent.com/document/product/266/9219
    /// </summary>
    /// <param name="context"></param>
    /// <returns></returns>
    private string TencentGetUploadSign(HttpContext context)
    {
        try
        {
            //调用方法
            Signature sign = new Signature();
            sign.m_strSecId = "";
            sign.m_strSecKey = "";
            sign.m_qwNowTime = Signature.GetIntTimeStamp();
            sign.m_iRandom = new Random().Next(0, 1000000);
            sign.m_iSignValidDuration = 3600 * 24 * 2;
            string signStr = sign.GetUploadSignature();
            //根据自己系统的规范返回
            return ReturnJson.AjaxJsonByDt(true, "", signStr);
        }
        catch (Exception ex)
        {
            LogHelper.WriteErrorLog(ex.ToString(), "APIError", "Live");
            return ReturnJson.AjaxJsonByDt(false, ex.Message, "");
        }
    }  





public class Signature
    {
        public string m_strSecId;
        public string m_strSecKey;
        public int m_iRandom;
        public long m_qwNowTime;
        public int m_iSignValidDuration;
        public static long GetIntTimeStamp()
        {
            TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1);
            return Convert.ToInt64(ts.TotalSeconds);
        }
        private byte[] hash_hmac_byte(string signatureString, string secretKey)
        {
            var enc = Encoding.UTF8; HMACSHA1 hmac = new HMACSHA1(enc.GetBytes(secretKey));
            hmac.Initialize();
            byte[] buffer = enc.GetBytes(signatureString);
            return hmac.ComputeHash(buffer);
        }
        public string GetUploadSignature()
        {
            string strContent = "";
            strContent += ("secretId=" + Uri.EscapeDataString((m_strSecId)));
            strContent += ("&currentTimeStamp=" + m_qwNowTime);
            strContent += ("&expireTime=" + (m_qwNowTime + m_iSignValidDuration));
            strContent += ("&random=" + m_iRandom);
            byte[] bytesSign = hash_hmac_byte(strContent, m_strSecKey);
            byte[] byteContent = System.Text.Encoding.Default.GetBytes(strContent);
            byte[] nCon = new byte[bytesSign.Length + byteContent.Length];
            bytesSign.CopyTo(nCon, 0);
            byteContent.CopyTo(nCon, bytesSign.Length);
            return Convert.ToBase64String(nCon);
        }
    }

注意 :

添加签名其他参数时,其他参数要UrlEncode,  比如加转码时

procedure= HttpUtility.UrlEncode("转码任务流");

1. 安装腾讯云点播 SDK 首先需要安装腾讯云点播 SDK,可以通过 npm 安装: ``` npm install vod-node-sdk --save ``` 2. 引入 el-upload 组件 在项目中引入 el-upload 组件: ```js import { ElUpload } from 'element-plus' ``` 3. 初始化腾讯云点播 SDK 在使用腾讯云点播 SDK 之前,需要先初始化: ```js import Vod from 'vod-node-sdk' const vod = new Vod({ SecretId: 'yourSecretId', SecretKey: 'yourSecretKey', }) ``` 4. 配置 el-upload el-upload 组件有很多配置项,我们需要将其中一些配置项设置为腾讯云点播需要的参数。 ```html <template> <el-upload :action="uploadUrl" :headers="headers" :on-success="onSuccess" :before-upload="beforeUpload" > <el-button type="primary">点击上传视频</el-button> </el-upload> </template> <script> import { ElUpload } from 'element-plus' import Vod from 'vod-node-sdk' export default { components: { ElUpload, }, data() { return { vod: null, uploadUrl: '', headers: {}, } }, created() { // 初始化腾讯云点播 SDK this.vod = new Vod({ SecretId: 'yourSecretId', SecretKey: 'yourSecretKey', }) // 获取上传 URL 和上传鉴权参数 this.vod.getUploadSignature({ fileType: 'video', fileName: 'test.mp4', }).then(({ uploadUrl, headers }) => { this.uploadUrl = uploadUrl this.headers = headers }) }, methods: { // 上传成功回调函数 onSuccess(response, file, fileList) { console.log(response) }, // 上传前的回调函数,用来设置上传参数 beforeUpload(file) { const { headers } = this headers['X-Session-Token'] = file.token headers['Content-Type'] = file.type return true }, }, } </script> ``` 5. 总结 通过以上步骤,我们就可以使用 el-upload 组件结合腾讯云点播 SDK 完成视频上传了。其中需要注意的是,上传文件的文件名需要和获取上传 URL 时传入的文件名一致,否则会上传失败。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值