最近專案在搞視訊播放,使用的是騰訊雲點播,這裡做一個使用總結~
背景
專案中涉及到上傳視訊,播放視訊,以及視訊安全等,雲點播這幾個功能都有,接入起來也是比較順滑~
上傳視訊
專案第一步,當然是要上傳視訊啦~
這裡使用的是js的sdk,詳情檢視 Web 端上傳 SDK
使用的方法比較簡單,下面是示例程式碼:
// 引入js sdk
<script src="//unpkg.com/vod-js-sdk-v6"></script>
// 獲取簽名,這裡的簽名需要在後端計算,因為涉及賬號安全資訊
function getSignature() {
return axios.post(url).then(function (response) {
return response.data.signature;
})
};
// 初始化
const tcVod = new TcVod.default({
getSignature: getSignature // 前文中所述的獲取上傳簽名的函式
})
// 上傳視訊
const uploader = tcVod.upload({
videoFile: videoFile, // 視訊,型別為 File
})
// 檢視上傳進度
uploader.on('video_progress', function(info) {
console.log(info.percent) // 進度
})
// 上傳完成回撥
uploader.done().then(function (doneResult) {
// deal with doneResult
})
複製程式碼
getSignature用於獲取上傳簽名,樓主的專案後臺使用的是node,所以提供一下node的版本。詳情可檢視 客戶端上傳簽名
const querystring = require('querystring');
const crypto = require('crypto');
router.get('/getSignature', function(req, res, next) {
// 確定 app 的雲 API 金鑰
let secret_id = SecretId;
let secret_key = SecretKey;
// 確定簽名的當前時間和失效時間
let current = parseInt((new Date()).getTime() / 1000, 10);
let expired = current + 86400; // 簽名有效期:1天
// 向引數列表填入引數,QCVB_DrmProcessFile為加密轉碼模板,
let arg_list = {
secretId: secret_id,
currentTimeStamp: current,
expireTime: expired,
random: Math.round(Math.random() * Math.pow(2, 32)),
// procedure為配置任務,視訊上傳完成後,點播後臺就會執行相應的操作
// 這裡設定了視訊轉碼 以及 加密操作
procedure: 'QCVB_SimpleProcessFile({20,30,40}, 0, 10, 10)'
};
// 計算簽名
let orignal = querystring.stringify(arg_list);
let orignal_buffer = new Buffer(orignal, 'utf8');
let hmac = crypto.createHmac('sha1', secret_key);
let hmac_buffer = hmac.update(orignal_buffer).digest();
let signature = Buffer.concat([hmac_buffer, orignal_buffer]).toString('base64');
let response = {
ret: 0,
data: {
signature: signature
}
};
return res.send(response);
});
複製程式碼
播放視訊
視訊上傳完成之後,我們就可以播放視訊了~
播放視訊我們使用的是 點播超級播放器 ,是點播專屬的播放器,直接配置fileID & fileId即可播放點播的視訊。
使用方式也是相當簡單
// 引入播放器
<link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/lib/hls.min.0.8.8.js"></script>
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>
// 播放器容器
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>
// 初始化播放器
var player = TCPlayer('player-container-id', {
fileID: fileID,
appID: appID
});
複製程式碼
視訊處理
在上傳簽名的時候,我們做了預設的處理,procedure引數
轉碼
使用者上傳的視訊格式千差萬別,對視訊進行轉碼,將視訊轉為統一的格式,這種在播放的時候就可以避免因視訊格式的問題導致不能播放。
加密轉碼
加密轉碼與轉碼的不同之處在於,視訊格式經過加密處理,播放過程需要進行解密才能播放,這裡可以很好的做到視訊安全~
不過,點播這裡提供的加密只針對hls封裝格式的視訊,所以轉碼的配置也要做hls轉碼,其他的就沒有效果哦。
masterplaylist
使用者網路有快有慢,hls的masterplaylist可以有效解決因網路帶來的播放問題。
hls新增了masterplaylist之後,在播放過程中,可以根據網路的快慢,自動切換視訊清晰度,帶來更好的使用者體驗。
視訊安全
referer防盜鏈
referer防盜鏈,根據網站referer進行限制,開啟白名單referer進行防盜處理。
key防盜鏈
key防盜鏈,通過在控制檯配置&開啟key防盜鏈,使用者播放視訊時需要傳key簽名進行校驗,校驗失敗則拒絕返回視訊,達到防盜效果。
key防盜鏈相對於referer防盜鏈更加安全,畢竟referer可以偽造。
下面提供的是node的實現:
const crypto = require('crypto');
router.get('/getKeySign', function(req, res, next) {
// 確定簽名的當前時間和失效時間
let current = parseInt((new Date()).getTime() / 1000, 10);
let expired = current + 86400; // 簽名有效期:1天
// 向引數列表填入引數
let arg_list = {
KEY: config.video.key,
appId: req.query.appId,
fileId: req.query.fileId,
t: expired.toString(16),
us: Math.round(Math.random() * Math.pow(2, 32)).toString()
};
// 計算簽名
let orignal = '';
for (let item in arg_list) {
orignal += arg_list[item];
}
let md5 = crypto.createHash('md5');
let md5_buffer = md5.update(orignal).digest('hex');
let signature = md5_buffer.toString('base64');
let response = {
ret: 0,
data: {
t: arg_list.t,
us: arg_list.us,
sign: signature
}
};
return res.send(response);
});
複製程式碼
hls視訊加密
hls視訊加密,視訊加密針對的防盜使用者其實是有許可權檢視視訊的客戶,如果沒有對視訊內容進行加密,使用者只要獲取到我們的視訊,其實就可以將視訊下載到本地進行播放,而hls視訊加密,就是針對這種場景。就算使用者拿到了視訊資料,也不能輕易破解播放,那麼,加密的目的就達到了~
這塊相對來說比較複雜,詳細可檢視 視訊加密
我們先來看幾個標識
- 金鑰管理服務(Key Management Service,簡稱KMS)這塊點播服務提供了EMS服務
- 資料金鑰(Data Key,簡稱DK)
- 加密後的資料金鑰(Encrypted Data Key,簡稱EDK)
那麼,我們要做的處理其實是比較簡單的
- 後臺向點播後臺請求獲取EDK與DK的對應關係,並且儲存起來
- 搭建鑑權與祕鑰派發服務,這裡我們需要提供一個介面,將EDK轉化為DK,當然,這裡的介面還可以做鑑權處理,可以更加安全。
- 上傳視訊時,將2中提供的介面配置在點播後臺作為一個加密模板
- 加密視訊時,2中提供的介面會打包到視訊資料中
- 播放視訊時,視訊會先請求打包到視訊中的獲取祕鑰介面(即2中提供的介面)
- 介面返回正確的DK時,視訊才能正常播放
整體上傳、加密轉碼、播放加密視訊的流程如下:
寫在最後
前段時間做了比較多的視訊處理,所以總結了一下,加深自己的理解,同時也希望對用到的人有所幫助~