node抓取视频（puppeteer）
2020-01-17 本文已影响0人
YellowPoint
需求
通过抖音的一个主页链接，下载该用户的所有视频
思路
分析发现其视频地址均通过一个接口返回，便手动复制其数据，过滤出所需视频地址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数据,如获取到的接口数据和整理后的视频数据
}
参考资料
