【音视频工具】前端屏幕录制工具 + 录制＜video＞标签内容

news2024/11/16 13:57:33

一、录制的实现思路

1.开始录制、停止录制、下载视频

2.Blob介绍

3.概念

var mediaRecord //用于录制视频
var mediaStream //视频流
var videoBuffer = [] //保存的视频数据

二、屏幕录制工具

下载地址：
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en

https://www.tampermonkey.net/ https://greasyfork.org/en

三、录制标签内容

1.诉求

网页版本的推、拉流页面，含有标签，屏幕录制需要处理很多边角，选择直接录制流内容本身

2.可行性

写一个脚本，作为第三方去监控录制视频流。🉑️
Tampermonkey

3.难点

首先获取到标签

解决：

在这里插入图片描述

如何触发录制标签？

解决：

网页控制台添加按钮入口，给予点击事件
Tampermonkey插件控制录制脚本

如何存储视频流？如何download本地？

解决：

代码逻辑

要创建一个Canvas，视频标签本身不具备记录图像的功能，所以我们需要通过Canvas来实现这个功能
创建一个绑定到CanvasStream的记录器，以便记录器可以触发画布绘制的任何东西的回调
创建一个计时器，通过CanvasContext连续捕捉视频选项卡，然后将其绘制到画布上
创建一个字节数组，只要画布捕捉到新的屏幕，它就会触发MediaRecorder数据回调，将帧数据获取到数组中
每个帧数据本身就是一个Blob[]数据结构。所有的Blob数组组合在一起产生一个最终的Blob，这是录制的视频数据

脚本编写

// ==UserScript==
// @name         录制YouTube
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.youtube.com/watch?v=vyfJgJBB3Vk
// @icon         https://www.google.com/s2/favicons?sz=64&domain=undefined.localhost
// @grant        none
// ==/UserScript==


(function() {
    'use strict';
    //alert("HHH")
    //document.body.appendChild(document.createElement("canvas"));
    var mc = document.createElement("canvas");
    mc.id="canvas";
    mc.style.cssText="position:absolute;top:0;left:0;z-index:1000000";
    mc.width='720';
    mc.height='540';
    document.body.appendChild(mc);

    var startbtn = document.createElement("button");
    startbtn.id="button-start";
    startbtn.innerHTML="开始录制";
    startbtn.style.cssText="position:absolute;top:120px;left:0;z-index:1000000";
    document.body.appendChild(startbtn);

    var stopbtn = document.createElement("button");
    stopbtn.id="button-stop";
    stopbtn.innerHTML="结束录制"
    stopbtn.style.cssText="position:absolute;top:150px;left:0;z-index:1000000";
    document.body.appendChild(stopbtn);


    let canvasElement = document.querySelector("#canvas");
    let startButton = document.querySelector("#button-start");
    let stopButton = document.querySelector("#button-stop");

    const videoWidth = 720;
    const videoHeight = 540;
    const frameRate = 60;
    const encodeType = "video/webm;codecs=vp8";

    let chunks = [];

    let frameId = null;

    //设置画布背景
    const canvasContext = canvasElement.getContext("2d");
    canvasContext.fillStyle = "deepskyblue";
    canvasContext.fillRect(0, 0, canvasElement.width, canvasElement.height);

    //创建MediaRecorder，设置媒体参数
    const stream = canvasElement.captureStream(frameRate);
    const recorder = new MediaRecorder(stream, {
        mimeType: encodeType
    });

    //收集录制数据
    recorder.ondataavailable = e => {
        chunks.push(e.data);
    };

    //按钮事件
    startButton.disabled = false;
    stopButton.disabled = true;
    startButton.onclick = e => {
        startButton.disabled = true;
        stopButton.disabled = false;
        recorder.start(10);
        drawFrame();
    };
    stopButton.onclick = e => {
        startButton.disabled = false;
        stopButton.disabled = true;
        recorder.stop();
        cancelAnimationFrame(frameId);
        download();
    };

    //播放视频
    function drawFrame() {
        let videoElement = document.getElementsByTagName("video")[0];
        console.log("videoElement",videoElement);
        canvasContext.drawImage(videoElement, 0, 0, videoWidth, videoHeight);
        frameId = requestAnimationFrame(drawFrame);
    }
     //下载录制内容
     function download() {
    let blob = new Blob(chunks);
    let url = window.URL.createObjectURL(blob);
    let link = document.createElement("a");
    link.href = url;
    link.download = new Date().getTime() + ".mp4";
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    link.remove();

}
})();