利用浏览器录屏

以下内容参考自网络

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="startButton" class="button">Start</div>

<h2>Preview</h2>

</div>

<a id="downloadButton" class="button">Download</a>

</div>

<h2>Recording</h2>

</div>

let preview = document.getElementById("preview");

let recording = document.getElementById("recording");

let startButton = document.getElementById("startButton");

let stopButton = document.getElementById("stopButton");

let downloadButton = document.getElementById("downloadButton");

let dataChunks = [];

let recorder;

const { createFFmpeg, fetchFile } = FFmpeg;

//const message = document.getElementById('message');

const ffmpeg = createFFmpeg({

log: true,

//progress: ({ ratio }) => {

// message.innerHTML = `完成率: ${(ratio * 100.0).toFixed(2)}%`;

//},

});

// 开始录制

function startRecording(stream, lengthInMS) {

recorder = new MediaRecorder(stream);

recorder.ondataavailable = (event) => {

let data = event.data;

dataChunks.push(data);

};

recorder.start(1000);

console.log(recorder.state + " start to recording .....");

}

stopButton.addEventListener("click", () => {

// close the recording

//preview.srcObject.getTracks().forEach((track) => track.stop());

recorder.stop();

// Play recorded video

let recordedBlob = new Blob(dataChunks, { type: "video/webm" });

recording.src = URL.createObjectURL(recordedBlob);

// Save download video， click the download button， you can download it

downloadButton.href = recording.src;

downloadButton.download = "RecordedVideo.webm";

});

startButton.addEventListener("click", () => {

// get the stream

navigator.mediaDevices

//.getUserMedia({

.getDisplayMedia({

audio: true,

video: true,

})

.then((stream) => {

// set the stream to left video

preview.srcObject = stream;

// set the stream to <a> for download

downloadButton.href = stream;

// captureStream: which is streaming a real-time capture of the content being rendered in the media element.

// A MediaStream object which can be used as a source for audio or video data by other media

preview.captureStream =

preview.captureStream || preview.mozCaptureStream;

startRecording(preview.captureStream());

})

.catch((err) => {

console.log("recording error: ", err);

});

</script>

</body>

</html>