浏览器录屏工具开发

WebRTC是谷歌于2011年开源的一个音视频处理引擎，可以实时的进行视频数据的采集，也就是说可以做直播，也可以做桌面录屏，桌面分享。使用起来还是比较简单的。

这里我们来开发一个屏幕录制工具。

首先我们在页面中创建一个video标签，用于展示录屏的内容，再创建四个按钮，一个屏幕分享，一个开始录制，一个停止录制，一个下载视频。

<button id="start">屏幕分享</button>
<button id="record">开始录制</button>
<button id="stop">结束录制</button>
<button id="download">下载视频</button>
<video autoplay playsinline id="player"></video>

当点击屏幕分享按钮的时候，通过getDisplayMedia方法来获取桌面的媒体流，这里需要传入一个对象作为配置，对象中可以对video和audio进行设置，值可以是布尔类型也可以是对象类型，这里先设置布尔值，采集视频，不采集音频。

返回值是一个Promise，然后在Promise的then中将流媒体赋值给video标签的srcObject属性就可以了，非常的简单。

document.querySelector('#start').onclick = function() {
   
    if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
   
        navigator.mediaDevices.getDisplayMedia({
   
            video: true,
            audio: false
        }).then((stream) => {
   
            document.querySelector('#player'