油猴脚本开发 | 视频录屏
一、Tampermonkey
二、代码
代码=>网页游戏、网页视频录屏
// ==UserScript==
// @name 网页游戏、网页直播录屏
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author echohye
// @match *://*/*
// @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABSRJREFUWEftlmtQVGUYx//nnN2zyy4XYXEXdFmvOKA5tpKDqQioqWkFZnYbhxormmDZoFTkg0E5TSqDFpc0nTKnvFQmOBHNKFMoM8iM4CVGnRFtNMEa3eQiEHsu79ucZXZxaRfWbMYvPl/f5/J7/89znvcweMDGPOD6eAjwUIF7VqAoYfbrt8407XYPr3FSEG63yT1UliQiivpISnVFgBTocAcMYOf5NE4btC+xZLe+/s2XUX4z2VXDZjyOxE2bwDkaMOqpD1CbNl8MnRy3+4+zpwp3AY4ds5HH65D22s9I8QUVEIBdpfoz6Yvv+g0Jc8YpSb6fPtYD4E6qgCi2sqUdjqZG1K9ZKRFZWhZlgSY2AXNfrETBfwLICw7pXnbifAin0XjifQHUFF9FTfE1F4DbqqwxMgQhvhRo9dcSLwVsAC3H4G6wq9WOpceaDdrRJq94BUCxKfONIMETcbmm0XP7oYWqrJYuKjhNZYBzWAWU4mUngZzHAQXCBqZ3waFaRh0aFsSqVAgyRfu8hBtGOYx/611MzXoHQlcHZKcTWkMkGE6FyuljOsuIHO4XwAasip2Jb+0VAwDg+KOmOUmp8Vlr1fqY8dCER/gdanc7Whs6sXftHSR//RPEnjsgogilbXzYKFyvqaKnC9ctLZOcR4cmcrUgi+WLWCIUug8JYJldvLPJvGyFcaTPSQGYtToOr2wz4bMCI6bkfuwVQgnB7XPNaLBl1At3ehJBaa5IxP27gC7FkbFxmmco6OoKWXjeM9GAvOLXdlaRLxA7t/k9XN73Oaw5GZiY+ZHPkMoZ5j5OUk8WWCmTYbCRYciickmqY7I5nlbIgtcw2tXq3vSzbbpAirtu4WjCodQ0zNu5D6a5Pj93VFktzlLBqVX8c8BPJRyaKmRBx2SpNItZ0IXlkpDvLvi2ViukNV9TBwqg+PU7bkIb6b9jR6wW6RPB6cnpajtL6lw3t3H8Kgp8CUrzKoi4y87zYvqZ64HpD4BerUX1ygwQmUClUSG1pAC6edle/FUzzHKpJLpyeilwt1c2q84Ew2xnKNGmHqxhw6fNCEiEH2dFY+M3BGGRA+7rFgFLquvAGeM98YcfiaKE45cylP4AQBZlwaKsap+r2MawdMJLa3D18AFYlj+LqPkLoY+xQBNugCbCAFY12J2u43vwWPAGmGMHWZ19wIblPJIPHkPnhRZ0XGjBlQN7QCkKVITdX4r+393ePgFygNGPFhWfnrAqw9x3ow23Tp1E95VLcN52oP8vB2421iujB0pkRBhlZG6W/gXw6VoeYemboTdbwKp5nNuUn/9h68WtPveAL53zQkI7nm5sHeXedHfv+Lv9pb5e1D0Zi/V7ZE8L1j8BpDW2QGAGhrLKahGp4AzxtY79voY2IEVnCq/dcn4mp7x0E55bjZmFW3zOhHypGtUvvAFZINDoVUjZug76lFyPb+X06LYyQmJ8BQ/7HGezKvp+cyIMMVpsTz+PKw0OTw5/igwtciRh/C3S/3fMiI+Rv3FXIAp+ScDYacFeLhuT2rHg0MA/gD+rnhPnZLo6zCXAIPkQ5xF/SLKAqAizrn1x7jg26dUxrnClJcMpoAxubXpyt7O3x7oD+G04yBEB3MFFsaHHxD55YdwCI7PEHo29uTcQm/8VQidN8eTvbr2IExnpgtjTTcoICQpkiQQM4E5mA0MjJ+pFIjOcwaJhLjd0UoZjRVAqElHUlQNcIIWH3QP3kuB+fe9ZgfstGPAi+r8L+cv3wBX4B9wX5+QhPM7vAAAAAElFTkSuQmCC
// @grant GM_download
// @grant GM_addStyle
// ==/UserScript==
(function () {
'use strict';
// 用于等待网页及代码全部执行完毕再执行脚本内容
let readyState = false;
window.onload = () => {
let interval;
let i = 0;
interval = setInterval(() => {
i++;
if (i > 30 || readyState) {
clearInterval(interval);
} else {
loadReady();
}
}, 1000)
}
// 脚本内容
function loadReady() {
readyState = true;
// js
let video = document.querySelector('video')
if (!video) return;
// css
var domHead = document.getElementsByTagName('head')[0];
var domStyle = document.createElement('style');
domStyle.type = 'text/css';
domStyle.rel = 'stylesheet';
let cssStyle = `
.recorder {
width: 30px;
background-color: #aaa;
z-index: 99999;
position: fixed;
border: solid 1px #222;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
user-select: none;
left: 0;
top: 40%;
font-size: 12px;
color:#111;
}
.r-btn {
width: 30px;
height: 20px;
line-height: 20px;
background-color: #fff;
border-radius: 2px;
cursor: pointer;
}
.r-btn:hover {
opacity: .9;
}
.r-div {
text-align: center;
}
`
domStyle.appendChild(document.createTextNode(cssStyle));
domHead.appendChild(domStyle);
// html
let domBody = document.body;
let rbtn = document.createElement('div');
rbtn.setAttribute('class', 'recorder');
rbtn.innerHTML = `<div class="r-div r-btn">开始</div><div class="r-div r-time"></div>`;
domBody.appendChild(rbtn);
// js
let btn = document.querySelector('.r-btn');
btn.addEventListener('click', function () {
if (this.innerText === '开始') {
rstart()
} else {
rstop()
}
})
let timeOut;
let mediaRecorder;
let interval;
function rstart() {
btn.innerText = '结束';
// 计算时间
let time = 0;
let domTime = document.querySelector('.r-time');
domTime.innerText = '0s';
timeOut = setInterval(() => {
time++;
let text = `${time}s`;
if (time > 60 && time < 3600) {
text = `${parseInt(time / 60)}m${time % 60}s`;
}
domTime.innerText = text
}, 1000)
// 录制
const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
? "video/webm; codecs=vp9"
: "video/webm";
mediaRecorder = new MediaRecorder(video.captureStream(), {
mimeType: mime
})
let chunks = [];
mediaRecorder.addEventListener('stop', function () {
btn.innerText = '开始';
clearInterval(timeOut);
clearInterval(interval);
document.querySelector('.r-time').innerText = '';
mediaRecorder = null;
let blob = new Blob(chunks, {
type: chunks[0].type
})
let url = URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = `${document.title}.mp4`;
a.click();
URL.revokeObjectURL(url);
})
mediaRecorder.addEventListener('dataavailable', function (e) {
chunks.push(e.data)
})
mediaRecorder.start();
interval = setInterval(() => {
mediaRecorder.requestData();
}, 5000)
}
function rstop() {
mediaRecorder.stop();
}
}
})();
三、演示
1.随便打开一个含有视频的网页,脚本会自动检测是否支持,支持的话,左边会显示一个“开始”的按钮
2.点击按钮,则开始录制
3.再次点击按钮,则录屏结束
代码有待优化,仅供参考!