node抓取视频（puppeteer）

需求

通过抖音的一个主页链接，下载该用户的所有视频

思路

分析发现其视频地址均通过一个接口返回，便手动复制其数据，过滤出所需视频地址A

坑①：

地址A要在浏览器的手机模式下才跳转到真实的视频地址B

查资料发现神器 Puppeteer 中文文档

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。
你可以在浏览器中手动执行的绝大多数操作都可以使用 Puppeteer 来完成！ 下面是一些示例：

• 生成页面 PDF。
• 抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））。
• 自动提交表单，进行 UI 测试，键盘输入等。
• 创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
• 捕获网站的 timeline trace，用来帮助分析性能问题。
  测试浏览器扩展。

解决方案为：模拟iphone6打开页面,再通过document.querySelector('source').src获取实际播放地址

getUrl.js
// 获取视频实际下载链接
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

const getUrl = async (item) => {
  const browser = await puppeteer.launch(); //启动浏览器实例
  const page = await browser.newPage(); //创建一个新页面
  await page.emulate(iPhone); //模拟iphone6打开页面
  await page.goto(item.url); //进入指定网页
  const result = await page.evaluate((item) => {
    let url = document.querySelector('source').src;
    return {
      title: item.title,
      url
    }
  }, item);
  await browser.close();
  return result;
}

module.exports = getUrl

---

下载视频
这里直接参考Node批量爬取头条视频并保存方法写法

download.js
// 下载视频
const fs = require('fs');
const http = require('http');
const config = require('./config');

function getVideoData(url, encoding) {
  return new Promise((resolve, reject) => {
    let req = http.get(url, function (res) {
      let result = ''
      encoding && res.setEncoding(encoding)
      res.on('data', function (d) {
        result += d
      })
      res.on('end', function () {
        resolve(result)
      })
      res.on('error', function (e) {
        reject(e)
      })
    })
    req.end()
  })
}

function savefileToPath(fileName, fileData) {
  let fileFullName = `${config.savePath}/${fileName}.mp4`
  return new Promise((resolve, reject) => {
    fs.writeFile(fileFullName, fileData, 'binary', function (err) {
      if (err) {
        console.log('savefileToPath error:', err)
      }
      resolve('已下载')
    })
  })
}

async function downloadVideo(video) {
  // 判断视频文件是否已经下载
  if (!fs.existsSync(`${config.savePath}/${video.title}.mp4`)) {
    await getVideoData(video.url, 'binary').then(fileData => {
      console.log('下载视频中：', video.title)
      savefileToPath(video.title, fileData).then(res =>
        console.log(`${res}: ${video.title}`)
      )
    })
  } else {
    console.log(`视频文件已存在：${video.title}`)
  }
}

module.exports = downloadVideo

---

上面能实现后，再研究如何获取所有视频链接
方案：还是通过puppeteer来获取到请求完成的事件，获取到请求体
注意点：为保证能获取到所有视频，需要模拟页面滚动到最底部，已经没有更多视频了，再去抓数据
实现：
判断页面是否滚动到最底部

let isScrollEnd = false
let scroll_timer = null
$(window).scroll(function () {
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  // 防止滚动过快，接口较慢，500ms后再去判断
  clearTimeout(scroll_timer)
  scroll_timer = setTimeout(() => {
    if (scrollTop + windowHeight >= scrollHeight) {
      isScrollEnd = true
      console.log("that.isScrollEnd", isScrollEnd)
    }
  }, 500)

});

操作浏览器滚动，当滚动到底部时停止

let y = 0;
// 防止无限滚动的页面，window.scrollY 做个限制
while (!isScrollEnd && y < 50000) {
  y += 100
  await sleep(20);
  window.scrollTo(0, y)
}

坑-evaluate的作用域

await page.evaluate(async (aa) => { 
    这里是node自己打开的浏览器作用域，无法直接取到外部的变量，需要通过参数传入，如aa
    且无法传入this这类无法序列化的参数
},aa);

---

优化部分

通过config.js来配置各种参数

module.exports = {
  isShowChrome: false, //是否显示chrome浏览器
  ajaxKey: 'v2/aweme/post',//接口的关键字，防止对所有接口都获取数据
  ajaxPath: 'video.play_addr.url_list[0]',//视频在接口里的路径
  inputUrl: 'https://v.douyin.com/qKDN9n/',//输入的链接，后期由页面传入吧
  savePath: './output',//保存路径
  isDownload: true,//是否下载视频
  isSaveJsonData: false, //是否保存json数据,如获取到的接口数据和整理后的视频数据

}

---

完整代码地址

参考资料

• [译] JavaScript 自动化爬虫入门指北（Chrome + Puppeteer + Node JS）
• puppeteer进阶版_爬取小说站
• puppeteer初体验