canvas录屏

function piCanMediaRecorded(canvas)
{
    if (typeof window.MediaRecorder !== 'function' || typeof canvas.captureStream !== 'function') {
        return false;
    }
    return true;
}

function piCreateMediaRecorder(isRecordingCallback, canvas)
{
    if (piCanMediaRecorded(canvas) == false)
    {
        return null;
    }

    var options = { audioBitsPerSecond : 0, videoBitsPerSecond : 8000000 };
	     if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) options.mimeType = 'video/webm;codecs=h264';
    else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9' )) options.mimeType = 'video/webm;codecs=vp9';
    else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8' )) options.mimeType = 'video/webm;codecs=vp8';
    else                                                              options.mimeType = 'video/webm;';

    var mediaRecorder = new MediaRecorder(canvas.captureStream(), options);
    var chunks = [];

    mediaRecorder.ondataavailable = function(e)
    {
        if (e.data.size > 0)
        {
            chunks.push(e.data);
        }
    };

    mediaRecorder.onstart = function(){
        isRecordingCallback( true );
    };

    mediaRecorder.onstop = function()
    {
         isRecordingCallback( false );
         let blob     = new Blob(chunks, {type: "video/webm"});
         chunks       = [];
         let videoURL = window.URL.createObjectURL(blob);
         let url      = window.URL.createObjectURL(blob);
         let a        = document.createElement("a");
         document.body.appendChild(a);
         a.style      = "display: none";
         a.href       = url;
         a.download   = "https://www.abc.com/view/capture.webm";
         a.click();
         window.URL.revokeObjectURL(url);
     };

    return mediaRecorder;
}

调用方法

 piCreateMediaRecorder(function(b){console.log(b)},canvasele)