SOURCE

const tracks = []; // 媒体数据
const options = {
    mimeType: "video/webm; codecs = vp8", // 媒体格式
};
let mediaRecorder;
// 初始化请求用户授权监控

function init() {
    navigator.mediaDevices.getDisplayMedia().then((stream) => {
        // 对音视流进行操作
        start(stream);
    });
}
// 开始录制方法
function start(stream) {
    // 创建 MediaRecorder 的实例对象，对指定的媒体流进行录制
    mediaRecorder = new MediaRecorder(stream, options);
    // 当生成媒体流数据时触发该事件，回调传参 event 指本次生成处理的媒体数据
    mediaRecorder.ondataavailable = event => {
        console.log(111)
        if (event.data.size > 0) {
            tracks.push(event.data); // 存储媒体数据
        }
    };
    mediaRecorder.start();
    console.log("************开始录制************")
};
// 结束录制方法
function stop() {
    mediaRecorder.stop();
    console.log(tracks, 'tracks')
    console.log("************录制结束************")
}
// 回放录制内容
function replay() {
    const video = document.getElementById("video");
    const blob = new Blob(tracks, { type: "video/webm" });
    video.src = window.URL.createObjectURL(blob);
    video.srcObject = null;
    video.controls = true;
    video.play();
}

  <div style="margin-top: 16px;text-align: center;width: 300px;padding-left: 48px;">
    <button id="btn" onclick="init()">录制</button>
    <button id="btn" onclick="stop()">停止</button>
    <button id="btn" onclick="replay()">播放</button>
  </div>
<video src="" id="video"></video>

#video{
    widows: 200px;
    height:100px;
}