支持大部分网页视频、直播錄影 / 视频录制 / 录制视频
// ==UserScript==
// @name 文文錄影机
// @namespace moe.moekai.aya.videorecorder
// @version 2.5
// @description 支持大部分网页视频、直播錄影 / 视频录制 / 录制视频
// @author YIU
// @include *
// @icon https://any.moest.top/monkeydoc/res/ayavrec.ico
// @run-at document-start
// @grant unsafeWindow
// @grant GM_registerMenuCommand
// @grant GM_openInTab
// @grant GM_getValue
// @grant GM_setValue
// @require https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js
// @license GPL-3.0
// @compatible chrome 76+
// @compatible firefox 70+
// @supportURL https://github.com/usaginya/mkAppUpInfo/tree/master/monkeyjs
// @homepageURL https://github.com/usaginya/mkAppUpInfo/tree/master/monkeyjs
// ==/UserScript==
//-- 以下格式转换方式仅供参考、推荐使用小丸工具箱等其它转换工具
//- 可以使用下面的ffmpeg命令直接转换格式为mp4（非标准mp4）
//ffmpeg -i WebVideo.webm -strict -2 -c copy output.mp4
//- 转为一般恒定mp4（二次转换，-r限制帧率避免爆帧，-crf数值越小体积越大质量越好，建议为21左右）
//ffmpeg -i WebVideo.webm -r 60 -crf 21 output.mp4
(function ($) {
'use strict';
//VV 全局变量定义 ---
let initialIsDone;
let gmMenuUiId;
let selectedMimeTypeId;
let supportedMimeTypes;
let buttonShowMode;
//## 注册脚本菜单 --
if (!gmMenuUiId) {
gmMenuUiId = GM_registerMenuCommand('设置 · Settings', gmMenuUiEvent);
}
//## 脚本菜单事件 - 创建菜单界面
function gmMenuUiEvent() {
// 切换编码类型菜单
if (!supportedMimeTypes) { createSupportedMimeType(); }
if (!initialIsDone) {
selectedMimeTypeId = parseInt(GM_getValue('MimeTypeId'));
}
let menuMimeTypeItems = [];
for (let id in supportedMimeTypes) {
let item = {
id: id,
group: 'gmayavrradiobtn-mimetype',
title: supportedMimeTypes[id].tips
? (id < 1 ? supportedMimeTypes[id].type : supportedMimeTypes[id].tips)
: supportedMimeTypes[id].type,
tips: supportedMimeTypes[id].tips
? (id < 1 ? supportedMimeTypes[id].tips : supportedMimeTypes[id].type)
: null,
selected: (selectedMimeTypeId && selectedMimeTypeId == id || !selectedMimeTypeId && id < 1),
isLast: id < 1,
onSelected: () => {
selectedMimeTypeId = id;
forwardCommandToIframe('changemimetypeid', selectedMimeTypeId);
}
};
menuMimeTypeItems.push(item);
}
// 切换錄影按钮菜单
if (!initialIsDone) { loadSiteButtonShowMode(); }
let btnModes = [
{id: 0 , title: '悬停显示', tips: '鼠标指针在视频上时显示'},
{id: 1 , title: '总是显示'},
{id: 2 , title: '不显示'},
{group: 'gmayavrradiobtn-bsmlayer', id: 10 , title: '内层', tips: '按钮在影视同一层'},
{group: 'gmayavrradiobtn-bsmlayer', id: 11 , title: '中层', tips: '按钮在影视相同的区域'},
{group: 'gmayavrradiobtn-bsmlayer', id: 12 , title: '外层', tips: '按钮在影视区域外层、被什么遮挡的话可以尝试选择'}
];
let menuBottomShowModeItems = [];
btnModes.forEach((mode) => {
let item = {
group: mode.group,
id: mode.id,
title: mode.title,
tips: mode.tips,
selected: () => {
if (mode.group != 'gmayavrradiobtn-bsmlayer') {
return buttonShowMode.mode && buttonShowMode.mode == mode.id || !buttonShowMode.mode && mode.id < 1;
}
return buttonShowMode.layer && buttonShowMode.layer == mode.id || !buttonShowMode.layer && mode.id < 11;
},
onSelected: () => {
let btnSM = { mode: buttonShowMode.mode, layer: buttonShowMode.layer };
let newBtnSM = {
mode: mode.group != 'gmayavrradiobtn-bsmlayer' ? mode.id : btnSM.mode,
layer: mode.group === 'gmayavrradiobtn-bsmlayer' ? mode.id : btnSM.layer
};
// 改变层之前先移除按钮
if (mode.group === 'gmayavrradiobtn-bsmlayer') {
buttonShowMode.mode = 2;
initialization();
}
// 等待删除后再绑定按钮
setTimeout(() => {
buttonShowMode.mode = newBtnSM.mode;
buttonShowMode.layer = newBtnSM.layer;
initialization();
saveSiteButtonShowMode();
// 向子窗口页面发送重新绑定指令,必须延迟发送,否则保存设置有冲突
forwardCommandToIframe('rebind', newBtnSM);
}, 300);
}
};
menuBottomShowModeItems.push(item);
});
// 构建菜单参数
let menu = {
title: {
href: 'https://greasyfork.org/scripts/430752'
},
tabs: {
'ButtonShowMode': {
title: '錄影按钮显示',
content: {
radioButton: {
column: 3,
items: menuBottomShowModeItems
}
}
},
'MimeType': {
title: '视频编码类型',
content: {
radioButton: {
configName: 'MimeTypeId',
column: 4,
items: menuMimeTypeItems
}
}
}
//- tabs end -
},
};
gmAyaUiCreate(menu);
}
//## 载入当前网站錄影按钮显示方式
function loadSiteButtonShowMode() {
if (!buttonShowMode) { buttonShowMode = { host: location.host, mode: 0, layer: 10 }; }
let siteButtonShowMode = GM_getValue('siteButtonShowMode');
siteButtonShowMode = !siteButtonShowMode ? [] : siteButtonShowMode;
siteButtonShowMode = siteButtonShowMode.filter((btnsm) => btnsm.host == buttonShowMode.host);
buttonShowMode = siteButtonShowMode.length > 0 ? siteButtonShowMode[0] : buttonShowMode;
}
//## 保存当前网站錄影按钮显示方式
function saveSiteButtonShowMode() {
if (!buttonShowMode || !buttonShowMode.host) { return; }
let siteButtonShowMode = GM_getValue('siteButtonShowMode');
siteButtonShowMode = !siteButtonShowMode ? [] : siteButtonShowMode;
if (siteButtonShowMode == []) {
siteButtonShowMode.push(buttonShowMode);
GM_setValue('siteButtonShowMode', siteButtonShowMode);
return;
}
siteButtonShowMode = siteButtonShowMode.filter((btnsm) => btnsm.host != buttonShowMode.host);
if (buttonShowMode.mode > 0 || buttonShowMode.layer > 10){
siteButtonShowMode.push(buttonShowMode);
}
GM_setValue('siteButtonShowMode', siteButtonShowMode);
}
/** 格式化编码类型
* @param {array} type 被格式化的编码类型(webm/vp9)[1:编码格式(webm..), 2:编码类型(vp9..)]
*/
function formatSupportedMimeType(type) {
return /^(.*?)\/(.*?)$/gi.exec(type);
}
//## 创建支持的编码类型 --
function createSupportedMimeType() {
let types = [
{ id: 0, type: 'Default', tips: 'webm'},
{ id: 1, type: 'webm/vp9' },{ id: 2, type: 'webm/vp8' },
{ id: 3, type: 'webm/h265' },{ id: 4, type: 'webm/h264' },
{ id: 5, type: 'webm/av1' },{ id: 6, type: 'webm/avc1' },
{ id: 7, type: 'x-matroska/vp9', tips: 'mkv/vp9' },{ id: 8, type: 'x-matroska/vp8', tips: 'mkv/vp8' },
{ id: 9, type: 'x-matroska/h265', tips: 'mkv/h265' },{ id: 10, type: 'x-matroska/h264', tips: 'mkv/h264' },
{ id: 11, type: 'x-matroska/av1', tips: 'mkv/av1' },{ id: 12, type: 'x-matroska/avc1', tips: 'mkv/avc1' },
];
supportedMimeTypes = {};
types.forEach(function(v){
let type = formatSupportedMimeType(v.type);
type = v.id < 1 ? '/webm' : `/${type[1]}\;codecs=${type[2]},opus`;
if (MediaRecorder.isTypeSupported(`video${type}`)) {
supportedMimeTypes[v.id] = v;
}
});
}
//## 获取当前的编码类型字符串
function getSelectedMimeTypeString() {
let selectedMimeType = 'video/webm';
if (!supportedMimeTypes) {
createSupportedMimeType();
}
if (!selectedMimeTypeId || selectedMimeTypeId < 1 || !supportedMimeTypes[selectedMimeTypeId]) {
return selectedMimeType;
}
selectedMimeType = formatSupportedMimeType(supportedMimeTypes[selectedMimeTypeId].type);
return `video/${selectedMimeType[1]}\;codecs=${selectedMimeType[2]},opus`;
}
/** ====== 文文GM设置界面窗口 ======
* @param {object} menu.title { <string>text: 窗口标题(可选), <string>href: 链接(可选) }
* @param {function} menu.onCloseing 窗口被关闭时执行的回调方法(可选)
* @param {object} menu.tabs 选项卡页面组
* @param {objectName} menu.tabs.tabId 选项卡页面索引(only)
* @param {string} menu.tabs.tabId.title 选项卡标题文字
* @param {string} menu.tabs.tabId.content 选项卡内容
* -- 选项卡内容对象 ----------------------------
* -- 单选按钮组 --------------------------
* radioButton: {
* <Array> items: [{
* <int> id: 选项索引,
* <string> group: 选项分组(可选),
* <string> title: 选项标题,
* <string> tips: 选项提示(可选),
* <bool|int|function> selected: 选项是否选中(only/可选),
* <bool> isLast: 选项是否排在最后(only/可选),
* <function> onSelected: 选项被选中时执行的回调方法(可选)
* }],
* <int> column: 每行选项显示个数(1~5)(可选),
* <string> configName: 存储设置名 \ 将会根据 items[i].id 索引保存(可选)
* }
*/
function gmAyaUiCreate(menu) {
if (!menu || !menu.tabs) { return; }
if ($('#gmayaui').length > 0) {
gmAyaUiRemove(() => gmAyaUiCreate(menu));
return;
}
let uiDom = $(`<div class="gmayauibg"><div id="gmayaui"><style>
.gmayauibg{position:fixed;display:flex!important;width:100%;height:100%;top:0;left:0;right:0;bottom:0;
align-content:center;justify-content:center;flex-wrap:wrap;background-color:#fff1;z-index:666666!important}
#gmayaui{margin:0 2vh;min-width:300px;min-height:300px;box-shadow:0 0 16px #2bf6;background-color:#fffc;display:none;
border-radius:5px;backdrop-filter:blur(6px);padding:12px;user-select:none;-webkit-user-select:none;
box-sizing:unset;-moz-user-select:none;-moz-box-sizing:unset;z-index:6}
#gmayaui,#gmayaui div,#gmayaui label,#gmayaui li,#gmayaui span{outline:0!important;text-align:center!important;
font-weight:400!important;font-family:'Microsoft YaHei',Helvetica,'宋体',Tahoma,Arial,sans-serif!important;
font-size:12pt!important;border:0!important}
#gmayaui a{color:unset!important;text-decoration:none!important;transition:color .3s}
#gmayaui a:hover{color:#08a5ef!important}
#gmayaui .head{position:relative;display:inline-block;width:100%}
#gmayaui .head .title{margin:0 4vh;color:#666!important;font-size:14pt!important}
#gmayaui .close{position:absolute;display:inline-block;width:18px;height:18px;right:2px;overflow:hidden}
#gmayaui .close::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
#gmayaui .close::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
#gmayaui .close::after,#gmayaui .close::before{content:'';position:absolute;height:6px;width:100%;top:50%;left:0;
margin-top:-3px;background:#91989FCC;border-radius:4px 0;transition:background .5s}
#gmayaui .close:focus::after,#gmayaui .close:focus::before,#gmayaui .close:hover::after,
#gmayaui .close:hover::before{background:#08a5ef;transition:background .5s}
#gmayaui .body{margin-top:2vh}
#gmayaui .wrap{position:relative;width:auto!important;height:auto!important;margin:5px;flex:1 0 50%}
#gmayaui .wrap.w2{flex:1 0 40%}#gmayaui .wrap.w3{flex:1 0 30%}
#gmayaui .wrap.w4{flex:1 0 20%}#gmayaui .wrap.w5{flex:1 0 10%}
#gmayaui .item{color:#fff!important;background-color:#91989F77;position:relative;box-shadow:0 0 0 5px #0000;
padding:5px 8px;border-radius:5px;transition:.5s;cursor:pointer}
#gmayaui .item:focus,#gmayaui .item:hover{background-color:#30547777}
#gmayaui label{display:unset;margin:unset;padding:unset}
#gmayaui input[type=radio]{display:none!important}
#gmayaui input:checked+label .item{box-shadow:0 0 3px 1px #88ceff;background-color:#08a5ef}
#gmayaui .content,#gmayaui .contenttips{line-height:normal!important}
#gmayaui .contenttips::after{content:attr(tooltip);top:0;left:50%;width:100%;background-color:#ffffffe6;
border-radius:8px;color:#e07a22!important;padding:10px;position:absolute;text-align:center;z-index:66;
backdrop-filter:blur(2px);font-size:10pt!important;white-space:pre-wrap;box-shadow:0 0 8px #e827;opacity:0;
transition:.5s;-webkit-transform:translate(-50%,calc(-100% - 10px));
transform:translate(-50%,calc(-100% - 10px));pointer-events:none}
#gmayaui .contenttips::before{content:'';position:absolute;display:none;top:0;left:50%;background-color:#0000;
width:0;height:0;z-index:66;backdrop-filter:blur(2px);border-left:solid 10px #0000;border-bottom:solid 10px #fffd;
-webkit-transform:translate(-50%,calc(-100% - 5px)) rotate(45deg);
transform:translate(-50%,calc(-100% - 5px)) rotate(45deg)}
#gmayaui .contenttips:focus::after,#gmayaui .contenttips:focus::before,#gmayaui .contenttips:hover::after,
#gmayaui .contenttips:hover::before{opacity:1;transition:.5s}
#gmayavruibgclose{position:absolute;width:100%;height:100%}
#gmayaui .tabs{position:relative;margin:0 auto;width:100%;left:0!important;top:0!important;right:0!important;
bottom:0!important;padding:unset!important;display:block!important}
#gmayaui .tabs nav{background:none!important;box-shadow:none!important;position: relative!important}
#gmayaui .tabs nav ul{position:relative!important;display:flex!important;margin:0 auto!important;padding:0!important;list-style:none!important;
flex-flow:row wrap!important;justify-content:center!important}
#gmayaui .tabs nav ul li{position:relative!important;display:block!important;color:#999!important;margin:0 .5em;flex:1;line-height:2.5;
-webkit-transition:color .3s;transition:color .3s}
#gmayaui .tabs nav ul li:focus,#gmayaui .tabs nav ul li:hover{color:#779}
#gmayaui .tabs nav ul li::before{content:'';position:absolute!important;top:0;left:0;z-index:-1;width:100%;height:100%;
background:#fff6;clip-path:inset(92% 0 0 0);-webkit-transition:background-color .3s;
transition:background-color .3s}
#gmayaui .tabs nav ul li:focus::before,#gmayaui .tabs nav ul li:hover::before{background:#aab}
#gmayaui .tabs nav ul li::after{content:'';position:absolute;left:48%;bottom:-2px;width:0;height:0;
margin-bottom:5px;z-index:-1;background:linear-gradient(135deg,#08a5ef 0,#08a5ef 50%,transparent 50%,transparent 100%);
transform:rotate(225deg);-webkit-transition:bottom .3s,width .3s,height .3s;transition:bottom .3s,width .3s,height .3s}
#gmayaui .tabs nav ul li.tab-current,#gmayaui .tabs nav ul li.tab-current:focus,
#gmayaui .tabs nav ul li.tab-current:hover{color:#08a5ef}
#gmayaui .tabs nav ul li.tab-current::before{background:#08a5ef}
#gmayaui .tabs nav ul li.tab-current::after{bottom:-8px;width:10px;height:10px}
#gmayaui .content-wrap section{display:none;margin:0 auto;padding-top:1em;text-align:center}
#gmayaui .content-wrap section.content-current{display:block;animation:gmayauiani-show-tab-content ease .5s}
#gmayaui .content-wrap{position:relative}
#gmayaui .tab-content{display:flex!important;flex-wrap:wrap;flex-direction:row}
@keyframes gmayauiani-show-tab-content{0%{opacity:0;clip-path:inset(0 0 60% 0)}100%{opacity:1;clip-path:inset(0)}}
</style>
<div class="head"><div class="title">
<a href="${menu.title && menu.title.href ? menu.title.href : 'javascript:;'}" target="_blank">
${menu.title && menu.title.text ? menu.title.text : GM_info.script.name}
</a><span class="close" tabindex="0"></span></div></div>
<div class="body"><div class="tabs"><nav><ul></ul></nav><div class="content-wrap"></div></div></div>
</div><div id="gmayavruibgclose"></div></div>`);
// 绑定窗口事件
$([uiDom.find('#gmayavruibgclose'), uiDom.find('.close')]).each(function() {
this.click(() => {
gmAyaUiRemove();
if (menu.onCloseing) { menu.onCloseing(); }
});
});
// 构建选项卡页内容
let fastTabId = Object.keys(menu.tabs)[0];
for (let tabId in menu.tabs) {
if (!menu.tabs.hasOwnProperty(tabId)){ continue; }
// 选项卡栏
let tabli = `<li${ fastTabId && tabId === fastTabId ? ' class="tab-current"' : '' }>
${menu.tabs[tabId].title}</li>`;
tabli = $(tabli);
tabli.click(function () {
uiDom.find('.tabs li.tab-current').removeClass('tab-current');
$(this).addClass('tab-current');
uiDom.find('section.content-current').removeClass('content-current');
uiDom.find(`section#gmayaui-${tabId}`).addClass('content-current');
});
uiDom.find('.tabs>nav>ul').append(tabli);
// 选项卡内容框架
let tabSection = `<section id="gmayaui-${tabId}"`;
if (fastTabId && tabId === fastTabId) {
tabSection += ` class="content-current"`;
fastTabId = undefined;
}
tabSection += `><div class="tab-content"></div></section>`
tabSection = $(tabSection);
// 生成选项卡内容
for (let contentKey in menu.tabs[tabId].content) {
let content = menu.tabs[tabId].content;
if (!content.hasOwnProperty(contentKey)){ continue; }
content = content[contentKey];
// 单选按钮组
if (/^radioButton$/i.test(contentKey)){
let column = content.column;
let configName = content.configName;
let itemDom = undefined;
let itemLastDom = undefined;
let items = content.items;
for (let i in items) {
let item = items[i];
let itemGroup = items[i].group ? items[i].group : 'gmayaui-radiobutton';
let itemBtn = $(`<input type="radio" name="${itemGroup}" id="${itemGroup}${i}" />`);
itemBtn.click(function () {
if (item.onSelected) { item.onSelected(); }
if (configName) { GM_setValue(configName, item.id); }
});
let itemBtnContent = $(`<label for="${itemGroup}${i}">
<div class="item ${item.tips ? 'contenttips' : 'content'}"
${item.tips ? `tooltip="${item.tips}"` : ''}>${item.title}</div></label>`);
if (item.selected) {
if (/boolean|number/i.test(typeof(item.selected))) {
itemBtn.prop('checked', item.selected);
} else if (/function/i.test(typeof(item.selected))) {
itemBtn.prop('checked', item.selected());
}
}
itemDom = $(`<div class="wrap${ column > 1 && column < 6 ? ` w${column}` : '' }"></div>`);
itemDom.append(itemBtn).append(itemBtnContent);
if (item.isLast) {
itemLastDom = itemDom;
continue;
}
tabSection.find('.tab-content').append(itemDom);
}
tabSection.find('.tab-content').append(itemLastDom);
}
//- radioButton end -
}
//- 生成选项卡内容 end -
// 装载选项卡内容
uiDom.find('.content-wrap').append(tabSection);
}
// 显示界面
$('body').append(uiDom);
uiDom.children(':first').fadeIn('fast');
}
/** 移除设置界面窗口
* @param {function} callback 关闭窗口后执行的回调方法
*/
function gmAyaUiRemove(callback) {
$('#gmayaui').fadeOut('fast', function(){
$(this).parent().remove();
if (callback) { callback(); }
});
}
//====== 文文GM设置界面窗口 END ======
//## Catch error event
function catchErrorEvent(err, videoObj){
if (/NotSupportedError/gi.test(err.toString())) {
alert(`${GM_info.script.name} - 錄影不支持\n请尝试在脚本设置中切换「视频编码类型」`);
return;
}
if (/SecurityError/gi.test(err.toString())) {
alert(`${GM_info.script.name} - 錄影权限不足\n无法对跨域的视频进行錄影`);
if (!videoObj) { return; }
let testVideoUri = videoObj.src;
let testVideoSourceDom = $(videoObj).find('source:first')[0];
if (!testVideoUri && testVideoSourceDom) {
testVideoUri = testVideoSourceDom.src;
}
if (!testVideoUri || /^blob:/i.test(testVideoUri)) { return; }
if (confirm(`${GM_info.script.name}\n发现源地址\n要尝试在新页面打开吗？`)) {
let openUri = /\.m3u8$/gi.test(testVideoUri) ? `https://any.moest.top/m3u8get/?source=${testVideoUri}` : testVideoUri;
openUrl(openUri);
}
setTimeout(() => videoObj.pause(), 100);
return;
}
console.error('Aya Video Recorder', err);
alert(`${GM_info.script.name} - 发生意外错误\n${err}`);
}
//## Video recording extension method
function ExtensionVideoRecorder() {
unsafeWindow.HTMLVideoElement.prototype.record = async function (duration_seconds = 60, btnDom = null) {
let video;
try {
video = this instanceof unsafeWindow.HTMLVideoElement ? this : document.querySelector('video');
video.captureStream = video.captureStream || video.mozCaptureStream;
let stream = video.captureStream(60);
let mimeType = getSelectedMimeTypeString();
const recOption = { mimeType: mimeType };
let recorder = new MediaRecorder(stream, recOption);
let stopRecord = () => {
if (recorder.state === 'recording' || recorder.state === 'paused') {
recorder.stop();
}
};
let pauseRecord = (setResume) => {
if(!setResume && recorder.state === 'recording') {
recorder.pause();
return;
}
if(setResume && recorder.state === 'paused') {
recorder.resume();
}
};
let formatSeconds = (second) => {
let h = Math.floor(second / 3600)
let m = Math.floor(second / 60 % 60);
let s = Math.floor(second % 60);
return `${h < 10 ? `0${h}` : h}:${m < 10 ? `0${m}` : m}:${s < 10 ? `0${s}` : s}`;
};
if (btnDom) {
btnDom[0].recS = 0;
btnChangeState(btnDom, 1);
btnDom[0].recTimeCalc = setInterval(() => {
if (recorder.state === 'paused') {
btnChangeState(btnDom, 1, 1,
video.recordIsMuted
? '由于静音錄影被迫暂停'
: `已暂停 ${formatSeconds(btnDom[0].recS)}`
);
return;
}
btnDom[0].recS++;
btnChangeState(btnDom, 1, 0,`停止 ${formatSeconds(btnDom[0].recS)}`);
}, 1000);
//-- listen video ended
btnDom[0].videoEnded = () => {
stopRecord();
video.removeEventListener('ended', btnDom[0].videoEnded);
btnDom[0].videoEnded = 6;
};
video.addEventListener('ended', btnDom[0].videoEnded);
btnDom[0].recStop = () => {
stopRecord();
video.removeEventListener('ended', btnDom[0].videoEnded);
btnDom[0].videoEnded = undefined;
};
}
//-- listen video events
video.recordPause = () => pauseRecord();
video.recordResume = () => pauseRecord(1);
video.videoVolumeChange = () => {
if (video.muted || video.volume <=0) {
pauseRecord();
video.recordIsMuted = 1;
return;
}
if (video.recordIsMuted) {
pauseRecord(1);
video.recordIsMuted = undefined;
}
}
//- pause
video.addEventListener('pause', video.recordPause);
//- waiting
video.addEventListener('waiting', video.recordPause);
//- playing
video.addEventListener('playing', video.recordResume);
//- volumechange
video.addEventListener('volumechange', video.videoVolumeChange);
let blobs = [];
await new Promise((resolve, reject) => {
recorder.onstop = resolve;
recorder.onerror = reject;
recorder.ondataavailable = (event) => blobs.push(event.data);
try {
// Save the stream into memory every second to reduce the jam
recorder.start(1000);
return true;
} catch(err) {
// In FireFox
if (btnDom) {
clearInterval(btnDom[0].recTimeCalc);
buttonAddOrDel(btnDom, btnDom[0].video, 1);
}
catchErrorEvent(err, video);
return false;
}
});
// Recording stopped
video.removeEventListener('pause', video.recordPause);
video.removeEventListener('waiting', video.recordPause);
video.removeEventListener('playing', video.recordResume);
video.removeEventListener('volumechange', video.videoVolumeChange);
video.recordPause = video.recordResume = video.videoVolumeChange = undefined;
if (btnDom) {
btnDom[0].vblob = new Blob(blobs, {
type: mimeType
});
btnDom[0].dlurl = URL.createObjectURL(btnDom[0].vblob);
clearInterval(btnDom[0].recTimeCalc);
btnChangeState(btnDom);
if (btnDom[0].autoDL && btnDom[0].videoEnded > 5) {
btnDom[0].videoEnded = undefined;
createDownload(btnDom[0].dlurl);
}
}
blobs = stream = recorder = undefined;
return true;
} catch(err) {
catchErrorEvent(err, video);
return false;
}
}
}
//## 新页面打开链接
function openUrl(url){
GM_openInTab(url, { active: true, insert: true, setParent :true });
}
//## 创建下载(blob链接, 下载后是否释放)
function createDownload(dlurl, revoke) {
let defaultFileName = `WebVideo${new Date().toLocaleString().replace(/\\|\/|:|\*|\?|\"|<|>|\|/ig, '')}`;
let filename = ($('title').length > 0 ? $('title').text() : defaultFileName) + '.webm';
let a = document.createElement('a');
a.href = dlurl;
a.download = filename;
a.click();
if (revoke) {
window.URL.revokeObjectURL(dlurl);
}
}
//## 向子窗口发送指令
function sendCommandToWindow(winDom, command, parameter) {
if (!winDom || !command) { return; }
winDom.postMessage({
gm : GM_info.script.namespace,
action : command,
value : parameter
}, '*');
}
//## 转发指令 ---------------
function forwardCommandToIframe(command, parameter) {
$('iframe').each(function () {
sendCommandToWindow(this.contentWindow, command, parameter);
});
}
//-- 监听接收指令 --------------
window.addEventListener('message', function(e) {
if (!e.data || !e.data.gm || e.data.gm != GM_info.script.namespace || !e.data.action) {
return;
}
switch (e.data.action) {
case 'rebind' :
if (!e.data.value) { break; }
e.data.value.host = location.host;
reBindVideoEvent(e.data.value, 1);
break;
case 'changemimetypeid' :
if (!e.data.value) { break; }
selectedMimeTypeId = e.data.value;
GM_setValue('MimeTypeId', selectedMimeTypeId);
break;
}
forwardCommandToIframe(e.data.action, e.data.value)
});
//-- 初始化 -------------------------------
window.onload = function () {
// 载入设置
selectedMimeTypeId = parseInt(GM_getValue('MimeTypeId'));
loadSiteButtonShowMode();
// 5s尝试初始化
let tryCount = 0;
let timerInit = setInterval(() => {
initialization();
if (tryCount > 4 || $('style:contains(gmAyaRecBtn)').length > 0) {
clearInterval(timerInit);
tryCount = timerInit = undefined;
return;
}
tryCount++;
}, 1000);
initialIsDone = !0;
};
//## 退出全屏时重新绑定 --------------
$(window).resize(function () {
let isFull = document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen;
if (isFull === undefined || !isFull) {
initialization();
}
});
//## 初始化过程 --------------
function initialization() {
if ($('video').length < 1) { return; }
if ($('style:contains(gmAyaRecBtn)').length < 1) {
$('head').append($(`<style>
.gmAyaRecBtn{position:absolute;left:0;top:0;display:inline-block;border-radius:4px;
background-color:#ff7728bb;border:none;color:#fff;text-align:center;font-size:12pt;padding:5px 10px;
cursor:pointer;margin:5px;font-family:"Microsoft YaHei",Arial,sans-serif;z-index:998!important;
transition:.5s!important;line-height:1!important}
.gmAyaRecBtn:hover{background-color:#ff5520}
.gmAyaRecBtn.dl{background-color:#56bb2cbb;padding-right:18px;transition:.5s}
.gmAyaRecBtn.dl:hover{background-color:#2cbb80;transition:.5s}
.gmAyaRecBtn span{display:inline-block;cursor:pointer;position:relative;color:#fff;transition:.5s}
.gmAyaRecBtn span:after{content:attr(data-content-after);font-size:19pt;position:absolute;opacity:0;
top:-6px;margin-left:5px;color:#fff;transition:.5s}
.gmAyaRecBtn span.rec{padding-right:18px;transition:.5s}
.gmAyaRecBtn span.rec:after{animation:twinkle .5s infinite alternate}
.gmAyaRecBtn span.dl,.gmAyaRecBtn span.pause{padding-right:12px;transition:.5s}
.gmAyaRecBtn span.dl:after{font-size:12pt}
.gmAyaRecBtn span.pause:after{font-size:10pt;font-weight:bold}
.gmAyaRecBtn span.dl:after,.gmAyaRecBtn span.pause:after{opacity:1;top:0;animation:none}
@keyframes twinkle{0%{opacity:.5}100%{opacity:1}}
</style>`));
}
if (!unsafeWindow.HTMLVideoElement.prototype.record) {
ExtensionVideoRecorder();
}
if (buttonShowMode.mode > 0) {
bindVideoEvent(changeButtonShowMode);
return;
}
bindVideoEvent();
}
//## 绑定video hover事件
function bindVideoEventHover(videoDom) {
videoDom.gmayavrhover = function () {
switchButton($(videoDom));
}
videoDom.gmayavrunhover = function () {
switchButton($(videoDom), 1);
}
videoDom.addEventListener('mouseenter', videoDom.gmayavrhover)
videoDom.addEventListener('mouseleave', videoDom.gmayavrunhover);
switchButton($(videoDom), 1);
}
//## 解除绑定video hover事件
function unBindVideoEventHover(videoDom) {
if (videoDom.gmayavrhover) {
videoDom.removeEventListener('mouseenter', videoDom.gmayavrhover);
videoDom.gmayavrhover = undefined;
}
if (videoDom.gmayavrunhover) {
videoDom.removeEventListener('mouseleave', videoDom.gmayavrunhover);
videoDom.gmayavrunhover = undefined;
}
}
//## 绑定video事件(每绑定一个video都会回调传入video jQuery dom)
function bindVideoEvent(callback) {
let video = $('video');
if (video.length > 0) {
if (buttonShowMode.mode < 1) {
video.each(function () {
unBindVideoEventHover(this);
bindVideoEventHover(this);
});
return;
}
if (buttonShowMode.mode > 0 && callback) { callback(video); }
}
}
/*## 重新绑定video事件
* @param {object} newButtonShowMode 新绑定的按钮模式对象
* @param {bool} needToSave 保存按钮模式到配置
*/
function reBindVideoEvent(newButtonShowMode, needToSave) {
if (!newButtonShowMode) { return; }
// 移除旧按钮
if (buttonShowMode) {
buttonShowMode.mode = 2;
initialization();
}
// 等待删除后重新绑定
setTimeout(() => {
buttonShowMode = newButtonShowMode;
initialization();
if (needToSave) { saveSiteButtonShowMode(); }
}, 300);
}
//## 定位按钮容器返回 jq dom
function positionButtonContainer(videoDom) {
let inDom = videoDom[0].parentNode;
if (buttonShowMode.layer < 11) { return $(inDom); }
let videoWidth = videoDom[0].clientWidth,
videoHeight = videoDom[0].clientHeight;
if (!videoWidth || !videoHeight) { return; }
while (inDom && !/body|html/i.test(inDom.tagName)){
if (inDom.clientWidth > videoWidth || inDom.clientHeight > videoHeight) {
break;
}
inDom = inDom.parentNode;
}
inDom = buttonShowMode.layer > 11 ? (inDom.parentNode ? inDom.parentNode : inDom) : inDom;
return $(inDom);
}
//## 显示或隐藏按钮
function switchButton(videoDom, hide) {
if (!videoDom) { return; }
let inDom = positionButtonContainer(videoDom);
if (!inDom) { return; }
let gmbtn = inDom.find('.gmAyaRecBtn');
if (hide) {
if (gmbtn.length < 1 || gmbtn[0].isRec || gmbtn[0].dlurl){
return;
}
setTimeout(() => buttonAddOrDel(gmbtn, undefined, buttonShowMode.mode > 1), 100);
return;
}
buttonAddOrDel(0, videoDom);
}
//## 改变按钮显示方式
function changeButtonShowMode(videoDom) {
switch(buttonShowMode.mode) {
case 1:
videoDom.each(function(){
switchButton($(this));
});
break;
case 2:
videoDom.each(function(){
switchButton($(this), 1);
});
break;
default:
initialization();
videoDom.each(function(){
switchButton($(this), 1);
});
}
}
//## 添加或删除按钮(添加:无btnDom 有videoDom, 删除:有btnDom 无videoDom, 重新添加)
function buttonAddOrDel(btnDom, videoDom, reAdd) {
// 删除
if (!videoDom || reAdd) {
if (!reAdd && (!btnDom || btnDom[0].hovered || btnDom[0].isRec || btnDom[0].dlurl || buttonShowMode.mode === 1)) {
return false;
}
btnDom.remove();
btnDom = undefined;
// 删除后再添加
if (reAdd && buttonShowMode.mode === 1) {
buttonAddOrDel(0, videoDom)
}
return false;
}
//== 添加
//- 定位按钮容器jq dom
let inDom = positionButtonContainer(videoDom);
if (!inDom || inDom.find('.gmAyaRecBtn').length > 0 || buttonShowMode.mode > 1) {
return false;
}
let newBtn = $(`<a class="gmAyaRecBtn" href="javascript:;"><span>錄影</span></a>`);
newBtn[0].video = videoDom;
newBtn.hover(function () {
this.hovered = 1;
}, function () {
this.hovered = 0;
});
newBtn.click(function () {
//---- 下载
if (this.dlurl) {
if (confirm('要下载錄影吗？')) {
createDownload(this.dlurl);
return false;
}
if (!confirm('要重新开始錄影吗？')) {
return false;
}
window.URL.revokeObjectURL(this.dlurl);
buttonAddOrDel($(this), videoDom, 1);
return false;
}
//---- 錄影
let videoObj = videoDom[0];
if (this.isRec) {
//停止錄影
videoObj.pause();
this.recStop();
return false;
}
//开始錄影
let durs = videoObj.duration;
if (!durs) {
alert('无法取得视频长度');
return false;
}
let videoIsPaused = videoObj.paused;
videoObj.pause();
if (!confirm('要开始錄影吗？')) {
if (!videoIsPaused) {
//延迟播放避免某些网站播放器逻辑冲突
setTimeout(() => videoObj.play(), 800);
}
return false;
}
if (videoObj.duration != Infinity) {
if (videoObj.currentTime > 0 && videoObj.currentTime <= videoObj.duration && confirm('要从头开始錄影吗？')) {
videoObj.currentTime = 0;
} else {
durs -= videoObj.currentTime;
}
newBtn[0].autoDL = confirm('当錄影结束时弹出下载？');
}
if (videoObj.muted || videoObj.volume <= 0) {
videoObj.muted = false;
videoObj.volume = 0.0001;
}
let promise = videoObj.record(durs, newBtn);
let promiseReturn = true;
promise.then((result) => {
promiseReturn = result;
});
setTimeout(() => {
if (!promiseReturn) {
if (!videoIsPaused) {
setTimeout(() => videoObj.play(), 800);
}
return false;
}
videoObj.play();
}, 100);
return false;
});
inDom.append(newBtn);
return false;
}
//## 改变按钮状态(按钮dom, 是否正在錄影, 錄影是否已暂停, 状态标题)
function btnChangeState(btnDom, isRecording, isPaused , title) {
if (!btnDom) { return; }
let btnSpan = btnDom.children(':first');
//錄影暂停
if (isPaused && btnDom[0].isRec > 0) {
if (btnSpan.hasClass('pause')) { return; }
btnSpan.text(title);
btnSpan.attr('data-content-after', '||');
btnDom.addClass('pause');
btnSpan.removeClass('rec').addClass('pause');
return;
}
//錄影状态
if (isRecording) {
btnDom[0].isRec = 1;
btnSpan.text(title ? title : '錄影已开始');
if (btnSpan.hasClass('rec')) { return; }
btnSpan.attr('data-content-after', '●');
btnDom.removeClass('pause');
btnSpan.removeClass('pause').addClass('rec');
return;
}
//停止錄影状态
btnDom[0].isRec = 0;
btnSpan.removeClass('rec').removeClass('pause');
if (btnDom[0].dlurl) {
btnSpan.text('下载錄影');
btnSpan.attr('data-content-after', '▼');
btnDom.addClass('dl');
btnSpan.addClass('dl');
return;
}
}
})(jQuery);