前端实现录屏、跨页面录屏、截屏功能

录屏实现方案：rrweb.js
官方文档：https://github.com/rrweb-io/rrweb

截屏实现方案：html2canvas.js

官方文档：http://html2canvas.hertzen.com/

rrweb录屏实现的原理是记录dom的变化，播放的时候重新执行dom操作，所以不支持生成mp4，只可以在web端重放

html2canvas截图实现的原理是生成一个canvas画布，画布的内容是插件帮我们实现好的，我们需要做的是将canvas画布保存成base64图片，保存到本地或者上传

服务端例子：express

需要引入的文件：

rrweb：

下面用一个例子演示一下跨页面录屏和截屏的效果

前端完整代码如下：

页面1:

  
    
    
    
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
    />
  
  
    
    
    
    
    
    开始录制
    结束并播放
    截图
    下一步
    清空服务器数据
    

    

    
this is page1
    

      
    
    
  

页面2:

  
    
    
    
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
    />
  
  
    
    
    
    
    
    开始录制2
    结束并播放1和2
    截图2
    

    

    
this is page2
    

      
    
    
  

服务端代码：

/*
 * @Author: your name
 * @Date: 2020-07-18 19:09:47
 * @LastEditTime: 2020-07-19 12:24:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /record-2/app.js
 */ 
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var fs = require('fs');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var bodyParser = require('body-parser');
var app = express();

app.use(bodyParser.urlencoded({
  extended:true
}));
let events = [];
// view engine setup
app.use(express.static(path.join(__dirname, 'public')));
// 服务端页面
app.get('/', function(req, res, next) {
    // res.writeHead(200,{'Content-Type':'text/html'})
    fs.readFile('./html/index.html','utf-8',function(err,data){
        if(err){
        throw err ;
        }
        res.send(data);
        });
});
app.get('/page2.html', function(req, res, next) {
  // res.writeHead(200,{'Content-Type':'text/html'})
  fs.readFile('./html/page2.html','utf-8',function(err,data){
      if(err){
      throw err ;
      }
      res.send(data);
      });
});
app.post('/clearEvents',function(req, res, next) {
  // res.writeHead(200,{'Content-Type':'text/html'})
  console.log(req.body)
  events = [];
  res.send({msg:"操作成功"})
  // if(req.query.events.length>0){
  //   res.send({state:1,msg:"上传成功"})
  // }else{
  //   res.send({state:0,msg:"参数错误，未获取到录屏信息"})
  // }
});
// 存
app.post('/saveEvents',function(req, res, next) {
  // res.writeHead(200,{'Content-Type':'text/html'})
  console.log(req.body)
  res.send({state:1,msg:"上传成功"})
  // res.send(req.body.events)
  if(req.body.page==1){
    events = []
  }
  events = events.concat(JSON.parse(req.body.events))
  fs.writeFile("./data.txt",JSON.stringify(req.body.events),'utf-8',function(){
    
  })
  // if(req.query.events.length>0){
  //   res.send({state:1,msg:"上传成功"})
  // }else{
  //   res.send({state:0,msg:"参数错误，未获取到录屏信息"})
  // }
});
// 取
app.post('/getEvents',function(req, res, next) {
  res.send(events);
  // fs.readFile('./data.txt','utf-8',function(err,data){
  //   if(err){
  //     throw err ;
  //   }
  //   console.log(JSON.parse(data))
  //   res.send(data);
  // });
  // if(req.query.events.length>0){
  //   res.send({state:1,msg:"上传成功"})
  // }else{
  //   res.send({state:0,msg:"参数错误，未获取到录屏信息"})
  // }
});

module.exports = app;

上面的例子如果只想在前端看效果的话，只运行第一个页面的前端代码也能查看。