C#結(jié)合JavaScript實(shí)現(xiàn)上傳視頻到騰訊云點(diǎn)播平臺(tái)的操作方法
需求
在云培訓(xùn)系統(tǒng)里,制作視頻課件是我們的主要工作之一,制作完成后如果將這些素材存儲(chǔ)到服務(wù)器并進(jìn)行分發(fā)播放,是擺在我們面前的一個(gè)問(wèn)題。最終我們選擇了騰訊云點(diǎn)播服務(wù),其加速分發(fā)播放幾乎適用所有需要展示圖片或音視頻媒體內(nèi)容的在線場(chǎng)景,借助遍布全球的大量 CDN 加速節(jié)點(diǎn),在復(fù)雜的網(wǎng)絡(luò)環(huán)境也能提供高質(zhì)量的媒體內(nèi)容訪問(wèn)服務(wù)。
上傳視頻功能,主要要解決兩個(gè)問(wèn)題:
1、在服務(wù)端通過(guò)C#生成簽名和SDKID
2、在客戶端通過(guò)JavaScript上傳視頻到騰訊云點(diǎn)播服務(wù)器。
關(guān)鍵代碼
界面元素布局
放置一個(gè)DIV容器,包括 file 上傳控件(id:file1)、一個(gè)上傳進(jìn)度條的灰色背景層(id:ajax_uploadFiles_curbg)、一個(gè)傳進(jìn)度條的進(jìn)度圖片(id:ajax_uploadFiles_curprogress)、一個(gè)提示文字層(id:tip),圖片及層采用絕對(duì)定位,并在上傳過(guò)程中計(jì)算進(jìn)度值以決定進(jìn)度圖片的寬度。
示例代碼如下:
<div> <input type="file" accept=".mp4,.mp3" id="file1" onchange="vUpload()" /> <img id="ajax_uploadFiles_curprogress" style="z-index:1;position:absolute;left:0px;top:4px;width:0px;height:12px" alt="" src="win7progress.jpg" /> <div id="ajax_uploadFiles_curbg" style="display:none;z-index:0;position:absolute;left:0px;top:4px;width:203px;height:12px;background-color:Gray"></div> <div id="tip" style="z-index:0;position:absolute; font-size:9pt;left:205px;top:2px;height:12px;"></div> </div>
C# 實(shí)現(xiàn)服務(wù)端的簽名類
上傳之前需要提供您的開(kāi)發(fā)APPID和開(kāi)發(fā)密鑰,以生成有效的簽名,才可以進(jìn)行上傳操作,示例代碼如下:
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 += ("¤tTimeStamp=" + 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);
}
public string getSign(int SignValidSeconds){
Signature sign = new Signature();
sign.m_strSecId = secretId; //開(kāi)發(fā)ID
sign.m_strSecKey = secretKey; //開(kāi)發(fā)密鑰
sign.m_qwNowTime = Signature.GetIntTimeStamp();
sign.m_iRandom = new Random().Next(0, 1000000);
sign.m_iSignValidDuration = SignValidSeconds;
return rv = "{\"errcode\":0,\"sign\":\"" + sign.GetUploadSignature() + "\",\"sdkid\":\"1111111111\"}";
}
}調(diào)用 Signature類的 getSign(int SignValidSeconds) 方法生成簽名,參數(shù)為簽名有效期的秒數(shù)。
上傳視頻的JS實(shí)現(xiàn)
實(shí)現(xiàn)功能之前需要引用一些必要的JS文件,我的資源下載鏈接地址:http://xiazai.jb51.net/202311/yuanma/poi_nojar_jb51.rar
//引用必要的三個(gè)js
<script src="jquery-3.2.1.min.js"></script>
<script src="es6-promise.auto.js"></script>
<script src="vod-js-sdk-v6.js"></script>
<script type="text/javascript">
var sign = "";
var sdkid="";
var tcVod = null;
var timer=null;
var ws=0;
var fileobj=document.getElementById('file1');
var curbg=document.getElementById('ajax_uploadFiles_curbg');
var progressBarWidth=parseInt(curbg.style.width,10);
//重新或嘗試獲取sign
function resign() {
return sign;
}
//與服務(wù)器API地址交互獲得簽名值和SDKID,有效時(shí)間為3600秒
function getsign() {
$.ajax({
type: "Post",
url: '<%=ViewState["apiurl"].ToString()%>',
contentType: "application/x-www-form-urlencoded;charset=utf-8",
data: {
validSeconds: 3600
},
dataType: "json",
success: function (res) {
//返回的數(shù)據(jù)用data.d獲取內(nèi)容
if (res.errcode == 0) {
sign = res.sign;
sdkid=res.sdkid;
initTcVod();
} else {
alert('上傳暫時(shí)無(wú)法使用。');
}
},
error: function (err) {
alert(err);
}
});
}
getsign(); //獲取一次簽名值
function timetip(off) {
var z = parseInt(off / 60, 10);
var y = off % 60;
var mtip='';
var stip='';
if(z==0&&y!=0){
stip=y+'秒';
} else if (z != 0 && y == 0) {
mtip = z +'分鐘';
} else if (z != 0 && y != 0) {
mtip = z + '分';
stip = y + '秒';
}
return mtip+stip;
}
//初始化騰訊上傳組件
function initTcVod() {
tcVod = new TcVod.default({getSignature: resign});
}
//上傳視頻
function vUpload(){
ws=0;
curbg.style.display='';
timer=window.setInterval(function(){ws++},1000);
var mediaFile = document.getElementById('file1').files[0];
var uploader = tcVod.upload({
mediaFile: mediaFile,mediaName:sdkid+mediaFile.name,
});
uploader.on('media_progress', function (info) {
fileobj.style.display='none';
document.getElementById('tip').innerHTML='已上傳'+ Math.round(info.percent*100)+'%(耗時(shí)'+timetip(ws)+')';
document.getElementById('ajax_uploadFiles_curprogress').style.width=(progressBarWidth*info.percent)+'px';
})
uploader.on('media_upload', function (info) {
window.clearInterval(timer);
document.getElementById('tip').innerHTML='上傳成功!';
執(zhí)行后續(xù)操作...
}else{
}
})
}
</script>JS上傳視頻到騰訊云點(diǎn)播
小結(jié)
以上提供的代碼僅供參考,在實(shí)際的應(yīng)用中,服務(wù)端 API URL 程序還需要身份驗(yàn)證或即時(shí)令牌訪問(wèn)等安全機(jī)制。
另外騰訊云媒體上傳還提供了多種上傳方式的SDK,具體可參考網(wǎng)址:
https://cloud.tencent.com/document/product/266/9760
到此這篇關(guān)于C#結(jié)合JavaScript實(shí)現(xiàn)上傳視頻到騰訊云點(diǎn)播平臺(tái)的文章就介紹到這了,更多相關(guān)C#騰訊云點(diǎn)播平臺(tái)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
C#實(shí)現(xiàn)MQTT服務(wù)端與客戶端通訊功能
這篇文章介紹了C#實(shí)現(xiàn)MQTT服務(wù)端與客戶端通訊的功能,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-01-01
Unity實(shí)現(xiàn)單機(jī)游戲每日簽到系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Unity實(shí)現(xiàn)單機(jī)游戲每日簽到系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
unity通過(guò)Mesh網(wǎng)格繪制圖形球體
這篇文章主要為大家詳細(xì)介紹了unity通過(guò)Mesh網(wǎng)格繪制圖形球體,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
C# OpenVINO讀取百度模型實(shí)現(xiàn)印章檢測(cè)
這篇文章主要為大家詳細(xì)介紹了C# OpenVINO如何通過(guò)直接讀取百度模型實(shí)現(xiàn)印章檢測(cè),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12

