API理解
MediaDevices.getDisplayMedia()：提示用户去选择和授权捕获展示的内容或部分内容，返回一个 promise 对象，成功后会resolve回调一个 MediaStream 对象。
语法
var displayMedia = navigator.mediaDevices.getDisplayMedia(constraints);
参数：可选的MediaStreamConstraints对象，它指定了返回的MediaStream的要求。有video与audio两个属性，分别控制是否请求视频、音频轨道。
MediaRecorder：用来进行媒体录制的接口, 通过调用 MediaRecorder() 构造方法实例化一个MediaRecorder对象，对指定的 MediaStream 对象进行录制。
语法
new MediaRecorder(stream, [, options]);
**参数：**需要传入两个参数，第一个是stream，也就是我们通过getDisplayMedia拿到的媒体流 displayMedia，第二个是可选参数。主要有mimeType指定录制的是音频还是视频，录制的格式是什么，比如谷歌的音视频格式video/webm, audio/webm, 还可以设置为mp4。
MediaRecorder的方法有很多，常用的有
- MediaRecorder.start(timeslice) 意思是开启录制，timeslice是一个可选参数，如果不设置会存储在一个大的buffer中，如果设置了这个参数就会按照时间段存储数据，比如说10s存储一块数据。
- MediaRecorder.stop() 关闭录制，当停止录制时会触发ondataavailable事件，得到最终的blob数据。
示例代码
https://codesandbox.io/s/screen-recorder-demo-9eopt
参考
- Screen Capture API
- Using the Screen Capture API
- Media Capture and Streams API
- WebRTC API
[getUserMedia()](<https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia>): Capturing media from a camera and/or microphone