声明：文章内容仅供学习交流。

通过开发者工具查看网站，不难发现，Polyv视频是使用canvas标签来渲染视频画面的，音频是通过AudioContext进行播放的。

此外，网站的视频是加密的，如果想要下载视频，比较好的办法是找出视频数据的解密算法，然后去解密恢复出视频数据。但这个思路比较费时费力，一时半会很难有进展。所以这篇文章里，我们先来尝试一个实践比较简单的思路。因为视频和音频是分开的，所以我们依次来分析。

视频

因为视频是使用的是canvas标签，而canvas绘制画面的常见方法包括：drawImage（2d）、putImageData（2d）、drawArrays（webgl）。

1）首先全局搜索这几个方法（总共只搜到4个），均打上断点；

2）在网页中播放视频，看哪个断点会随着视频的播放不断被触发；

通过调试发现，频繁触发的是drawArrays方法，在代码的其它地方也可以发现webgl的字样。视频渲染之所以使用webgl，应该是因为它的性能要比2d快好几倍。

3）将canvas绘制画面时使用的图片数据下载到本地；

在上一步中，既然已经开始使用drawArrays渲染画面了，那么此时的数据必然已经是解密后的数据，所以我们在该方法的地方插入代码，将图片数据直接下载到本地；

因为新增的代码是同步操作，所以，在边播放边保存的过程中，会导致视频播放不流畅，体验不好；

观察下载后的图片，每张图片大概有1M多。

4）使用MediaRecorder来下载视频数据

因为上一步中的下载方式体验较差，所以我尝试使用MediaRecorder来替代。在文档中可以看到，MediaRecorder支持传入来自canvas的数据流。

我们通过创建MediaRecorder对象，并将页面中的canvas元素作为数据源，对视频进行录制。相关代码如下：

