利用现代浏览器的强大API在浏览器中录制任意界面并实现导出、保存与管理

  两年前写过一篇文章利用现代浏览器所提供的强大 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） 。

预览

初衷

  应用场景定在了录屏方便进行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>
  

• 管理端：

  见下面的使用。

使用

1. 简单使用：

new OpRec()

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

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

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

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

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

4. 也可以启动源码中的示例：

   • clone项目到本地：

     $ git clone https://github.com/asdjgfr/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。