腾讯云点播vod使用Web 端上传 SDK视频上传

这里有腾讯云的官方文档

申请访问密钥地址 https://console.cloud.tencent.com/cam/capi

由于公司需求需要学习到腾讯云点播vod和cos对象存储技术,这里和后续做一个学习记录

腾讯云官方web的sdk上传视频
官方上传签名参考地址

引入script 引入方式

<script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
<script src="../resource/js/txyun/vod-js-sdk-v6.js"></script>
<script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js"></script>

前端需要定义一个上传的签名

这里需要到上面第二个链接查看官方文档

这里的签名需要后端生成,然后前端进行一个获取,需要注意的是后端去生成签名的话,需要加上以下参数,还需要加上任务流模板,不然后续上传完成获取链接播放会报错腾讯云没有找到可以播放的自适应码流

var getSignature = function(callback) {
    $.ajax({
        url : "getSign", //服务器获取客户端上传签名的URL
        type : "POST",
        success:function(data){

            var dataObj = eval("(" + data + ")");
            //result.returnData.signature为获取到的签名
            callback(dataObj.signature);
            //callback(result.returnData.signature);
        }
    });
};

可以看到官方说在上传签名时就可以上传转流了

后端服务端派发签名示例

JAVA签名示例官方参考
官方示例

getSign.class

	@Value("${accessKeyId}")
	private  String accessKeyId;

        @Value("${accessKeySecret}")
	private  String accessKeySecret;

	@RequestMapping("/getSign")
	@ResponseBody
	public String getSign() {
		logger.info("获取签名中...");
		//得到Sign
		Signature sign = new Signature();
		//个人API密钥中的Secret Id
		sign.setSecretId(accessKeyId);
		//个人API密钥中的Secret Key
		sign.setSecretKey(accessKeySecret);
		sign.setCurrentTime(System.currentTimeMillis() / 1000);
		sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));
		sign.setSignValidDuration(3600 * 24 * 2);

		String signature = null;
		try {
			JSONObject jsonObject = new JSONObject();

			signature = sign.getUploadSignature();
			System.out.println("signature : " + signature);

			jsonObject.put("signature",signature);
			logger.info("返回签名中--end");
			return jsonObject.toString();
		} catch (Exception e) {
			System.out.print("获取签名失败");
			logger.info("获取签名失败");
			e.printStackTrace();
			return null;

		}
	}

Signature.class

任务流 视频转流可参考以下地址

https://cloud.tencent.com/document/product/266/9221

Signature.class

import sun.misc.BASE64Encoder;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;

public class Signature {
    private String secretId;
    private String secretKey;
    private long currentTime;
    private int random;
    private int signValidDuration;

    private static final String HMAC_ALGORITHM = "HmacSHA1";
    private static final String CONTENT_CHARSET = "UTF-8";

    public static byte[] byteMerger(byte[] byte1, byte[] byte2) {
        byte[] byte3 = new byte[byte1.length + byte2.length];
        System.arraycopy(byte1, 0, byte3, 0, byte1.length);
        System.arraycopy(byte2, 0, byte3, byte1.length, byte2.length);
        return byte3;
    }

    public String getUploadSignature() throws Exception {
        String strSign = "";
        String contextStr = "";

        long endTime = (currentTime + signValidDuration);
        contextStr += "secretId=" + java.net.URLEncoder.encode(secretId, "utf8");
        contextStr += "&currentTimeStamp=" + currentTime;
        contextStr += "&expireTime=" + endTime;
        contextStr += "&random=" + random;
        //任务流 视频转流
        contextStr += "&procedure=" + "LongVideoPreset";
        contextStr += "&taskPriority=" + 10;
        contextStr += "&taskNotifyMode=" + "Finish";

        try {
            Mac mac = Mac.getInstance(HMAC_ALGORITHM);
            SecretKeySpec secretKey = new SecretKeySpec(this.secretKey.getBytes(CONTENT_CHARSET), mac.getAlgorithm());
            mac.init(secretKey);

            byte[] hash = mac.doFinal(contextStr.getBytes(CONTENT_CHARSET));
            byte[] sigBuf = byteMerger(hash, contextStr.getBytes("utf8"));
            strSign = new String(new BASE64Encoder().encode(sigBuf).getBytes());
            strSign = strSign.replace(" ", "").replace("
", "").replace("
", "");
        } catch (Exception e) {
            throw e;
        }
        return strSign;
    }

    public void setSecretId(String secretId) {
        this.secretId = secretId;
    }

    public void setSecretKey(String secretKey) {
        this.secretKey = secretKey;
    }

    public void setCurrentTime(long currentTime) {
        this.currentTime = currentTime;
    }

    public void setRandom(int random) {
        this.random = random;
    }

    public void setSignValidDuration(int signValidDuration) {
        this.signValidDuration = signValidDuration;
    }
}

上传腾讯云点播vod视频

官方参考文档

第一种官方

<script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js"></script>

function getSignature() {
    return axios.post("去后端请求预签名").then(function (response) {
        return response.data.signature;
    })
};

