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