Skip to content
This repository has been archived by the owner on Jun 29, 2023. It is now read-only.

Latest commit

 

History

History
384 lines (258 loc) · 11.8 KB

README-zh_CN.md

File metadata and controls

384 lines (258 loc) · 11.8 KB

OpRec

利用现代浏览器所提供的强大 API 录制，回放并保存任意界面中的用户操作

star

npm count top language gzip gzip issues license

English | 简体中文

简述

利用现代浏览器的强大api (MediaDevices.getDisplayMedia()) 录制并回放用户任意界面（不限于浏览器中）的操作，并提供主动上报的功能以及管理系统。

🌟 特性

  • 🧱 开发：
    • 前端库使用webpack打包为 umd。
    • 后端使用NestJS，全链路开发和设计工具体系。
    • 后端前端页使用Vue 3+Element Plus更现代。
  • 📦 开箱即用。
  • 🌀 无依赖。
  • 🛡 100% TypeScript 开发，尽量规避愚蠢错误。
  • ⚙️ 提供管理系统，并可独立使用。

✔ 支持环境

  • 所有现代浏览器。
IE / Edge IE / Edge Firefox Firefox Chrome Chrome Safari Safari Opera Opera
IE 全版本不支持, Edge 79 及以上 66 及以上 72 及以上 13 及以上 60 及以上

📦 安装

录制端

使用 yarn

$ yarn add op-rec

使用 npm

$ npm install op-rec --save

在浏览器中

使用CDN
<script type="text/javascript" src="//unpkg.com/op-rec@latest"></script>
或
<script type="text/javascript" src="op-rec.js"></script>
或
<script type="text/javascript" src="op-rec.min.js"></script>

管理端

在Release中下载并解压，配置.env里面的参数。

安装依赖

$ yarn
# 或
$ npm i

启动

$ node main.js

🔨 示例

  • vue

    <template>
  <video controls autoplay ref="video"></video>
</template>

<script>
import OpRec from "op-rec";
export default {
  data() {
    return {};
  },
  mounted() {
    const or = new OpRec();
    or.on("startREC", this.startREC);
  },
  methods: {
    startREC(stream) {
      this.$refs.video.srcObject = stream;
    },
  },
};
</script>

  • react

    import React from "react";
import ReactDOM from "react-dom";
import OpRec from "op-rec";

class App extends React.Component {
  componentDidMount() {
    const or = new OpRec();
    or.on("startREC", this.startREC);
  }
  startRec(stream) {
    ReactDOM.findDOMNode(this.refs.video).srcObject = stream;
  }
  render() {
    return (
      <div>
        <video ref="video" controls autoplay></video>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

  • 原生

    <script type="text/javascript" src="op-rec.js"></script>
<body>
  <video controls autoplay></video>
</body>
<script>
  const video = document.querySelector("video");
  const or = new OpRec();
  or.on("startREC", function (stream) {
    video.srcObject = stream;
  });
</script>

⌨ 本地开发

$ git clone clone https://github.com/asdjgfr/operationRecord.git
# 开发前端库
$ cd operationRecord/src/op-rec
$ yarn
$ yarn dev
# 开发服务端
$ cd operationRecord/src/server
$ yarn
$ yarn dev
# 开发服务端前端页面
$ cd operationRecord/src/server-client
$ yarn
$ yarn dev

文档

内置对象

日志等级

  • emerg: 0
  • alert: 1
  • crit: 2
  • err: 3
  • warning: 4
  • notice: 5
  • info: 6
  • debug: 7

LoggerItem

记录对象

  • level: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7

    等级

  • content: string

    日志内容

  • timestamp: number

    生成日志时的时间戳

构造函数

OpRec()

创建一个新的录制实例。

配置项

url 可选

完成后上传的地址，默认为 local，地址为 local 的时候会本地生成并下载。

fetchConfig 可选

fetch 的配置。

mediaConstraints 可选

mediaConstraints配置。

mimeType 可选

mime 类型，默认会选择最佳类型。

lang 可选

语言，默认 zh，暂时只有 zh。

hotKeys 可选，预留，尚未支持

快捷键。

dom 可选

自动生成的 dom 配置。

  • show: boolean
  • style:{key:value}

dom 为 false 或 dom.show 为 false 的时候将不会生成操作的标签。

onStartREC 可选

开始录制时的回调，可使用**OpRec.prototype.on("startREC",cb)**替代。

onStopREC 可选

结束录制时的回调，可使用**OpRec.prototype.on("stopREC",cb)**替代。

onPauseREC 可选

暂停录制时的回调，可使用**OpRec.prototype.on("pauseREC",cb)**替代。

onResumeREC 可选

继续录制时的回调，可使用**OpRec.prototype.on("resumeREC",cb)**替代。

CSP 可选

用于设置style的nonce属性。由于在内部配置DOM的时候创建了inline-style标签，这与CSP产生了冲突，配置此项的与meta中的style-src配合使用。

实例属性

OpRec.prototype.DOM （HTMLElement | undefined）

用于 ui 操作的 dom，当DomOptions.show为false的时候返回undefined。

OpRec.prototype.startTime （number）

录制开始时的时间戳，默认为 0。

OpRec.prototype.status （"recording" | "stop" | "paused" | "inactive"）

当前状态，默认为 stop。

OpRec.prototype.recordedChunks （Blob[]）

包含媒体数据的Blob，默认为 []。

OpRec.prototype.logs （LoggerItem[]）

记录集合，默认为 []。

OpRec.prototype.logs （LoggerItem[]）

记录集合，默认为 []。

OpRec.prototype.mediaRecorder （MediaRecorder | undefined）

MediaRecorder 实例。

OpRec.prototype.stream （MediaStream | undefined）

MediaStream。

OpRec.prototype.mimeType （string | undefined）

mime 类型。

实例方法

OpRec.prototype.startREC()

开始录制，这是一个异步方法。

OpRec.prototype.stopREC()

结束录制。

OpRec.prototype.toggleREC()

切换录制状态。

OpRec.prototype.on(type,cb)

event 事件。

OpRec.prototype.logger(loggerLever,ErrorEvent|string)

  • loggerLever:"emerg" | "alert" | "crit" | "err" | "warning" | "notice" | "info" | "debug" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7

主动提交记录，第一个参数为记录等级，第二个参数为日志信息。

OpRec.prototype.getSupportedMimeTypes()

获取当前运行环境支持的 Mime 类型。

OpRec.prototype.getBlob()

获取录制后的 Blob。

OpRec.prototype.getExtname()

获取录制的后缀。

OpRec.prototype.reset()

重置状态。

🤐 已知问题

由于mysql的库并不支持mysql 8新版的加密方式，所以使用8.x需要修改默认的加密方式：

$ ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'

然后刷新：

$ flush privileges;

或者切换为5.x版本。

🤝 参与共建

PRs Welcome 欢迎PR