Polyv视频下载 · 初探

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

        通过开发者工具查看网站，不难发现，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.5Mbps
    const 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) => {
        // 每次开始录制时，清空chunks
        videoChunks = [];
    };
    // 结束
    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 = from
    document.body.appendChild(ele)
    ele.click()
    document.body.removeChild(ele)
}
// 下载音频文件
function downloadAudio () {
  if ((window.myAudioData || []).length === 0) return
  let _myAudioData = mergeArrayBuffer(window.myAudioData)
  let blob = new Blob([_myAudioData], {type: 'application/octet-stream'})
  window.URL = window.URL || window.webkitURL
  let 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 = 0
  for (let i = 0; i < arrays.length; i++) {
      arrays[i] = new Uint8Array(arrays[i]) //全部转成Uint8Array
      totalLen += arrays[i].length
  }
  let res = new Uint8Array(totalLen)
  let offset = 0
  for(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）。于是，在该地方添加一段代码，将接收到的音频数据全都保存到一个全局变量中，等视频播放完成后将这些数据保存到本地。

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