前端實現視頻錄制

需求：pc端實現一個用戶操作錄屏的功能(可不考慮ie)
思路：1.獲取視頻流，2.轉為視頻 3.生成url下載
1.navigator下有個mediaDevices屬性，注意由於WebRTC 在chrome下要求https，所以本地開發時候建議把域名改成localhost，或者更改chrome配置項(具體網上查找)，
如果是http環境，navigator下沒有這個屬性
這個屬性下有四個方法，我們來分別看下
1.enumerateDevices：請求一個可用的媒體輸入和輸出設備的列表，例如麥克風，攝像機，耳機設備等
2.getDisplayMedia：獲取用戶選擇和授權捕獲展示的內容或部分內容（如一個窗口）
3.getSupportedConstraints：獲取客戶端所支持的約束屬性（如幀率，窗口大小）。
4.getUserMedia：申請用戶輸入設備權限，如果訪問用戶攝像頭時候會用，
這幾個方法返回都是promise，

第一步 通過

const res = await navigator.mediaDevices.getDisplayMedia(constraints)

成功獲取到視頻流 stream
第二步 視頻流轉為視頻，需要
MediaRecorder 它是個構造器，第一個參數是stream，第二個參數是配置項，具體配置項如下

代碼如下：

Media = new MediaRecorder(res, { mineType: 'video/mp4' })

Media.start() 開始錄制

錄制成功后，第三步，把數據，生成url

MediaRecorder實例有個ondataavailable 這個事件，當視頻流停止錄制時候，進行視頻流數據處理，數據格式是blob
代碼如下

 const data = []    
 Media.ondataavailable = function (e) {  
   data.push(e.data)
  }   　　

最后把data數據生成url

    Media.onstop = function () {
        const url = URL.createObjectURL(new Blob(data, { mineType: 'video/mp4' }))
     document.getElementById('down').setAttribute('href', url)
     document.getElementById('video').setAttribute('src', url);
}