# LveRecordJs

**Repository Path**: lin_peng118/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-28
- **Last Updated**: 2024-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LveRecordJs v1.1.0

#### 介绍
浏览器屏幕录制(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）,
x,y 为画笔轨迹点
t为与上一个操作的时间间隔
ct为当前时间
o为其他自定义数据
```
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
  videoConfig: {
    width: 800,
    height: 400
  }
})
```
3.  画板类方法
```javascript
const lvePaint = new LvePaint({
  canvasId,
  timeId,
  canvasConfig: {
    width: 800,
    height: 400
  }
})
lvePaint.setTimeStep(25) // 设置录制时间间隔
lvePaint.getTimeStep() // 获取录制时间间隔（单位毫秒）
lvePaint.getData() // 获取录制数据
lvePaint.startRecord() // 开始录制
lvePaint.pauseRecord() // 暂停录制
lvePaint.resumeRecord() // 继续录制
lvePaint.stopRecord() // 结束录制
lvePaint.insertImage(type = 'contain | cover') // 插入本地背景图片
```
4.  播放器类方法
```javascript
const lvePlay = new LvePlay({
  videoId,
  videoConfig: {
    width: 800,
    height: 400
  }
})
lvePlay.setData(data) // 设置录制数据， 此值为画板类的getData()
lvePlay.startPlay() // 开始播放视频
lvePlay.exportVideo() // 导出视频文件 webm格式
```

#### 参与贡献

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

#### 版本记录
1. v1.0.0
基础完整功能：画板类，播放类

2. v1.1.0
画板类新增插入图片尺寸控制