        // 通过 import 引入的话，new TcVod(opts) 即可
        // new TcVod.default(opts) 是 script 引入 的用法
        const tcVod = new TcVod.default({
            getSignature: getSignature// 前文中所述的获取上传签名的函数

        })

        var videoFile = file;
        const uploader = tcVod.upload({
            mediaFile: videoFile, // 媒体文件（视频或音频或图片），类型为 File
        })
        // 视频上传完成时
        uploader.on('media_upload', function(info) {
            console.log("上传完成"+info)
            uploaderInfo.isVideoUploadSuccess = true;
        })
        // 视频上传进度
        uploader.on('media_progress', function(result) {
            console.log(" 视频上传进度=========>"+JSON.stringify(info))
            uploaderInfo.progress = info.percent;

            var fileHash = hashCode(result.name+videoFile.size);
            console.log("fileHash=============>"+fileHash)
            var td =  $("[data-hash='"+fileHash+"']").parent();
            var progress = $(td).parent().next().find(".sr-only");
            console.log("progress=============>"+progress)

            $(progress).css("width",(result.curr*100) + "%");
            console.log("uploaderInfo.mediaProgress=============>"+uploaderInfo.mediaProgress)

            localStorage.setItem("checkpoint_temp"+fileHash,videoFile.videoId);
        })
        // 封面上传完成时
        uploader.on('cover_upload', function(info) {
            console.log("封面上传完成时===========>"+JSON.stringify(info))
            uploaderInfo.isCoverUploadSuccess = true;
        })
        // 封面上传进度
        uploader.on('cover_progress', function(info) {
            uploaderInfo.coverProgress = info.percent;
        })
        uploader.done().then(function (doneResult) {
        // deal with doneResult
        })

上传进度和上传完成返回的结果 根据自己需要做相对于的功能操作

第二种 网上参考(根据小程序)

依赖

<script src="${base}/resource/js/txyun/vod-js-sdk-v6.js"></script>
https://blog-static.cnblogs.com/files/rzkwz/ugcUploader.js

        var resultMsg = qcVideo.ugcUploader.start({
            videoFile : videoFile,//视频文件
            getSignature : getSignature,//后端返回的签名
            allowAudio : 1,
            isTranscode: 1,
            error : function(result) {
                alert("上传失败");
            },
            progress : function(result) {
                var percent = parseInt(result.curr * 10000)/100;
                var speed = parseInt((result.shacurr / 10242 /1024)*100)/100;
                console.log('进度: '+ percent + '%; 速度: ' + speed + 'Mb/s');
                console.log('进度: '+parseInt(percent) + '%');
                // 上传进度
                log("onUploadProgress:file:" + result.name + ", fileSize:" + videoFile.size + ", percent:" + (result.curr * 100.00).toFixed(2) + "%");

            },
            finish: function (result) {
                var info ={
                    "上传结果的 fileId":result.fileId,
                    "上传结果的视频名称":result.videoName,
                    "上传结果的视频地址":result.videoUrl,
                    "上传结果的封面名称":result.coverName,
                    "上传结果的封面地址":result.coverUrl
                }
                console.log(JSON.stringify(info,null,2));
                var successResult = JSON.stringify(result,null,2)
                var dataObj = eval("(" + successResult + ")");
                fileId = dataObj.fileId;
                //✌业务
                saveFile();

            },
        });

上传完成