一、浏览器提供了navigator.mediaDevices.getDisplayMedia 和 navigator.mediaDevices.getUserMedia两个API。
navigator.mediaDevices.getDisplayMedia是获取屏幕的流navigator.mediaDevices.getUserMedia是获取和用户相关的流，也就是麦克风、摄像头这些流。
获取到流之后设置到video容器的 srcObject 属性上就可以实现播放。
如果想要录制视频，需要用 MediaRecorder 的 api，它可以监听流中的数据，我们可以把获取到的数据保存到数组中。然后回放的时候设置到另一个视频容器的 srcObject 属性就可以了。
下载也是基于 MediaRecorder 录制的数据，转成 blob 后通过 a 标签触发下载
2、相关代码：
<div>
<video autoplay id="player"></video>
<video id="recordPlayer"></video>
</div>
<div>
<button id="startScreenBtn">开启录屏</button>
<button id="startCameraBtn">开启摄像头</button>
<button id="replyBtn">回放</button>
<button id="downloadBtn">下载</button>
</div>
接下来，给开启录屏和开启摄像头按钮添加点击事件，两者都是为了开启录制，只不过方式不同，我们可以根据传入不同的形参去实现不同的操作。
javascript
复制代码
let blobs = [], mediaRecorder;
startScreenBtn.addEventListener('click', () => {
record('screen');
});
startCameraBtn.addEventListener('click', () => {
record('camera');
});
async function record(recordType) {
// getDisplayMedia是获取屏幕数据，getUserMedia是获取麦克风、摄像头数据
const getMediaMethod = recordType === 'screen' ? 'getDisplayMedia' : 'getUserMedia';
// 获取相关数据为异步任务
// 可以指定下视频宽高和帧率等参数
const stream = await navigator.mediaDevices[getMediaMethod]({
video: {
width: 500,
height: 300,
frameRate: 20
}
});
// 把返回的流设置到video容器的srcObject属性上，就可以实时看到对应的音视频
player.srcObject = stream;
// 录制需要用到MediaRecorder
// 我们需要把上面获取到的流stream传入，并且配置类型
mediaRecorder = new MediaRecorder(stream, {
mimeType: 'video/webm'
});
// 监听dataavailable事件，在其中把获取到的数据保存到blobs数组中
mediaRecorder.ondataavailable = (e) => {
blobs.push(e.data);
};
// 然后调用start方法，开启录制。start参数是分割的大小，传入100代表每100ms保存一次数据
mediaRecorder.start(100);
}
3、下载实现：
downloadBtn.addEventListener('click', () => { const blob = new Blob(blobs, { type: 'video/webm' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'record.webm'; a.style.display = 'none'; a.click(); });
