线上预览地址：https://deec.cc
typedoc地址：https://jianli.pnote.net/record/docs
1. 背景
随着线上会议以及在线协作的工作模式呈现爆发式增长，WebRTC的跨平台应用场景越来越多，例如屏幕共享、音视频会议、会议录制、远程教学、远程面试等
2. 目标
- 简化
mediaDevices和MediaRecorder相关API的调用方式 - 支持录制时长的计算
- 支持屏幕和麦克风同时录制
- 支持导出录制文件，支持
h264、vp8/9，例如video/mp4、audio/wav、audio/ogg等常见格式 - 录制前需支持分辨率选择、麦克风开关、摄像头切换、屏幕选择等
- 录制后的媒体流需支持去除视频背景、视频过渡效果、视频转场效果等
- 通过
IndexedDB离线存储媒体文件 - 使用
WebAssembly支持更多的编码类型
3. 实现思路
-
封装摄像头媒体流、屏幕媒体流、录制的API
-
预加载摄像头和麦克风相关权限和媒体设备列表
-
合并摄像头的音频流到屏幕媒体流中
-
使用
requestAnimationFrame精确计算录制时长，包括暂停录制、重新录制等情况 -
根据
mimeType适配更多编码类型，例如video/mp4、audio/wav、audio/ogg等常见格式 -
处理多视频流，如屏幕流中显示摄像头画面、去除视频背景、视频过渡效果、视频转场效果等
-
音频流的回声处理和麦克风降噪
4. 结构图
5. 目录结构
├── docs
│ ├── assets
│ │ ├── highlight.css
│ │ ├── icons.css
│ │ ├── icons.png
│ │ ├── icons@2x.png
│ │ ├── main.js
│ │ ├── search.js
│ │ ├── style.css
│ │ ├── widgets.png
│ │ └── widgets@2x.png
│ ├── classes
│ │ ├── Camera.html
│ │ └── Recorder.html
│ ├── enums
│ │ ├── CameraType.html
│ │ ├── PhysicalPosition.html
│ │ ├── STATUS.html
│ │ └── ShapeKind.html
│ ├── .nojekyll
│ ├── index.html
│ └── modules.html
├── example
│ ├── index.html
│ └── index.ts
├── lib # build后的,包含声明文件
│ ├── utils
│ │ ├── camera.d.ts
│ │ ├── canvas.d.ts
│ │ └── utils.d.ts
│ ├── enums.d.ts
│ ├── index.d.ts
│ ├── index.js
│ ├── interfaces.d.ts
│ ├── media.d.ts
│ ├── recorder.d.ts
│ └── storage.d.ts
├── src
│ ├── utils
│ │ ├── camera.ts
│ │ ├── canvas.ts
│ │ └── utils.ts
│ ├── enums.ts
│ ├── index.ts
│ ├── interfaces.ts
│ ├── media.ts
│ ├── recorder.ts
│ ├── storage.ts
│ └── type.d.ts
├── webpack
│ ├── build.config.js
│ └── dev.config.js
├── .gitignore
├── .prettierignore
├── TODO.md
├── package.json
└── tsconfig.json
