這里有騰訊雲的官方文檔
由於公司需求需要學習到騰訊雲點播vod和cos對象存儲技術,這里和后續做一個學習記錄
引入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 += "¤tTimeStamp=" + 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("\n", "").replace("\r", "");
} 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();
},
});
上傳完成
