实现web前端录屏并下载到本地(利用RecorderRTC.js)

直接上源码,我的代码借鉴了这个老哥用Vue.js写的https://blog.csdn.net/blueXh/article/details/88955821

html:

    
    
    
    
    


    录屏 
    停止录屏
    
    
    

index.js:

        let video = document.getElementById("video");
        let videoStart = false;
        let recorder;

        function invokeGetDisplayMedia(success, error) {
                let displaymediastreamconstraints = {
                    video: {
                        displaySurface: 'monitor', // monitor, window, application, browser
                        logicalSurface: true,
                        cursor: 'always' // never, always, motion
                    }
                };
                // above constraints are NOT supported YET
                // that's why overridnig them
                displaymediastreamconstraints = {
                    video: true
                };
                if (navigator.mediaDevices.getDisplayMedia) {
                    navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
                }
                else {
                    navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
                }
        }
        function captureScreen(callback) {
                this.invokeGetDisplayMedia((screen) => {
                    this.addStreamStopListener(screen, () => {
                       //
                    });
                    callback(screen);
                }, function (error) {
                    console.error(error);
                    alert('Unable to capture your screen. Please check console logs.\n' + error);
                });
        }
        function addStreamStopListener(stream, callback) {
                stream.addEventListener('ended', function () {
                    callback();
                    callback = function () { };
                }, false);
                stream.addEventListener('inactive', function () {
                    callback();
                    callback = function () { };
                }, false);
                stream.getTracks().forEach(function (track) {
                    track.addEventListener('ended', function () {
                        callback();
                        callback = function () { };
                    }, false);
                    track.addEventListener('inactive', function () {
                        callback();
                        callback = function () { };
                    }, false);
                });
         }
         function startRecording() {
               captureScreen(screen=>{
                    video.srcObject = screen;
                    recorder = RecordRTC(screen, {
                        type: 'video',
                        mimeType: 'video / webm; codecs = h264',
                    });
                    recorder.startRecording();
                    // release screen on stopRecording
                    recorder.screen = screen;
                    videoStart = true;
                });
          }
          //结束时下载到本地
         function stopRecordingCallback() {
                video.src = video.srcObject = null;
                video.src = URL.createObjectURL(recorder.getBlob());
                console.log(video.src);
                let downloadLink = document.createElement('a');
                downloadLink.href = URL.createObjectURL(recorder.getBlob());
                downloadLink.download ="录屏.mp4";
                downloadLink.click();
                recorder.screen.stop();
                recorder.destroy();
                recorder = null;
                videoStart = false;


         }
         function stopRecording() {
                recorder.stopRecording(this.stopRecordingCallback);
         }
    

缺点是视频无声音，而且下载的视频可能会因为编码格式的问题本地无法播放，不过在网页的video上和腾讯视频打开都能播放，但已经足够了，对于声音的话我的想法是同时录制视频和音频，然后将它们进行合并，你们有什么好的想法？