在浏览器中录制任意界面并实现导出、保存与管理

两年前写过一篇文章利用现代浏览器所提供的强大 API 录制，回放并保存任意 web 界面中的用户操作实现了浏览器操作的录制、保存、回放、管理等功能。不过之前的实现是基于rrweb这个项目，限于浏览器本身对于API以及rrweb的限制并不能完美录制 （比如webgl） 所有操作。

作为周末项目没想到也收获了上百的star，期间还有很多人私信使用中的问题。正好今年过年因为疫情留守没回去家，所以把整个项目进行了重构，使用了更强大的API以及更完善的文档。核心API是MediaDevices.getDisplayMedia()，虽然状态是Working Draft，但是各大主流浏览器早就对其进行了实现*（Chrome 72 2019-1 , Firefox 66 2019-3 , Safari 13 2019-9）*。

开始之前还是求一波star：项目地址

预览

预览动态图

初衷

应用场景定在了录屏方便进行debug，所以在实现录屏的同时也提供了上报信息的功能，并且可以导出为字幕与视频同时使用。

特点

不论是库本身还是管理系统的前后端全部 100% TypeScript实现。
因为getDisplayMedia的强大特性，不光可以录制页面本身的内容，同时可以选择录制整个桌面或者其他软件或者某一个标签，同时可以记录音频。
录制本身使用了VFR （可变帧率） 的帧率模式，从而节省资源损耗，录制的体积也变小。
库开发使用了webpack打包为umd，可以单独引入js也可以使用npm。
不再依赖任何第三方库。
库可以脱离管理系统单独使用，可以直接导出本地视频和字幕，使用视频播放器查看，更通用。
数据库方面使用了orm，兼容更多数据库。

支持环境

前端

现代浏览器
管理系统

Node.js (> = 8.9.0)

前端架构

100% TypeScript。
基于webpack打包的umd模式。
网络请求使用Fetch

后端架构

框架使用NestJS
ORM使用TypeORM
管理页面使用Vue 3 + Element Plus

安装

库

使用npm或yarn：

$ npm install op-rec --save
# or
$ yarn add op-rec

直接引入：

<script type="text/javascript" src="//unpkg.com/op-rec@latest"></script>

管理端：

见下面的使用。

使用

前端库

简单使用：

new OpRec();

在页面的右下角可以看到开始录制的按钮，默认录制成功后会下载到本地。

也可以填入管理页面的地址实现管理：

new OpRec({
  url: "http://127.0.0.1:8990",
});

也可以把stream传入video中实时播放：

const or = new OpRec();
or.on("startREC", function (stream) {
  document.querySelector("video").srcObject = stream;
});

也可以启动源码中的示例：
- clone项目到本地：
```
$ git clone https://github.com/liunnn1994/operationRecord.git && cd operationRecord/src/op-rec
```
- 安装依赖：
```
# pwd /operationRecord/src/op-rec
$ npm i
# or
$ yarn
```
- 修改dev/index.html中的http://127.0.0.1:8990为local
- 启动示例：
```
$ npm dev
# or
$ yarn dev
```
在浏览器中打开http://localhost:8989/就可以看到一个实时视频和webgl10 万点随机移动的例子。打开控制台可以看到在随机抛出错误。

服务端

打包版本：
- 新建一个数据库。
- 下载release中的server.zip，解压并修改.env中的配置。
- 安装依赖：
```
$ npm i
# or
$ yarn
```
- 启动：
```
$ node main.js
```
开发版：
- cd operationRecord/src/server
- 修改.development.env中的配置。
- 安装依赖并启动后台服务
```
$ yarn && yarn dev
```
- cd operationRecord/src/server
- 安装依赖并启动管理系统中的前端页面：
```
$ yarn && yarn dev
```
更多配置参数及使用方法可以查看文档。

已知问题

由于mysql的库并不支持mysql 8新版的加密方式，所以使用8.x需要修改默认的加密方式：
```
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'
```
然后刷新：
```
flush privileges;
```
或者切换为mysql 5.x版本。

结束

再求一波star：项目地址

欢迎PR。

在浏览器中录制任意界面并实现导出、保存与管理

预览

初衷

特点

支持环境

前端架构

后端架构

安装

使用

已知问题

结束