以下内容参考自网络
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="left">
<div id="startButton" class="button">Start</div>
<h2>Preview</h2>
<div class="video"><video id="preview" width="100%" height="auto" autoplay muted></video></div>
</div>
<div class="right">
<div class="rightBtn">
<div id="stopButton" class="button">Stop</div>
<a id="downloadButton" class="button">Download</a>
</div>
<h2>Recording</h2>
<div class="video"><video id="recording" width="160" height="120" controls></video></div>
</div>
<script src="ffmpeg.min.js"></script>
<script src="ffmpeg-core.js"></script>
<script>
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>
