只需简单几步，教你在 Web 端实现录屏功能

背景

有时候会需要使用到录屏功能，但是在 Window 10上要找录屏软件很麻烦，有很多软件混杂了很多无用的功能，不够纯净。也有用过 PPT 上面的屏幕录制功能，勉强够用，但是不够方便。

目前在 Web 端录屏功能主要是利用 Canvas 实现的。而刚好最近在学习 WebRTC，用于毕业设计，于是催生了利用 WebRTC 制作该录屏工具的想法。

感兴趣的同学，可以关注下我的毕业设计：基于 WebRTC 的远程面试网站，Github 地址

简介

本项目是基于 WebRTC 和 Vue 实现的 Web 端录屏工具，支持屏幕分享+音频录制，并导出为 mp4 文件。

WebRTC 是一项用于实时音视频通信的技术，利用该技术，你可以方便快捷地实现视频聊天的功能，而本文章将用其屏幕分享的能力，实现 Web 端录屏功能。

• 预览地址：rychou.github.io/screen-shar…
• Github 仓库地址：github.com/Rychou/scre…

项目启动

git clone https://github.com/Rychou/screen-share-recorder.git

cd screen-share-recorder

npm install

npm run serve

原理说明

主要用到了以下三个接口：

• WebRTC 获取麦克风设备接口 getUserMedia
• WebRTC 屏幕分享接口 getDisplayMedia
• 媒体录制接口 MediaRecorder

实现的主要流程：

1. 开启屏幕分享。调用 getDisplayMedia 接口获取屏幕分享的 MediaStream，即可获取到屏幕分享流，可将此流放到 video 标签中进行播放预览。
2. 获取音频 Track。第一步中获取到的屏幕分享流是不支持麦克风的，所以如果需要导出有音频的录屏文件，则需要调用 getUserMedia 接口获取麦克风的音频 Track。
3. 添加音频 Track。将第二步获取到的音频 Track，调用 MediaStream.addTrack 接口，添加到第一步获取到的屏幕分享 MediaStream 中，这样我们就得到了具备音频录制功能的屏幕分享 MediaStream。
4. 使用媒体录制接口进行录制。利用 MediaRecorder，可以录制第三部得到的 MediaStream。
5. 导出为 MP4 文件。

主要逻辑都在 App.vue 中实现了，欢迎大家参考。

License

MIT