编写直播视频下载工具
本帖最后由 xue5hen 于 2022-12-2 19:02 编辑某种程度上说，这个工具写得并不成功，适用性较差，不过过程中遇到的许多问题还是比较有探讨价值的，所以分享出来以供参考和交流。
【需求说明】
关于直播视频的下载，网上可以搜到一些，比如用Fiddler脚本抓包ts保存到本地再合并，但这些方式对小白而言太难了，所以就想着写个傻瓜化的工具。程序的界面设计如下。
界面比较简单，左侧可以设置“直播地址、下载目录、保存频率”以及“请求头user-agent”；右侧是直播视频展示区（iframe标签）。
【踩坑01】
此处以某度为例，当试图在iframe中打开某度页面时，报了个错：“Refused to display in a frame because it set 'X-Frame-Options'to 'sameorigin'.”
X-Frame-Options响应头是用来给浏览器指示允许一个页面可否在<frame>、<iframe>、<embed>或者 <object> 中展现的标记。
可选值作用
DENY该页面不允许在frame中展示
SAMEORIGIN该页面可以在相同域名页面的frame中展示
ALLOW-FROM该页面可以在指定来源的frame中展示
ALLOWALL该页面允许全部来源域名的frame展示
根据这个标识的特点，修改思路便有了：当网络请求响应头返回时对其中的该标识的值进行修改，修改后再嵌套就可规避该错误。相关代码如下
let filters = {urls: ['*://*/*']}
session.defaultSession.webRequest.onHeadersReceived(filters, (details, callback) => {
details.responseHeaders['X-Frame-Options'] = 'AllowAll'
callback({cancel: false, responseHeaders: details.responseHeaders})
})
【踩坑02】
此处以某音直播为例，当使用iframe打开时，报了错“Refused to frame 'https://live.douyin.com/' because an ancestorviolates the following Content Security Policy directive: "frame-ancestorslive.ixigua.com live.ixigua.com www.ixigua.com activity.douyin.comcreator.douyin.com".”
这是因为响应头中设置了内容安全策略，该标识限制了iframe嵌套需要遵循的规则。
Content-Security-Policy字段有若干指令，可以设置指定的策略允许的源。其值的格式为： [指令] <source> ...; [指令] <source>...;...
指令限制范围
frame-ancestors<frame>,<iframe>,<object>,<embed>或<applet>
worker-srcWorkerSharedWorker ServiceWorker
script-src<script>
……
这个标识和之前的标识类似，修改思路：当网络请求响应头返回时对其中的该标识的值进行修改，修改后再嵌套就可规避该错误。相关代码如下
details.responseHeaders['content-security-policy'] = ''
【踩坑03】
有的网站只允许在微信环境中进行访问，这个分情况，如果只是微信的user-agent校验可以通过修改请求头&本地标识来解决；如果是页面代码逻辑控制的，便没太好的办法（修改原始js数据会破坏业务逻辑，也超出了本程序傻瓜化的初衷）。
修改请求头的user-agent代码：
session.defaultSession.webRequest.onBeforeSendHeaders(filters, (details, callback) => {
details.requestHeaders['User-Agent'] = [微信user-agent]
callback({cancel: false, requestHeaders: details.requestHeaders})
})
修改程序的navigator.userAgent代码：
mainWindow.loadURL('app://./index.html', {
userAgent: [微信user-agent]
})
【踩坑04】
通过Electron拦截网络请求时，在数据返回的各个阶段都无法拿到响应数据的responseBody，更尴尬的是，其它的数据都有，唯独没有body体。网上搜了很久，资料很少，没有找到有效的办法。
所以，退而求其次，当接口响应数据返回以后，用fetch再请求一次资源（还好有浏览器缓存，所以基本上也还凑合）。相关代码：
this.tsIndex = 0
let filters = {urls: ['*://*/*']}
session.defaultSession.webRequest.onCompleted(filters, (details) => {
let baseUrl = details.url.split('?')
if (/\.ts$/.test(baseUrl) && !this.downloadDict) {
let index = this.tsIndex
this.tsIndex++
this.downloadDict = 1
console.log(index, details.url)
fetch(details.url, {method: 'get', responseType: 'arraybuffer'}).then(res => {
return res.arrayBuffer()
}).then((ab) => {
this.dataList = ab
})
}
})
【功能测试】
测试平台：某果TV、某度直播、某音直播
测试结果：某果TV可以正常抓取；某度直播抓取到的视频数据不能播放；某音直播抓取不到数据。
【视频展示】https://www.bilibili.com/video/BV1sG411u7jr/
spxzq很好用但是关掉了，你去改一下试试 xue5hen 发表于 2022-12-3 19:15
输入网址即可。
直播应该也没有直播源，你随时进去它随时在播，只有ts数据碎片
就是正在直播的时候不就有直播源链接吗，我之前看直播都是抓取直播源链接然后用potplay播放不过我很垃圾复杂点的就不会抓了，dy直播我记得还是很简单的 感谢楼主分享，小白收藏学习！{:1_921:} 多谢分享!!!!!!!! 楼主，软件下载地址怎么没有 下载地址在哪？
多谢分享!!!!!!!! 技术大牛才是真爱 钉钉直播可以吗
多谢分享!!!!!!!!
下载地址在哪