前端实现屏幕完整录制并保存

实现功能:

前端实现屏幕录制并保存，提供个方案

写在前面: 考虑兼容，目前移动端直接全灭!

实现基础:

• MediaRecorder： MediaRecorder() 构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象
• MediaDevices.getDisplayMedia：getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）在一个 MediaStream 里.
• Blob
• File

先上代码:

        async function startCapture() {
            let stream = await navigator.mediaDevices.getDisplayMedia({
              video: {
                    cursor: "never"
                },
                audio: false
              }); // 请求录制 返回流 （MediaStream）
            mediaRecorder = new MediaRecorder(stream);  // 传入流对象 
            mediaRecorder.start();  // 开始录制

            // 注册结束事件
            mediaRecorder.ondataavailable = function (e) {
                let blob = new Blob([e.data], { 'type': 'audio/ogg; codecs=opus' });
                // 新窗口打开刚刚录制的视频
                let url = URL.createObjectURL(blob);
                window.open(url, 'blank_')

                // 生成视频文件对象,可以用来上传保存
                files = new File([blob], new Date().getTime(), { type: 'audio/ogg; codecs=opus' })
                // .....
            }
        }

        function stopCapture() {
            let tracks = stream.getTracks();
            mediaRecorder.stop();  // 结束录制 触发事件回调
            tracks.forEach(track => track.stop());  // 结束流
        }

简单说明：

主要是对MediaRecorder以及MediaDevices.getDisplayMedia以及相关对象 api的使用（具体的看文档）。 MediaDevices.getDisplayMedia 授权捕获用户界面，生成流；
MediaRecorder 保存流数据，实现录制以及后续操作；
其他说明看注释呀~~~~~~~~~~