# LveRecordJs

**Repository Path**: lve-technical-team/lve-record-js

## Basic Information

- **Project Name**: LveRecordJs
- **Description**: 浏览器屏幕录制(textToVideoRecord 文本格式录屏)，内置画板类LvePaint，播放类LvePlay
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-03-29
- **Last Updated**: 2023-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LveRecordJs

#### 介绍
浏览器屏幕录制(textToVideoRecord 文本格式录屏)，内置画板类LvePaint，播放类LvePlay

#### 效果预览
![image](https://gitee.com/lin_peng118/lve-record-js/blob/master/image/LveRecordJs.gif)

#### 优势
和传统视频流录制不一样的是，我采用文本格式记录操作，所以体积大大减小，目前录制30s绘制操作，为普通视频体积的1/5大小，将极大减少内存占用
部分文本格式内容如下
```
[[{"f":"pen","s":"start","x":182,"y":92,"t":1.75,"ct":1.75},
{"f":"pen","s":"ing","x":183,"y":92,"t":0.075,"ct":1.825}]]
```

#### 使用说明
0. 参数说明
```javascript
LvePaint.canvasHistory
f为'pen', 代表当前为画笔轨迹, s为当前画笔开始/中途/结束
f为'image', 代表当前为背景图片插入, s为图片的地址（本地图片为base64，远程图片为绝对url）,
f为'system'，代表当前为系统操作, s为操作类型, s='end' 结束录制, s={bgcolor: xxx}，设置背景颜色
x,y 为画笔轨迹点
t为与上一个操作的时间间隔
ct为当前时间
```
1.  初始化画板
```javascript
const canvasId = document.querySelector('#canvas-record')
const timeId = document.querySelector('#time')
const lvePaint = new LvePaint({
  canvasId, // canvasdom
  timeId, // 时间展示dom
  canvasConfig: {
    width: 800,
    height: 400
  }
})
```
2.  初始化播放器
```javascript
const videoId = document.querySelector('#video-record')
const lvePlay = new LvePlay({
  videoId, // 视频dom
  timeId, // 时间显示dom
  videoConfig: {
    width: 800,
    height: 400
  }
})
```
3.  画板类方法
```javascript
const lvePaint = new LvePaint({
  canvasId, // canvas dom
  timeId, // 时间显示dom
  canvasConfig: {
    width: 800,
    height: 400
  }
})
lvePaint.setTimeStep(25) // 设置录制时间间隔
lvePaint.getTimeStep() // 获取录制时间间隔（单位毫秒）
lvePaint.getData() // 获取录制数据
lvePaint.startRecord() // 开始录制
lvePaint.pauseRecord() // 暂停录制
lvePaint.resumeRecord() // 继续录制
lvePaint.stopRecord() // 结束录制
lvePaint.insertImage() // 插入本地背景图片
lvePaint.changeBgColor() // 修改背景颜色
```
4.  播放器类方法
```javascript
const lvePlay = new LvePlay({
  videoId, // 视频dom
  timeId, // 时间显示dom
  videoConfig: {
    width: 800,
    height: 400
  }
})
lvePlay.setData(data) // 设置录制数据， 此值为画板类的getData()
lvePlay.startPlay() // 开始播放视频
lvePlay.exportVideo() // 导出视频文件 webm格式
```
#### 目前缺陷
1. 背景颜色修改和插入图片 都会将录制区域canvas覆盖掉，播放区也是一样
2. 画笔颜色，尺寸的兼容修改
3. 播放类中 主动暂停/恢复的方法开发
4. 播放类中 当前时间和总时间不对应 bug

#### 参与贡献

[林大大哟](https://blog.csdn.net/qq_39404437?type=blog)