master

分支 (2)

标签 (1)

管理

管理

master

dev

v1.1.0

lve-record-js
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>canvas文本格式屏幕录制</title>
    <style>
      .container {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
      }
      .paint-area {
        flex: 0 1 45%;
        padding-right: 2%;
        border-right: 1px solid #eee;
      }
      .video-area {
        flex: 0 1 45%;
      }
      .canvas-box {
        margin: 0 auto;
        display: block;
        position: relative;
      }
      .video-box {
        margin: 0 auto;
        position: relative;
        display: none;
      }
      .canvas-area {
        position: relative;
        width: 800px;
        height: 400px;
      }
      .canvas-area canvas {
        position: absolute;
        z-index: 1;
        cursor: crosshair;
      }
      .canvas-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        pointer-events: none;
      }
      .time {
        width: 800px;
        height: 20px;
        text-align: center;
        background-color: rgba(144, 144, 144, 0.1);
      }
      textarea{
        display: block;
      }
      .margin {
        margin: 10px 0;
      }
      .progress-box {
        position: relative;
        width: 800px;
      }
      .progress-box .progress {
        width: 100%;
        height: 10px;
        position: relative;
        border-radius: 5px;
        background-color: rgba(144, 144, 144, 0.5);
        margin-top: 5px;
        cursor: pointer;
      }
      .progress-box .progress .cur-progress{
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        border-radius: 5px;
        background-color: #33a1e6;
      }
    </style>
