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

        通过开发者工具查看网站，不难发现，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元素作为数据源，对视频进行录制。相关代码如下：

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

音频

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

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