C#結(jié)合JavaScript實(shí)現(xiàn)上傳視頻到騰訊云點(diǎn)播平臺(tái)的操作方法
需求
在云培訓(xùn)系統(tǒng)里,制作視頻課件是我們的主要工作之一,制作完成后如果將這些素材存儲(chǔ)到服務(wù)器并進(jìn)行分發(fā)播放,是擺在我們面前的一個(gè)問題。最終我們選擇了騰訊云點(diǎn)播服務(wù),其加速分發(fā)播放幾乎適用所有需要展示圖片或音視頻媒體內(nèi)容的在線場(chǎng)景,借助遍布全球的大量 CDN 加速節(jié)點(diǎn),在復(fù)雜的網(wǎng)絡(luò)環(huán)境也能提供高質(zhì)量的媒體內(nèi)容訪問服務(wù)。
上傳視頻功能,主要要解決兩個(gè)問題:
1、在服務(wù)端通過C#生成簽名和SDKID
2、在客戶端通過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ì)定位,并在上傳過程中計(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ù)端的簽名類
上傳之前需要提供您的開發(fā)APPID和開發(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; //開發(fā)ID sign.m_strSecKey = secretKey; //開發(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í)無法使用。'); } }, 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í)令牌訪問等安全機(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ù)端與客戶端通訊的功能,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-01-01Unity實(shí)現(xiàn)單機(jī)游戲每日簽到系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Unity實(shí)現(xiàn)單機(jī)游戲每日簽到系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04C# OpenVINO讀取百度模型實(shí)現(xiàn)印章檢測(cè)
這篇文章主要為大家詳細(xì)介紹了C# OpenVINO如何通過直接讀取百度模型實(shí)現(xiàn)印章檢測(cè),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12