编写直播视频下载工具

xue5hen

    某种程度上说，这个工具写得并不成功，适用性较差，不过过程中遇到的许多问题还是比较有探讨价值的，所以分享出来以供参考和交流。
   【需求说明】
    关于直播视频的下载，网上可以搜到一些，比如用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展示

    根据这个标识的特点，修改思路便有了：当网络请求响应头返回时对其中的该标识的值进行修改，修改后再嵌套就可规避该错误。相关代码如下

[JavaScript] 纯文本查看 复制代码

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 [url=http://www.ixigua.com]www.ixigua.com activity.douyin.comcreator.douyin.com".”  

    这是因为响应头中设置了内容安全策略，该标识限制了iframe嵌套需要遵循的规则。
    Content-Security-Policy字段有若干指令，可以设置指定的策略允许的源。其值的格式为： [指令] <source> ...; [指令] <source>...;...

指令	限制范围
frame-ancestors	<frame>,<iframe>,<object>,<embed>或<applet>
worker-src	Worker  SharedWorker ServiceWorker
script-src	<script>
…	…

    这个标识和之前的标识类似，修改思路：当网络请求响应头返回时对其中的该标识的值进行修改，修改后再嵌套就可规避该错误。相关代码如下

[JavaScript] 纯文本查看 复制代码

details.responseHeaders['content-security-policy'] = ''

    【踩坑03】
    有的网站只允许在微信环境中进行访问，这个分情况，如果只是微信的user-agent校验可以通过修改请求头&本地标识来解决；如果是页面代码逻辑控制的，便没太好的办法（修改原始js数据会破坏业务逻辑，也超出了本程序傻瓜化的初衷）。
    修改请求头的user-agent代码：

[JavaScript] 纯文本查看 复制代码

session.defaultSession.webRequest.onBeforeSendHeaders(filters, (details, callback) => {
    details.requestHeaders['User-Agent'] = [微信user-agent]
    callback({cancel: false, requestHeaders: details.requestHeaders})
})

    修改程序的navigator.userAgent代码：

[JavaScript] 纯文本查看 复制代码

mainWindow.loadURL('app://./index.html', {
    userAgent: [微信user-agent]
})

   【踩坑04】
    通过Electron拦截网络请求时，在数据返回的各个阶段都无法拿到响应数据的responseBody，更尴尬的是，其它的数据都有，唯独没有body体。网上搜了很久，资料很少，没有找到有效的办法。
    所以，退而求其次，当接口响应数据返回以后，用fetch再请求一次资源（还好有浏览器缓存，所以基本上也还凑合）。相关代码：

[JavaScript] 纯文本查看 复制代码

this.tsIndex = 0
let filters = {urls: ['*://*/*']}
session.defaultSession.webRequest.onCompleted(filters, (details) => {
    let baseUrl = details.url.split('?')[0]
    if (/\.ts$/.test(baseUrl) && !this.downloadDict[baseUrl]) {
        let index = this.tsIndex
        this.tsIndex++
        this.downloadDict[baseUrl] = 1
        console.log(index, details.url)
        fetch(details.url, {method: 'get', responseType: 'arraybuffer'}).then(res => {
            return res.arrayBuffer()
        }).then((ab) => {
            this.dataList[index] = ab
        })
    }
})

   【功能测试】
    测试平台：某果TV、某度直播、某音直播
    测试结果：某果TV可以正常抓取；某度直播抓取到的视频数据不能播放；某音直播抓取不到数据。

   【视频展示】https://www.bilibili.com/video/BV1sG411u7jr/

liufulong1313

spxzq很好用但是关掉了，你去改一下试试

Lwenru7

xue5hen 发表于 2022-12-3 19:15
输入网址即可。
直播应该也没有直播源，你随时进去它随时在播，只有ts数据碎片

就是正在直播的时候不就有直播源链接吗，我之前看直播都是抓取直播源链接然后用potplay播放不过我很垃圾复杂点的就不会抓了，dy直播我记得还是很简单的

happy_365day

感谢楼主分享，小白收藏学习！

tk345497747

多谢分享!!!!!!!!

jwzb

楼主，软件下载地址怎么没有

by1101

下载地址在哪？

nitian0963

多谢分享!!!!!!!!

fandazong

技术大牛才是真爱

HLY-

钉钉直播可以吗

zjk414

多谢分享!!!!!!!!

lvcha128

下载地址在哪