聲明：文章內(nèi)容僅供學(xué)習(xí)交流。

????????通過開發(fā)者工具查看網(wǎng)站，不難發(fā)現(xiàn)，Polyv視頻是使用canvas標(biāo)簽來渲染視頻畫面的，音頻是通過AudioContext進(jìn)行播放的。

????????此外，網(wǎng)站的視頻是加密的，如果想要下載視頻，比較好的辦法是找出視頻數(shù)據(jù)的解密算法，然后去解密恢復(fù)出視頻數(shù)據(jù)。但這個(gè)思路比較費(fèi)時(shí)費(fèi)力，一時(shí)半會(huì)很難有進(jìn)展。所以這篇文章里，我們先來嘗試一個(gè)實(shí)踐比較簡單的思路。因?yàn)橐曨l和音頻是分開的，所以我們依次來分析。

????? 視頻

????????因?yàn)橐曨l是使用的是canvas標(biāo)簽，而canvas繪制畫面的常見方法包括：drawImage（2d）、putImageData（2d）、drawArrays（webgl）。

????????1）首先全局搜索這幾個(gè)方法（總共只搜到4個(gè)），均打上斷點(diǎn)；

????????2）在網(wǎng)頁中播放視頻，看哪個(gè)斷點(diǎn)會(huì)隨著視頻的播放不斷被觸發(fā)；

????????通過調(diào)試發(fā)現(xiàn)，頻繁觸發(fā)的是drawArrays方法，在代碼的其它地方也可以發(fā)現(xiàn)webgl的字樣。視頻渲染之所以使用webgl，應(yīng)該是因?yàn)樗男阅芤?d快好幾倍。

????????3）將canvas繪制畫面時(shí)使用的圖片數(shù)據(jù)下載到本地；

????????在上一步中，既然已經(jīng)開始使用drawArrays渲染畫面了，那么此時(shí)的數(shù)據(jù)必然已經(jīng)是解密后的數(shù)據(jù)，所以我們在該方法的地方插入代碼，將圖片數(shù)據(jù)直接下載到本地；

????????因?yàn)樾略龅拇a是同步操作，所以，在邊播放邊保存的過程中，會(huì)導(dǎo)致視頻播放不流暢，體驗(yàn)不好；

????????觀察下載后的圖片，每張圖片大概有1M多。

????????4）使用MediaRecorder來下載視頻數(shù)據(jù)

????????因?yàn)樯弦徊街械南螺d方式體驗(yàn)較差，所以我嘗試使用MediaRecorder來替代。在文檔中可以看到，MediaRecorder支持傳入來自canvas的數(shù)據(jù)流。

????????我們通過創(chuàng)建MediaRecorder對象，并將頁面中的canvas元素作為數(shù)據(jù)源，對視頻進(jìn)行錄制。相關(guān)代碼如下：

????????實(shí)際操作的時(shí)候，需要在適當(dāng)?shù)臅r(shí)候使用以下代碼進(jìn)行控制操作。

音頻

????????因?yàn)橐纛l使用的是 AudioContext，下載起來不太方便。后來，經(jīng)過一番調(diào)試，發(fā)現(xiàn)在 audioDecoder.feed 處可以得到解密后的音頻數(shù)據(jù)（數(shù)據(jù)類型為arraybuffer）。于是，在該地方添加一段代碼，將接收到的音頻數(shù)據(jù)全都保存到一個(gè)全局變量中，等視頻播放完成后將這些數(shù)據(jù)保存到本地。

????????以上方法，實(shí)操起來比較笨拙，后續(xù)會(huì)實(shí)踐其它思路。