Greasy Fork

录屏

代码是网上拿来的，用作自己使用

当前为 2022-05-29 提交的版本，查看 最新版本。

// ==UserScript==
// @name         录屏
// @namespace    arale
// @version      0.1
// @description  代码是网上拿来的，用作自己使用
// @author       Gj
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=0.1
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    const body = document.querySelector("body")
        // 创建一个button
        const btn = document.createElement('button')
        btn.innerText = '开始录制'
        btn.style.cssText = `
            position: fixed;
            z-index: 999999;
            top: 10px;
            left: 10px;
            background-color: #d9534f;
            border-color: #d43f3a;
            border: none;
            padding: 4px 5px;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
            font-size: 12px;`
        body.appendChild(btn)

        btn.addEventListener("click", async function () {
            let stream = await navigator.mediaDevices.getDisplayMedia({
                video: true
            })

            // 需要更好的浏览器支持
            const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
                ? "video/webm; codecs=vp9"
                : "video/webm"
            let mediaRecorder = new MediaRecorder(stream, {
                mimeType: mime
            })

            let chunks = []
            mediaRecorder.addEventListener('dataavailable', function (e) {
                chunks.push(e.data)
            })

            mediaRecorder.addEventListener('stop', function () {
                let blob = new Blob(chunks, {
                    type: chunks[0].type
                })
                let url = URL.createObjectURL(blob)

                let a = document.createElement('a')
                a.href = url
                a.download = `video_${Date.now()}.mp4`
                a.click()
            })

            // 必须手动启动
            mediaRecorder.start()
        })
})();