点击页面捕获和录制按钮，进行录屏
// ==UserScript==
// @name 录屏
// @namespace https://blog.csdn.net/mukes
// @version 0.0.1
// @description 点击页面捕获和录制按钮，进行录屏
// @author zhansheng
// @include *.100bm.cn
// @include *.blog.csdn.net/article/details/*
// ==/UserScript==
(function() {
'use strict';
let videoBuffer = []
let mediaRecorder
let recording = false
async function getMediaStream(stream) {
window.$stream = stream
}
async function startCapture(displayMediaOptions) {
let captureStream = null;
try {
captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
} catch (err) {
console.error("Error: " + err);
}
return captureStream;
}
async function start() {
if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
console.log('getUserMedia is not supported')
} else {
const displayMediaOptions = {
video: true,
audio: false,
}
let captureStream = await startCapture(displayMediaOptions)
await getMediaStream(captureStream)
}
}
function handleDataAvailable(e) {
if (e && e.data && e.data.size > 0) {
videoBuffer.push(e.data)
}
}
async function record(even) {
let $target = even.target
if (recording) {
stopRecord()
$target.innerText = '录制'
} else {
startRecord()
}
}
function startRecord() {
videoBuffer = []
const options = {
mimeType: 'video/webm; codecs = vp8',
}
if(!window.$stream){
alert('请先捕获屏幕')
return
}
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.error('${options.mimeType} is not supported!')
return
}
try {
mediaRecorder = new MediaRecorder(window.$stream, options)
} catch (e) {
console.error('Failed to create MediaRecorder:', e)
return
}
mediaRecorder.ondataavailable = handleDataAvailable
mediaRecorder.start(10)
recording = true
document.querySelector("#luzhi").innerText = '结束'
}
function stopRecord() {
mediaRecorder.stop()
recording = false
downRecord()
}
// 下载录制
function downRecord() {
const blob = new Blob(videoBuffer, { type: 'video/webm' })
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
const fileName = new Date().toLocaleString()
a.href = url
a.style.display = 'none'
a.download = `${fileName}.mp4`
a.click()
}
function init() {
// js 构造相关按钮
// 构造 开始捕获屏幕按钮
let button_start = document.createElement('div')
button_start.style.position = 'absolute'
button_start.style.top = '0px'
button_start.style.left = '0px'
button_start.style.zIndex = 999
button_start.style.width = '50px'
button_start.style.height = '50px'
button_start.style.borderRadius = '50%'
button_start.style.background = 'pink'
button_start.innerText = '捕获'
button_start.style.textAlign = 'center'
button_start.style.lineHeight = '50px'
button_start.style.fontSize = '15px'
button_start.setAttribute('id', 'start')
// 构造 录制(结束)按钮
let button_luzhi = document.createElement('div')
button_luzhi.style.position = 'absolute'
button_luzhi.style.top = '80px'
button_luzhi.style.left = '0px'
button_luzhi.style.zIndex = 999
button_luzhi.style.width = '50px'
button_luzhi.style.height = '50px'
button_luzhi.style.borderRadius = '50%'
button_luzhi.style.background = 'blue'
button_luzhi.innerText = '录制'
button_luzhi.style.textAlign = 'center'
button_luzhi.style.lineHeight = '50px'
button_luzhi.style.fontSize = '15px'
button_luzhi.setAttribute('id', 'luzhi')
document.body.appendChild(button_start)
document.body.appendChild(button_luzhi)
document.querySelector("#start").addEventListener('click', start)
document.querySelector("#luzhi").addEventListener("click", record)
}
init()
})(); //(function(){})() 表示该函数立即执行