编写直播视频下载工具

yixinis

某种程度上说，这个工具写得并不成功，适用性较差，不过过程中遇到的许多问题还是比较有探讨价值的，所以分享出来以供参考和交流。
   【需求说明】
    关于直播视频的下载，网上可以搜到一些，比如用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] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[backcolor=rgb(27, 36, 38) !important][color=rgb(255, 255, 255) !important]

[color=#ffffff !important]?

1 2 3 4 5

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-src	Worker  SharedWorker ServiceWorker
script-src	<script>
…	…

    这个标识和之前的标识类似，修改思路：当网络请求响应头返回时对其中的该标识的值进行修改，修改后再嵌套就可规避该错误。相关代码如下
[JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[backcolor=rgb(27, 36, 38) !important][color=rgb(255, 255, 255) !important]

[color=#ffffff !important][url=https://www.52pojie.cn/#]?

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

    【踩坑03】
    有的网站只允许在微信环境中进行访问，这个分情况，如果只是微信的user-agent校验可以通过修改请求头&本地标识来解决；如果是页面代码逻辑控制的，便没太好的办法（修改原始js数据会破坏业务逻辑，也超出了本程序傻瓜化的初衷）。
    修改请求头的user-agent代码：
[JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[backcolor=rgb(27, 36, 38) !important][color=rgb(255, 255, 255) !important]

[color=#ffffff !important]?

1 2 3 4

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

    修改程序的navigator.userAgent代码：
[JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[backcolor=rgb(27, 36, 38) !important][color=rgb(255, 255, 255) !important]

[color=#ffffff !important]?

1 2 3

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

   【踩坑04】
    通过Electron拦截网络请求时，在数据返回的各个阶段都无法拿到响应数据的responseBody，更尴尬的是，其它的数据都有，唯独没有body体。网上搜了很久，资料很少，没有找到有效的办法。
    所以，退而求其次，当接口响应数据返回以后，用fetch再请求一次资源（还好有浏览器缓存，所以基本上也还凑合）。相关代码：
[JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[backcolor=rgb(27, 36, 38) !important][color=rgb(255, 255, 255) !important]

[color=#ffffff !important]?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16

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/

yixinis

1. <div id="player_52d8c5dc72503923"></div>
   
2. <script type="text/javascript" src="https://player.dogecloud.com/js/loader"></script>
   
3. <script type="text/javascript">
   
4. var player = new DogePlayer({
   
5.     container: document.getElementById('player_52d8c5dc72503923'),
   
6.     userId: 6650,
   
7.     vcode: '52d8c5dc72503923',
   
8.     autoPlay: true
   
9. });
   
10. </script>

复制代码