前端通过浏览器实现录屏

ok 贴代码 

(async () => {
window.chunks = [];
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start(1000);
mediaRecorder.ondataavailable = (e) => {window.chunks.push(e.data);};
mediaRecorder.onstop = () => {
if (window.chunks.length === 0) return;
const video = new Blob(window.chunks, { type: "video/webm" });
const a = document.createElement("a");
const url = URL.createObjectURL(video);
a.href = url;a.download = "video.webm";
a.click();
URL.revokeObjectURL(url);};
window.stop = () => {console.log("停止");
mediaRecorder.stop();};})();

将代码黏贴到控制台 运行或书签反正能运行就行。录制完毕后 使用window.stop()停止录制。

1.首先拿到视频流

我们只需要视频就好不需要声音.如果需要加上 {video:true,audio:true} 就行。

const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });

2.初始化MediaRecorder

记录视频数据

const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (e) => {window.chunks.push(e.data);};

3.开始记录

mediaRecorder.start(1000);

4.创建视频文件并下载

mediaRecorder.stop函数触发回调。

• 创建一个视频文件 

  const video = new Blob(window.chunks, { type: "video/webm" });
  

• 下载视频文件 
  通过a标签下载

  const url = URL.createObjectURL(video);
  a.href = url;
  a.download = "video.webm";
  a.click();
  URL.revokeObjectURL(url);