</head>
<body>
  <div class='container'>
    <div class="paint-area">
      <p>画板区</p>
      <font color="red">操作步骤：先点击开始录制，即可以插入背景图，然后在上面涂鸦，结束时点击结束录制，然后点击输出数据，将textarea中数据复制即可</font>
      <div class="canvas-box">
        <div class="time" id="time"></div>
        <div class="canvas-area">
          <canvas id='canvas-record'></canvas>
          <div class="canvas-image" id="canvas-image"></div>
        </div>
      </div>
      <div class="margin">
        <button onclick='startRecord()'>开始录制</button>
        <button onclick='pauseRecord()'>暂停录制</button>
        <button onclick='resumeRecord()'>继续录制</button>
        <button onclick='stopRecord()'>结束录制</button>
        <button onclick='exportData()'>输出数据</button>
      </div>
      <div class="margin">
        <button id="insertImage" onclick="insertImage()">插入背景图片</button>
        <button>
          修改背景颜色
          <input id="bgColor" type="color" value="#ffffff" />
        </button>
        <button>
          修改画笔颜色
          <input id="penColor" type="color" value="#ffffff" />
        </button>
        <button>
          修改画笔尺寸
          <select id="penSize">
            <option value="5">细</option>
            <option value="10">中</option>
            <option value="20">粗</option>
          </select>
        </button>
        <p>输出数据：</p>
        <textarea id="canvas-code" cols="100" rows="6" class="margin"></textarea>
      </div>
    </div>

    <div class="video-area">
      <p>视频区</p>
      <font color="red">操作步骤：将画板区的数据粘贴到textarea中，点击开始播放即可，也可以点击导出视频，视频格式为webm</font>
      <div class="video-box" id='video-record'>
        <video playsInline autoPlay>
        </video>
        <div class="progress-box">
          <div class="progress">
            <div class="cur-progress" id="cur-progress"></div>
          </div>
          <div class="progress-time">
            <span id="cur-time"></span>/<span id="total-time"></span>
          </div>
        </div>
      </div>
      <div>
        <p>输入数据：</p>
        <textarea id="video-code" cols="100" rows="6" class="margin"></textarea>
        <button onclick='startPlay()'>开始播放</button>
        <button disabled onclick='pausePlay()'>暂停播放</button>
        <button disabled onclick='resumePlay()'>恢复播放</button>
        <button disabled onclick='stopPlay()'>结束视频</button>
        <button onclick='exportVideo()'>导出视频</button>
      </div>
    </div>

  </div>

  <script type="module">
    import {
      LvePaint,
      LvePlay
    } from './index.js'
    // <!-- 编辑器画板 -->
    const canvasId = document.querySelector('#canvas-record')
    const timeId = document.querySelector('#time')
    const lvePaint = new LvePaint({
      canvasId,
      timeId,
      canvasConfig: {
        width: 800,
        height: 400
      }
    })
    /**
     * 开始录制
     **/
    window.startRecord = () => {
      document.querySelector('#canvas-code').value = ''
      lvePaint.startRecord()
    }
    /**
     * 暂停录制
     **/
    window.pauseRecord = () => {
      lvePaint.pauseRecord()
    }
    /**
     * 继续录制
     **/
    window.resumeRecord = () => {
      lvePaint.resumeRecord()
    }
    /**
     * 结束录制
     **/
    window.stopRecord = () => {
      lvePaint.stopRecord()
    };
    /**
     * 输出数据到textarea里
     **/
    window.exportData = () => {
      document.querySelector('#canvas-code').value = JSON.stringify(lvePaint.getData())
    }
    /**
     * 插入背景图片
     **/
    window.insertImage = () => {
      lvePaint.insertImage()
    }
    const bgColor = document.querySelector('#bgColor')
    /**
     * 修改背景颜色
     **/
     bgColor.onchange = e => {
      lvePaint.changeBgColor(e.target.value)
    }
    const penColor = document.querySelector('#penColor')
    /**
     * 修改画笔颜色
     **/
     penColor.onchange = e => {
      lvePaint.changePenColor(e.target.value)
    }
    const penSize = document.querySelector('#penSize')
    /**
     * 修改画笔尺寸
     **/
     penSize.onchange = e => {
      lvePaint.changePenSize(e.target.value)
    }
    // <!-- 播放器视频 -->
    const videoId = document.querySelector('#video-record')
    const totalTime = document.querySelector('#total-time') // 总时间
    const curTime = document.querySelector('#cur-time') // 当前时间
    const curProgress = document.querySelector('#cur-progress') // 当前进度条
    const lvePlay = new LvePlay({
      videoId,
      videoConfig: {
        width: 800,
        height: 400
      }
    })
    /**
     * 开始播放视频
     **/
    window.startPlay = () => {
      const data = document.querySelector('#video-code').value
      const ready = lvePlay.setData(data)
      if (ready) {
        lvePlay.initProgress({
          totalTime,
          curTime,
          curProgress
        })
        lvePlay.startPlay()
      }
    }
    /**
     * 暂停播放
     **/
    window.pausePlay = () => {
      lvePlay.pausePlay()
    }
    /**
     * 恢复播放
     **/
    window.resumePlay = () => {
      lvePlay.resumePlay()
    }
    /**
     * 结束视频
     **/
    window.stopPlay = () => {
      lvePlay.stopPlay()
    }
    /**
     * 导出视频
     **/
    window.exportVideo = () => {
      lvePlay.exportVideo()
    }

    (function initEvent() {
      // 当前页面不可见时，判断当前实例状态 处于ing，则pause，处于pause，则ing
      document.addEventListener('visibilitychange', function() {
        if (lvePaint) {
          const paintStatus = lvePaint.getStatus()
          // 页面隐藏 且录制中 => 暂停录制
          if(document.hidden && paintStatus === 1) {
            lvePaint.pauseRecord()
          }
          // 页面显示 且暂停录制 => 恢复录制
          if (!document.hidden && paintStatus === 2) {
            lvePaint.resumeRecord()
          }
        }
        if (lvePlay) {
          const playStatus = lvePlay.getStatus()
          // 页面隐藏 且播放中 => 暂停播放
          if(document.hidden && playStatus === 1) {
            lvePlay.pausePlay()
          }
          // 页面显示 且暂停播放 => 恢复播放
          if (!document.hidden && playStatus === 2) {
            lvePlay.resumePlay()
          }
        }
      });
    })()
  </script>
</body>
</html>