共计 4097 个字符,预计需要花费 11 分钟才能阅读完成。
背景
- 之前笔者实现了 m3u8 视频在线提取工具,可对 m3u8 视频进行提取,合并,下载。实现整个视频下载流程。
- 后续还实现了非定制性的 ASE 解密性能(不提供定制性服务,定制性解密,属于破解,侵权行为,需尊重知识产权)
- 但上述工具仍存在肯定的通用性问题。为彻底解决通用性,实现无差别视频提取,开发了这个工具。
特点
- 长处,通用性强,无差别提取,只有应用到 MES 支流媒体播放技术的视频,均可捕捉。
- 长处,足够简略,在视频播放的最初一个步骤进行拦挡,躲避视频加载,加密,解密等简单过程。
- 毛病,被动,无奈被动干涉视频加载,只可被动捕捉视频资源。
- 毛病,有肯定门槛,依赖 chrome 浏览器开发者模式,无奈实现全自动化,有肯定应用门槛。
应用示例链接
性能阐明
-
【已捕捉 0 个片段】
- 显示程序已捕捉的视频片段数。
-
【下载已捕捉片段】
- 能够强制下载曾经捕捉的片段,无需期待整个视频全副捕捉实现。
-
【十倍速捕捉】
- 因为视频捕捉是依赖视频加载进度的。
- 点击该按钮,能够十倍速播放,减速视频加载,减速视频捕捉。
-
当视频全副加载实现,将触发主动下载。
- 若无触发,可手动点击「下载已捕捉片段」按钮,对捕捉到的视频进行下载。
应用形式
示例试验链接
-
复制工具代码
- 能够间接复制本文中的外围源码
- 也能够点开示例试验链接,点击按钮,疾速复制工具代码。
- 关上目前页面的控制台
- ctrl + f,输出 <iframe,判断是否存在 iframe 内嵌页面。若存在 iframe,请看完本阐明,再持续查看下一节「iframe 解决方案」。若无,则下一步
- 关上代码调试面板
-
在调试面板中,找到以后页面的代码
- 留神文件的寻找办法,需依据 URL 中的门路层级寻找。
- 点击下方按钮,对代码进行排版。
-
搜寻,找到第一个 <script 标签,并设置多个断点
- 搜寻,如果第一个 <script 标签是一个链接。
- 则找到对应文件,设置断点。
- 搜寻,如果第一个 <script 标签是一个链接。
-
刷新页面,呈现如下状态,则证实断点设置胜利
- 若页面白屏,为失常景象,依照步骤继续执行即可。
- 在 console 栏,粘贴工具代码,回车
- 回到 source 栏,点击按钮,复原运行
- 若页面呈现这几个按钮,则证实注入胜利,工具运行胜利
-
失常观看视频,期待视频捕捉
- 可点击「十倍速捕捉」,接口视频播放速度,放慢视频捕捉速度。
- 若页面呈现如下弹窗,即捕捉实现,视频主动下载(也能够点击「下载已捕捉片段」,手动下载)
-
视频下载实现,失去「音频」文件,「视频」文件
- 可应用专属播放器,进行播放。
- 也能够应用其余工具,进行合并。
iframe 解决方案
示例试验链接
-
找到 iframe 标签,复制 src 中的 url,新建页面关上该 url。
- 如果该新建页面能失常播放视频,则在该新建页面,应用上述「应用阐明」即可。
- 如果该新建页面能失常播放视频,则在该新建页面,应用上述「应用阐明」即可。
- 如果新建页面没有失常播放页面,则回到原页面,换一种形式实现。
-
回到原页面,找到 iframe 内嵌页面的源码。
- 同样搜寻 <script,但这一次,要找带 src 的 script 标签
- 同样搜寻 <script,但这一次,要找带 src 的 script 标签
- 找到该 src 对应的文件,并打断点
-
刷新页面,并在源文件中,插入代码
- 留神,打断点和插入代码是在不同的栏,打断点的栏中,有「:format」标识。插入代码的栏,没有该标识。
- 粘贴代码,ctrl + s 进行保留
- 复原执行(操作形式,查看上一节「应用阐明」)
- 实现代码插入,捕捉视频
特地阐明
- 在代码操作过程中,页面白屏是失常的,依照步骤继续执行即可。
- 如果不行,装置应用阐明,多试几遍就能够了。可能是视频广告导致。
- 留神 Chrome 的多文件下载询问,如果回绝过,须要从新关上。
- 视频捕捉,分为「视频」文件与「音频」文件,「视频」文件是纯视频,没声音的。须要搭配「音频」文件播放。点击这里,应用专属播放器。
专属播放器
- 因为采集工具是独自对「视频」和「音频」离开采集的。
- 应用一般播放器可能无奈失常播放。
- 可利用本工具同时加载「视频」和「音频」同步播放。
- 本工具还附有倍速播放性能。
原理
- 支流视频媒体播放技术,均应用到 MES 技术
-
MES 技术播放流程个别如下:
- 创立 video 播放器标签。
- 拉取视频片段。
- 解密视频片段(如果对视频进行了加密操作)
- 解析视频片段,分为「视频轨」「音频轨」。
- 将每个片段的「视频轨」「音频轨」,” 喂给 ” video 标签进行播放。
- 当已加载的视频片段快要播完时,反复第二个步骤,拉取新的视频片段,进行投喂。
-
本工具的外围逻辑
- 覆写视频片段的 ” 投喂 ” 操作。
- 插入自定义代码,收集 ” 投喂 ” 的「视频」「音频」资源,进行下载。
外围源码(共 91 行)
(function () {let _sourceBufferList = []
let $btnDownload = document.createElement('div')
let $downloadNum = document.createElement('div')
let $tenRate = document.createElement('div') // 十倍速播放
// 十倍速播放
function _tenRatePlay () {let $domList = document.getElementsByTagName('video')
for (let i = 0, length = $domList.length; i < length; i++) {const $dom = $domList[i]
$dom.playbackRate = 10
}
}
// 下载捕捉到的资源
function _download () {_sourceBufferList.forEach((target) => {const mime = target.mime.split(';')[0]
const type = mime.split('/')[1]
const fileBlob = new Blob(target.bufferList, { type: mime}) // 创立一个 Blob 对象,并设置文件的 MIME 类型
const a = document.createElement('a')
a.download = `${document.title}.${type}`
a.href = URL.createObjectURL(fileBlob)
a.style.display = 'none'
document.body.appendChild(a)
a.click()
a.remove()})
}
// 监听资源全副录取胜利
let _endOfStream = window.MediaSource.prototype.endOfStream
window.MediaSource.prototype.endOfStream = function () {alert('资源全副捕捉胜利,行将下载!')
_download()
_endOfStream.call(this)
}
// 捕捉资源
let _addSourceBuffer = window.MediaSource.prototype.addSourceBuffer
window.MediaSource.prototype.addSourceBuffer = function (mime) {console.log(mime)
let sourceBuffer = _addSourceBuffer.call(this, mime)
let _append = sourceBuffer.appendBuffer
let bufferList = []
_sourceBufferList.push({
mime,
bufferList,
})
sourceBuffer.appendBuffer = function (buffer) {$downloadNum.innerHTML = ` 已捕捉 ${_sourceBufferList[0].bufferList.length} 个片段 `
bufferList.push(buffer)
_append.call(this, buffer)
}
return sourceBuffer
}
// 增加操作的 dom
function _appendDom () {
const baseStyle = `
position: fixed;
top: 50px;
right: 50px;
height: 40px;
padding: 0 20px;
z-index: 9999;
color: white;
cursor: pointer;
font-size: 16px;
font-weight: bold;
line-height: 40px;
text-align: center;
border-radius: 4px;
background-color: #3498db;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
`
$tenRate.innerHTML = '十倍速捕捉'
$downloadNum.innerHTML = '已捕捉 0 个片段'
$btnDownload.innerHTML = '下载已捕捉片段'
$tenRate.style = baseStyle + `top: 150px;`
$btnDownload.style = baseStyle + `top: 100px;`
$downloadNum.style = baseStyle
$btnDownload.addEventListener('click', _download)
$tenRate.addEventListener('click', _tenRatePlay)
document.getElementsByTagName('html')[0].insertBefore($tenRate, document.getElementsByTagName('head')[0]);
document.getElementsByTagName('html')[0].insertBefore($downloadNum, document.getElementsByTagName('head')[0]);
document.getElementsByTagName('html')[0].insertBefore($btnDownload, document.getElementsByTagName('head')[0]);
}
_appendDom()})()
我的项目源码
申明
本我的项目仅用于学习,交换,切勿用于侵权行为。
正文完