canvas 两个圆相交重叠区域颜色填充_给Canvas录制一个视频

前言

本文Demo，点击这里访问。

说起web前端录像 网页内容,，我们的反映可能是先给页面截屏，再将一帧帧的图像合成视频，截屏的操作则是通过html 2 canvas的方式实现。 如果想要合成流畅的视频，那么就必须截出密集帧图像，这无疑是很消耗性能的。如果有一个原生的API，支持对网页录像就好了！！！

本文介绍的内容包括: - MediaRecoder录制媒体流 - Canvas绘制动画 - 导出录像视频

MediaRecoder

MediaRecoder提供了一系列用于录制媒体(视频音频等)的接口，通过调用其构造函数可以创建一个MediaRecoder实例对象，在new实例对象时传入媒体对象参数，则可以实现对该媒体对象的录音/像。

其中，媒体对象的来源有两类，一类是当前网页上的媒体，可以是video、audio或者canvas元素；另一类是用户的桌面设备，通过navigator.mediaDevices.getUserMedia()可以取得用户的桌面录像录音权限，这一类技术的应用场景有web RTC。这里讨论的是第一类：针对网页内容的录像.

举个例子: 录制video元素的媒体

const mediaStream = $video.captureStream(10) // 获取媒体元素的媒体流对象
mediaRecord = new MediaRecorder(mediaStream, {
     // 实例化录制对象
    videoBitsPerSecond: 8500000, // 比特率
    mimeType: 'video/mp4' // 录屏媒体流文件类型
})
mediaRecord.ondataavailable = (e) => {
     // 接收媒体流数据: Blob类型
    this.chunks.add(e.data)
}

以上仅仅是初始