当前位置：首页 > news >正文

利用浏览器录屏

news 2025/9/18 16:21:45

以下内容参考自网络

<!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>

利用浏览器录屏

相关文章：

利用浏览器录屏

python中的map、split、join函数的作用 =＞ ACM输入输出流

Ubuntu20.04下安装向日葵

常用并发设计模式

Redis Search系列 - 第七讲 Windows（CygWin）编译Friso

利用Docker容器技术部署发布web应用程序

[免费]SpringBoot+Vue毕业设计论文管理系统【论文+源码+SQL脚本】

BFS 算法专题（五）：BFS 解决拓扑排序

【Mysql】开窗聚合函数----SUM,AVG, MIN,MAX

java操作doc——java利用Aspose.Words操作Word文档并动态设置单元格合并

探索 .NET 9 控制台应用中的 LiteDB 异步 CRUD 操作

《进程隔离机制：C++多进程编程安全的坚固堡垒》

构建无障碍的数字世界：深入探讨Web可访问性指南

跨境出海安全：如何防止PayPal账户被风控？

学习日记_20241123_聚类方法（MeanShift）

AI编程和AI绘画哪个更适合创业？

macOS 无法安装第三方app，启用任何来源的方法

关于SpringBoot集成Kafka

4.STM32之通信接口《精讲》之IIC通信---软件实现IIC《深入浅出》面试必备！

6G通信技术对比5G有哪些不同？

基于大模型的 UI 自动化系统

【磁盘】每天掌握一个Linux命令 - iostat

【论文笔记】若干矿井粉尘检测算法概述

Java面试专项一-准备篇

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

代码规范和架构【立芯理论一】（2025.06.08）

MyBatis中关于缓存的理解

Ubuntu系统多网卡多相机IP设置方法

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）