let videoRecorder = null;
let mediaStream = null;
let videoChunks = [];
let isRecordVideo = false;
let canvasObj = null;
// 初始化MediaRecorder & 绑定MediaRecorder事件
function initVideoRecorder() {if (!mediaStream) return// 音频比特率128kbps,视频比特率2.5Mbpsconst options = {audioBitsPerSecond : 128000,videoBitsPerSecond : 500000,mimeType : 'video/webm;codecs=h264'};videoRecorder = new MediaRecorder(mediaStream, options);// 结束后获取数据videoRecorder.ondataavailable = (e) => {// 记录视频片段if (e.data && e.data.size) {// this.videoChunks.push(e.data)// 分片段输出（适用于录制时间较长文件较大的情况）this.videoChunks2DataUrl([e.data]).then((data) => {console.log('fileReader onloadend:', data)// 保存视频downloadFileByA(data.target.result)})}}// 开始videoRecorder.onstart = (e) => {// 每次开始录制时，清空chunksvideoChunks = [];};// 结束videoRecorder.onstop = (e) => {// 录制结束后，处理chunks，生成文件let blob = new Blob(videoChunks, {type: 'video/webm'});let fileReader = new FileReader();fileReader.readAsDataURL(blob);fileReader.onloadend = (data) => {// 保存视频downloadFileByA(data.target.result)};};// 暂停videoRecorder.onpause = (e) => {};// 恢复videoRecorder.onresume = (e) => {};// 监听错误videoRecorder.onerror = (err) => {console.log(err); isRecordVideo = false;};
}
// video数据转dataurl
function videoChunks2DataUrl (videoChunks) {return new Promise((resolve, reject) => {let blob = new Blob(videoChunks, {type: 'video/webm'})let fileReader = new FileReader()fileReader.readAsDataURL(blob)fileReader.onloadend = (data) => { resolve(data) }fileReader.onerror = (err) => { reject(err) }})
}
// 开始录像
function startRecordVideo() {if (isRecordVideo) return;videoRecorder.start(600000);isRecordVideo = true;
}
// 停止录像
function stopRecordVideo() {if (!isRecordVideo) return;videoRecorder.stop();isRecordVideo = false;
}
// 下载文件
function downloadFileByA (from) {let ele = document.createElement('a')ele.download = '1.webm'ele.style.display = 'none'ele.href = fromdocument.body.appendChild(ele)ele.click()document.body.removeChild(ele)
}
// 下载音频文件
function downloadAudio () {if ((window.myAudioData || []).length === 0) returnlet _myAudioData = mergeArrayBuffer(window.myAudioData)let blob = new Blob([_myAudioData], {type: 'application/octet-stream'})window.URL = window.URL || window.webkitURLlet ele = document.createElement('a')ele.href = window.URL.createObjectURL(blob)ele.download = 'myAudio.mp3'ele.click()window.URL.revokeObjectURL(ele.href)
}
// 合并多个ArrayBuffer 或 TypeArray
function mergeArrayBuffer(arrays) {let totalLen = 0for (let i = 0; i < arrays.length; i++) {arrays[i] = new Uint8Array(arrays[i]) //全部转成Uint8ArraytotalLen += arrays[i].length}let res = new Uint8Array(totalLen)let offset = 0for(let arr of arrays) {res.set(arr, offset)offset += arr.length}return res.buffer
}

实际操作的时候，需要在适当的时候使用以下代码进行控制操作。

// 下载步骤：
// 1、获取canvas数据流
canvasObj = document.querySelector('.plv__screen--canvas');
mediaStream = canvasObj ? canvasObj.captureStream() : null;// 2、初始化MediaRecorder
initVideoRecorder();// 3、开始录像
startRecordVideo();// 4、停止录像
stopRecordVideo();

音频

因为音频使用的是 AudioContext，下载起来不太方便。后来，经过一番调试，发现在 audioDecoder.feed 处可以得到解密后的音频数据（数据类型为arraybuffer）。于是，在该地方添加一段代码，将接收到的音频数据全都保存到一个全局变量中，等视频播放完成后将这些数据保存到本地。

以上方法，实操起来比较笨拙，后续会实践其它思路。

Polyv视频下载 · 初探相关推荐

播放量突破 10 亿，Qzone 视频下载如何做到多快好省？
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:芦艺,QQ空间开发团队一员 Qzone的日均视频播放量已经突破了10亿,其中Android端的播放量在总播放量中的占比超过70%,相比年 ...
极客学院职业路径图课程视频下载-爬虫
一.序言最近看了极客学院的视频教程,相当不错,渴望把视频下载到本地.手动下载耗时耗力,因而决定研究一番,写一程序自动下载,终于小有成果!有图为证: 二.技术难点既然要实现自动下载,免不了要爬取极客 ...
×××视频下载：皮皮影视客户端功能使用
说明: 免费在线视频播放软件很多,如PPStream 和皮皮影视播放器,就用户体验综合来说PP影视要比PPStream优秀,经过一段时间试用比较发现: l 在相同网络状况下PPStream的缓冲时间要 ...
NDC 2010视频下载：看看其他微软平台程序员们都在做什么
原文地址:<NDC 2010视频下载:看看其他微软平台程序员们都在做什么> NDC(Norwegian Developers Conference,挪威开发者大会)是一年一度的挪威最大的微 ...
史上最强音视频下载神器youtube-dl回归，GitHub75k星
蕾师师发自凹非寺量子位报道 | 公众号 QbitAI 一个「身价」7.5万颗星的GitHub项目,从受热捧,到被起诉下架,再到引发社区热议. 故事本已一波三折. 但最近,关于这个项目的最新「剧 ...
运动目标检测、阴影检测及目标跟踪中用得到的标准测试视频下载
运动目标检测.阴影检测及目标跟踪中用得到的标准测试视频下载转载 2016年03月16日 09:53:28 标签: 目标跟踪 / 755
python视频下载-python动态视频下载器的实现方法
这里向大家分享一下python爬虫的一些应用,主要是用爬虫配合简单的GUI界面实现视频,音乐和小说的下载器.今天就先介绍如何实现一个动态视频下载器. 爬取电影天堂视频首先介绍的是python爬取电影 ...
python官网下载步骤视频-Python 实现视频下载
最近一两年短视频业务风生水起,各个视频网站都有各自特色的短视频内容.如果有这样一个程序,可以把各大视频网站的热门用户最新发布的视频都下载下来,不仅方便自己观看,还可以将没有版权的视频发布在个人社交网站 ...
python视频下载-Python实现视频下载功能
最近一两年短视频业务风生水起,各个视频网站都有各自特色的短视频内容.如果有这样一个程序,可以把各大视频网站的热门用户最新发布的视频都下载下来,不仅方便自己观看,还可以将没有版权的视频发布在个人社交网站 ...

Polyv视频下载 · 初探

视频

音频

Polyv视频下载 · 初探相关推荐

最新文章

热门文章