https://github.com/Momo707577045/media-source-extract 配套插件
目前为
// ==UserScript==
// @name 媒体串流捕获
// @namespace https://github.com/Momo707577045/media-source-extract
// @version 0.2
// @description https://github.com/Momo707577045/media-source-extract 配套插件
// @license AGPL-3.0
// @author Momo707577045
// @include *
// @exclude http://blog.luckly-mjw.cn/tool-show/media-source-extract/player/player.html
// @grant none
// @run-at document-start
// ==/UserScript==
(() => {
'use strict';
if (document.getElementById('media-source-capture')) {
return;
}
doMediaSource(window.MediaSource);
doMediaSource(window.BwpMediaSource);
let isClose = false, isEndOfStream = false;
let sourceBufferList = [];
let $btnDownload = document.createElement('div');
let $downloadNum = document.createElement('div');
let $tenRate = document.createElement('div'); // 16倍速播放
let $closeBtn = document.createElement('div'); // 关闭
$closeBtn.innerHTML = `
<div style="margin-top: 4px; height: 34px; width: 34px; line-height: 34px; display: inline-block; border-radius: 50px; background-color: rgba(0, 0, 0, 0.5);" id="m3u8-close">
<img style="padding-top: 4px; width: 24px; cursor: pointer;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAk1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ROyVeAAAAMHRSTlMA1Sq7gPribxkJx6Ey8onMsq+GTe10QF8kqJl5WEcvIBDc0sHAkkk1FgO2ZZ+dj1FHfPqwAAACNElEQVRIx6VW6ZqqMAwtFlEW2Rm3EXEfdZa+/9PdBEvbIVXu9835oW1yjiQlTWQE/iYPuTObOTzMNz4bQFRlY2FgnFXRC/o01mytiafP+BPvQZk56bcLSOXem1jpCy4QgXvRtlEVCARfUP65RM/hp29/+0R7eSbhoHlnffZ8h76e6x1tyw9mxXaJ3nfTVLd89hQr9NfGceJxfLIXmONh6eNNYftNSESRmgkHlEOjmhgBbYcEW08FFQN/ro6dvAczjhgXEdQP76xHEYxM+igQq259gLrCSlwbD3iDtTMy+A4Yuk0B6zV8c+BcO2OgFIp/UvJdG4o/Rp1JQYXeZFflPEFMfvugiFGFXN587YtgX7C8lRGFXPCGGYCCzlkoxJ4xqmi/jrIcdYYh5pwxiwI/gt7lDDFrcLiMKhBJ//W78ENsJgVUsV8wKpjZBXshM6cCW0jbRAilICFxIpgGMmmiWGHSIR6ViY+DPFaqSJCbQ5mbxoZLIlU0Al/cBj6N1uXfFI0okLppi69StmumSFQRP6oIKDedFi3vRDn3j6KozCZlu0DdJb3AupJXNLmqkk9+X9FEHLt1Jq8oi1H5n01AtRlvwQZQl9hmtPY4JEjMDs5ftWJN4Xr4lLrV2OHiUDHCPgvA/Tn/hP4zGUBfjZ3eLJ+NIOfHxi8CMoAQtYfmw93v01O0e7VlqqcCsXML3Vsu94cxnb4c7ML5chG8JIP9b38dENGaj3+x+TpiA/AL/fen8In7H8l3ZjdJQt2TAAAAAElFTkSuQmCC">
</div>`;
// 16倍速播放
function tenRatePlay() {
setTimeout(() => {
let $domList = document.querySelectorAll('video,bwp-video');
for (let i = 0, length = $domList.length; i < length; i++) {
const $dom = $domList[i];
$dom.playbackRate = 16;
$dom.muted = true;
}
});
}
// 下载资源
function download() {
setTimeout(() => {
const date = new Date();
for (const target of sourceBufferList) {
const mime = target.mime.split(';')[0];
const type = mime.split("/");
const fileBlob = new Blob(target.bufferList, {type: mime}); // 创建一个Blob对象，并设置文件的 MIME 类型
const a = document.createElement('a');
a.download = `${type[0]}_${date.getFullYear().toString().padStart(4, '0')}${date.getMonth().toString().padStart(2, '0')}${date.getDay().toString().padStart(2, '0')}_${date.getHours().toString().padStart(2, '0')}${date.getMinutes().toString().padStart(2, '0')}.${type[1]}`;
a.href = URL.createObjectURL(fileBlob);
a.style.display = 'none';
document.body.appendChild(a);
a.click();
a.remove();
if (isEndOfStream === true) {
sourceBufferList = [];
isEndOfStream = false;
}
}
});
}
// BWP(Bilibili Web Player) 是哔哩哔哩为实现软解 HEVC 而通过 Shadow DOM API 封装了一个 <bwp-video> 标签，并实现了一套 BWP MSE API 作者：哔哩哔哩技术 https://www.bilibili.com/read/cv16257864 出处：bilibili
function doMediaSource(MediaSource) {
if (MediaSource) {
let endOfStream = MediaSource.prototype.endOfStream;
MediaSource.prototype.endOfStream = function () {
if (!isClose) {
isEndOfStream = true;
showTip(`已捕获到终点，请下载`);
$downloadNum.innerHTML = `已捕获到终点，请下载`;
endOfStream.call(this);
}
}
let addSourceBuffer = MediaSource.prototype.addSourceBuffer
MediaSource.prototype.addSourceBuffer = function (mime) {
if (!isClose) {
if (isEndOfStream) {
if (confirm('检测到新的视频流，是否下载已捕获？\n点击“确定”下载已捕获\n点击“取消”重新捕获')) {
download();
}
}
appendDom();
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() {
if (document.getElementById('media-source-capture')) {
return;
}
const baseStyle = `position: fixed; top: 50px; right: 50px; height: 40px; padding: 0 20px; z-index: 99999; 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 = '16倍速捕获(静音)';
$downloadNum.innerHTML = '已捕获 0 个片段';
$btnDownload.innerHTML = '下载已捕获片段';
$btnDownload.id = 'media-source-capture';
$tenRate.style = baseStyle + `top: 150px;`;
$btnDownload.style = baseStyle + `top: 100px;`;
$downloadNum.style = baseStyle;
$closeBtn.style = `position: fixed; top: 200px; right: 50px; text-align: center; z-index: 99999; cursor: pointer;`;
$btnDownload.addEventListener('click', download);
$tenRate.addEventListener('click', tenRatePlay);
$closeBtn.addEventListener('click', function () {
$btnDownload.remove();
$downloadNum.remove();
$closeBtn.remove();
$tenRate.remove();
sourceBufferList = [];
isClose = true;
});
let $html = document.querySelector("html"), $head = document.querySelector('head');
$html.insertBefore($tenRate, $head);
$html.insertBefore($downloadNum, $head);
$html.insertBefore($btnDownload, $head);
$html.insertBefore($closeBtn, $head);
}
})();
function showTip(msg, style = ``) {
// 该函数需要在top内运行，否则可能显示异常
let root = document.querySelector(`:root`);
if (window === top) {
let tip = document.querySelector(`:root > tip`);
if (tip && tip.nodeType === 1) {
// 防止中途新的showTip事件创建多个tip造成卡顿
root.removeChild(tip);
}
tip = document.createElement(`tip`);
// pointer-events: none; 禁用鼠标事件，input标签使用 disabled='disabled' 禁用input标签
tip.style = style + `pointer-events: none; opacity: 0; background-color: #222a; color: #fff; font-family: 微软雅黑,黑体,Droid Serif,Arial,sans-serif; font-size: 20px; text-align: center; padding: 6px; border-radius: 16px; position: fixed; transform: translate(-50%, -50%); left: 50%; bottom: 15%; z-index: 2147483647;`;
tip.innerHTML = `<style>@keyframes showTip {0%{opacity: 0;} 33.34%{opacity: 1;} 66.67%{opacity: 1;} 100%{opacity: 0;}}</style>\n` + msg;
let time = msg.replace(/\s/, ``).length / 2; // TODO 2个字/秒
// cubic-bezier(起始点, 起始点偏移量, 结束点偏移量, 结束点)，这里的 cubic-bezier函数 表示动画速度的变化规律
tip.style.animation = `showTip ` + (time > 2 ? time : 2) + `s cubic-bezier(0,` + ((time - 1) > 0 ? (time - 1) / time : 0) + `,` + (1 - ((time - 1) > 0 ? (time - 1) / time : 0)) + `,1) 1 normal`;
root.appendChild(tip);
setTimeout(() => {
try {
root.removeChild(tip);
} catch (e) {
// 排除root没有找到tip
}
}, time * 1000);
} else {
top.showTip(msg, style);
}
}
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址