timecat实现网页操作过程录制回放保存文件打开重播示例代码-html代码-BFW代码库

timecat实现网页操作过程录制回放保存文件打开重播示例代码

代码语言：html

所属分类：多媒体

代码描述：timecat实现网页操作过程录制回放保存文件打开重播示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">

</head>

<body>
    <div style="display:flex;margin:20px;">
           <img width="100" height="100" src="//repo.bfw.wiki/bfwrepo/image/63311ffd69c99.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" />
   <textarea style="height:300px;width:100%;">先点击录制按钮，然后在输入框中输入操作一下，然后点击播放就可将整个过程录制下来，还可将录下下载本地后在选择文件打开播放
   </textarea>
        
    </div>

   <p style="margin:20px;">
       
       <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/timecat.js"></script>
    <button onclick="record()">录制web页面</button>

    <button onclick="play()">播放</button>
    <button onclick="down()">下载</button>
    
    
    <input type="file" id="fileInput" />
       
   </p>
    
    <div id="playarea"></div>
    <script>
        const { Recorder, Player } =TimeCat
        var recorder=null;
        var player=null;
        var reorddata=[];
        
          const fileInput = document.getElementById('fileInput');
    const playarea = document.getElementById('playarea');

    // 当用户选择文件时触发change事件
    fileInput.addEventListener('change', function (event) {
      const file = event.target.files[0];

      if (!file) {
        ret.........完整代码请登录后点击上方下载按钮下载查看