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

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

  作为周末项目没想到也收获了上百的star,期间还有很多人私信使用中的问题。正好今年过年因为疫情留守没回去家,所以把整个项目进行了重构,使用了更强大的API以及更完善的文档。核心APIMediaDevices.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

后端架构

安装

  • 使用npmyarn

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

    直接引入:

  • 管理端:

    见下面的使用。

使用

前端库
  1. 简单使用:
new OpRec()

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

  1. 也可以填入管理页面的地址实现管理:
new OpRec({
    url: "http://127.0.0.1:8990",
});
  1. 也可以把stream传入video中实时播放:
const or = new OpRec();
or.on("startREC", function (stream) {
    document.querySelector("video").srcObject = stream;
});
  1. 也可以启动源码中的示例:

    • 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:8990local
    • 启动示例:

      $ 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

你可能感兴趣的