>之前在无意中接触到一个个 WebRTC 的语音网站 [speaker.app](https://speaker.app/)，感觉还蛮有意思的，而且还是开源免费的，没想到他们还支持屏幕分享，当时我就惊了，浏览器现在已经发展的什么功能几乎都有了，不愧为 'chrome os'
>后来我也去MDN看了下相关接口，这篇文章就记录下如何简单实现屏幕录制功能。
## 先看效果
## 获取屏幕内容
我们可以通过 [MediaDevices.getDisplayMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia)来获取屏幕内容，浏览器会弹出一个窗口，让用户选择要选择的窗口
> 注意移动端目前普遍是不支持的
```javascript
async function startRecord() {
let mediaStream = await navigator.mediaDevices.getDisplayMedia()
}
//或
function startRecord() {
navigator.mediaDevices.getDisplayMedia().then(mediaStram=>{
//其他逻辑
})
}
//可以通过下面方法显示预览
let videoEle = document.getElementById('video') //获取视频元素
videoEle.srcObject = mediaStram //设置视频元素流
```
用户选择需要录制的屏幕后后返回一个 [MediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream),我们可以把这个媒体流设置给 `video`标签来实现预览
## 录制媒体流
获取到 `MediaStream`之后我们就可以进行录制了，这里可以使用 [MediaRecorder](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder) 来进行录制
例：
```javascript
var mediaRecorder = new MediaRecorder(mediaStream)
//或者加上以上其他配置
var mediaRecorder = new MediaRecorder(mediaStream,{
audioBitsPerSecond: 128000, //音频码率
videoBitsPerSecond: 2500000,//视频码率
mimeType: 'video/webm' //录制格式，视不同浏览器而定
})
```
使用 `MediaRecorder.ondataavailable` 回调来保存录制的数据,当 `MediaRecorder.requestData()` `MediaRecorder.stop()` 被显示调用，或者达到 `start` 方法设置间隔时，`ondataavailable` 回调会被调用
例
```javascript
let chunks = []
mediaRecorder.ondataavailable = function(e) {
//这里直接将数据写入了内存，如果录制长视频应该写入到别的地方
chunks.push(e.data);
}
```
开始录制
```javascript
mediaRecorder.start()
//或者
mediaRecorder.start(1000) //每隔1s会触发一次 ondataavailable回调
```
### 保存数据
如果是上面例子直接把数据保存到内存，可以用下面的方法保存录制的数据
```javascript
function download() {
//videoBuffer为视频数据
let blob = new Blob(videoBuffer, {
type: "video/webm"
});
let url = URL.createObjectURL(blob);
let a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "test.webm"; //下载的文件名
a.click();
window.URL.revokeObjectURL(url);
}
```
<br/>
<br/>
<br/>
开源 [demo](https://github.com/thetbw/web-screen-recorder-demo), [预览](https://thetbw.github.io/web-screen-recorder-demo/)
这只是一个简单演示，还是有很多的不足之处
* 目前只能录制视频
* webm的录制格式问题，录制其他格式还需要琢磨
* 录制的时候应该写入其他地方
以后如果有空了解的话可能回去想下怎么解决，到时候再更新这篇文章。
JS实现屏幕录制
