LveRecordJs v1.1.0

[[{"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}]]

LvePaint.canvasHistory
f为'pen', 代表当前为画笔轨迹, s为当前画笔开始/中途/结束
f为'image', 代表当前为背景图片插入, s为图片的地址（本地图片为base64，远程图片为绝对url）,
x,y 为画笔轨迹点
t为与上一个操作的时间间隔
ct为当前时间
o为其他自定义数据

const canvasId = document.querySelector('#canvas-record')
const timeId = document.querySelector('#time')
const lvePaint = new LvePaint({
  canvasId, // canvasdom
  timeId, // 时间展示dom
  canvasConfig: {
    width: 800,
    height: 400
  }
})

const videoId = document.querySelector('#video-record')
const lvePlay = new LvePlay({
  videoId, // 视频dom
  videoConfig: {
    width: 800,
    height: 400
  }
})

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') // 插入本地背景图片

const lvePlay = new LvePlay({
  videoId,
  videoConfig: {
    width: 800,
    height: 400
  }
})
lvePlay.setData(data) // 设置录制数据， 此值为画板类的getData()
lvePlay.startPlay() // 开始播放视频
lvePlay.exportVideo() // 导出视频文件 webm格式