交作业：https://codepen.io/vicksiyi/pen/oKGJzL

// 判断是否为PC端的Chrome
    let ifMachine = (() => {
        var ua = navigator.userAgent,
            isWindowsPhone = /(?:Windows Phone)/.test(ua),
            isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
            isAndroid = /(?:Android)/.test(ua),
            isFireFox = /(?:Firefox)/.test(ua),
            isChrome = /(?:Chrome|CriOS)/.test(ua),
            isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
            isPhone = /(?:iPhone)/.test(ua) && !isTablet,
            isPc = !isPhone && !isAndroid && !isSymbian;
        return {
            isChrome: isChrome,
            isPc: isPc
        };
    })();

//第二部分

function playbackVideo(){
    blob = new Blob(buffer, {type:'video/webm'});
    rePlayVideo.src = window.URL.createObjectURL(blob);
    rePlayVideo.srcObject = null;
    rePlayVideo.constructor = true;
    rePlayVideo.play();
}

function download(){
    blob = new Blob(buffer, {type:'video/webm'});
    let a = document.createElement('a');
    a.href = window.URL.createObjectURL(blob);
    a.download = 'download.webm';
    a.click();
    a.remove();
}

recordingButton.addEventListener('click', function () {
    recordingVideo();
});

playbackButton.addEventListener('click', function () {
    playbackVideo();
});

downloadButton.addEventListener('click', function () {
    download();
});

init();

//第一部分代码

let videoTypes = "video/webm\;codecs=vp8";
let userMediaSetting = { video: true };
let playVideo = document.querySelector('video#play');
let rePlayVideo = document.querySelector('video#replay');
let recordingButton = document.querySelector('button#recording');
let playbackButton = document.querySelector('button#playback');
let downloadButton = document.querySelector('button#download');
let buffer;
let mediaRecorder;
let blob;

function init() {
    if (!(mediaSupport() && mediaRecorderSupport()))
        return;
    getVideo();
}

function mediaSupport() {
    if (!navigator.mediaDevices) {
        console.log('不支持 mediaDevices');
        return false;
    }
    console.log('支持 mediaDevices');
    return true;
}

function mediaRecorderSupport() {
    if (!MediaRecorder.isTypeSupported(videoTypes)) {
        console.log(`不支持 ${videoTypes}`);
        return false;
    }
    console.log(`支持 ${videoTypes}`);
    return true;
}

function getVideo() {
    navigator.mediaDevices.getDisplayMedia(userMediaSetting)
        .then(handleGetVideo)
        .catch(handleGetVideoError)
}

function handleGetVideo(mediaStream) {
    playVideo.srcObject = mediaStream;
}

function handleGetVideoError(err) {
    console.log(`获取视频输入出错: ${err.name} : ${err.message}`)
}

function recordingVideo() {
    if ( typeof(mediaRecorder) != "undefined" && mediaRecorder.state === 'recording') {
        console.log('已开始录制,请勿重复录制');
        return;
    }
    console.log('开始录制');
    buffer = [];
    let options = {
        mimeType : videoTypes
    };

    mediaRecorder = new MediaRecorder(playVideo.srcObject, options);
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start(10);
}

function handleDataAvailable(d) {
    if (d && d.data && d.data.size > 0) {
        buffer.push(d.data);
    }
}

简单demo

var deskVideo = document.querySelector("video#deskVideo");
function getDeskStream(stream){
    deskVideo.srcObject = stream;
}

// 对采集的数据做一些限制
var constraints = {
    video : {
            width: 1280,
            height: 720,
            frameRate:15,
    },
    audio : false
}

function handleError(err){
    console.log('getUserMedia error:', err);
}

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", "iPad"];
    var flag = true;
    for (var i = 0; i < Agents.length; i++) {
        if (userAgentInfo.indexOf(Agents[i]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
};
// 抓取桌面
function shareDesktop(){
    // 只有在 PC 下才能抓取桌面
    if(IsPC()){
            // 开始捕获桌面数据
            navigator.mediaDevices.getDisplayMedia(constraints)
                    .then(getDeskStream)
                    .catch(handleError);
            return true;
    }
    return false;
}

var buffer;
// 创建录制对象
var mediaRecorder;

function handleDataAvailable(e){
        if(e && e.data && e.data.size > 0){
                buffer.push(e.data);
        }
}

function startRecord(){
        // 定义一个数组，用于缓存桌面数据，最终将数据存储到文件中
        buffer = [];

        var options = {
                mimeType: 'video/webm;codecs=vp8'
        }

        if(!MediaRecorder.isTypeSupported(options.mimeType)){
                console.error(`${options.mimeType} is not supported!`);
                return;
        }

        try{
                // 创建录制对象，用于将桌面数据录制下来
                mediaRecorder = new MediaRecorder(deskVideo.srcObject, options);
        }catch(e){
                console.error('Failed to create MediaRecorder:', e);
                return;
        }
        // 当捕获到桌面数据后，该事件触发
        mediaRecorder.ondataavailable = handleDataAvailable;
        mediaRecorder.start(10);
}
document.querySelector("button#record").onclick = function (){
    startRecord();
}

shareDesktop()