// Start recording
function record(){
    if (!recording) {
        chrome.runtime.sendMessage({type: "record"});
        $("#record").html(chrome.i18n.getMessage("starting_recording"));
    } else {
        recording = false;
        $("#record").html(chrome.i18n.getMessage("start_recording"));
        chrome.runtime.sendMessage({type: "stop-save"}); 
        window.close();
    }
}

支持三种录制范围：tab-only、desktop、camara-only：

1 2	`chrome.runtime.sendMessage({type: "recording-type", recording:$(".type-active").attr("id")}); chrome.storage.sync.set({type:$(".type-active").attr("id")});`

background.js

newRecording

getTab是具体的录制逻辑，看起来是可以进行自定义设置的：

chrome.tabCapture.capture({
            video: true,
            audio: true,
            videoConstraints: {
                mandatory: {
                    chromeMediaSource: 'tab',
                    minWidth: width,
                    minHeight: height,
                    maxWidth: width,
                    maxHeight: height,
                    maxFrameRate: fps
                },
            },
        }

用了这个API：

http://www.kkh86.com/it/chrome-extension-doc/extensions/tabCapture.html

https://crxdoc-zh.appspot.com/extensions/tabCapture#type-MediaStreamConstraint

官方文档：

https://developer.chrome.com/docs/extensions/reference/tabCapture/#method-capture

这个需要仔细阅读：

https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

看看支持哪些配置：

1	`var supportedConstraints = navigator.mediaDevices.getSupportedConstraints();`

aspectRatio: true
autoGainControl: true
brightness: true
channelCount: true
colorTemperature: true
contrast: true
deviceId: true
echoCancellation: true
exposureCompensation: true
exposureMode: true
exposureTime: true
facingMode: true
focusDistance: true
focusMode: true
frameRate: true
groupId: true
height: true
iso: true
latency: true
noiseSuppression: true
pan: true
pointsOfInterest: true
resizeMode: true
sampleRate: true
sampleSize: true
saturation: true
sharpness: true
tilt: true
torch: true
whiteBalanceMode: true
width: true
zoom: true

思考：没事把MDN读一遍，可以知道浏览器的能力，非常值得！

7年前的共享屏幕的WebRTC的Demo：

https://github.com/samdutton/rtcshare

(精)讲解原理和关键代码：

https://developers.google.com/web/updates/2012/12/Screensharing-with-WebRTC

(精)WebRTC教程：

https://www.html5rocks.com/en/tutorials/webrtc/basics/

Chrome插件调试技巧

https://my.oschina.net/u/265943/blog/292904

几个注意事项：

1、manifest.json中，permissions下面必须添加对downloads的支持，否则无法下载文件

2、只有background.js可以执行下载操作，content-scripts没有支持下载功能

待解决的问题

测试URL：

http://datav.iwencai.com/micro-video/page/#/business/financialReport/preview?readConfig=true&api=http://datav.iwencai.com/micro-video/api/v1/process/11045&scale=0.5

(Done)录制时间控制

通过track.stop()控制

清晰度

用WebRTC的方式，清晰度设置似乎并未生效；因此我们只能考虑通过scale放大网页再录制的方式来进行测试了

https://blog.csdn.net/xyphf/article/details/107237085

黄色丢失问题很严重

清晰度参数：

https://blog.csdn.net/ihtml5/article/details/88658873

VP8 VS. H264:

https://www.cnblogs.com/mlj318/p/5723738.html

https://zhuanlan.zhihu.com/p/24813904?refer=codec

VP9 VS. H265：

https://www.zhihu.com/question/21067823?sort=created

H265目前Chrome还不支持

常用编码对比分析：

https://blog.csdn.net/owen7500/article/details/47334929

经测试，H264比vp8清晰，主要是色彩丢失没那么严重

(Warning)截屏受限于浏览器可视区域大小的问题

(Done)无头浏览器如何安装插件

这个文章提到，只有在headless=false下才能用，如果是这样，那我们这个就不能用了

http://www.sanfenzui.com/pyppeteer-install-chrome-extensions-and-test.html?imbgzw=6mxmx1

这个文章也提到了，无头模式不能开启插件：

https://www.it1352.com/1954944.html

这个文章注明了puppeteer如何开启插件：

https://juejin.cn/post/6844904132524900360

网页操作还原

https://github.com/oct16/TimeCat/blob/master/README.cn.md

这个是国人写的，功能很强大，文档很易用，似乎也能满足我们需求，牛逼！

Demo程序

前端HTML页面record.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="https://s.thsi.cn/js/jquery-2.0.0.min.js"></script>
    <title>Document</title>
    <style>
      body {
        display: flex;
      }
      #videoContainer {
        position: absolute;
        left: 600px;
        width: 600px;
        height: 600px;
        background-color: #ccc;
      }
      h3 {
        margin-left: 40%;
      }
    </style>
  </head>
  <body>
    <div>
      <h3>原始网页</h3>
      <canvas width="600" height="600"></canvas>
    </div>

    <div id="videoContainer">
      <h3>录制的视频</h3>
      <video id="myvideo" autoplay muted></video>
    </div>

    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext('2d');
      const { width, height } = canvas;

      ctx.fillStyle = 'red';

      // 画个正方形
      function draw(rotation = 0) {
        ctx.clearRect(0, 0, 1000, 1000);
        ctx.save();
        ctx.translate(width / 2, height / 2);
        ctx.rotate(rotation);
        ctx.translate(-width / 2, -height / 2);
        ctx.beginPath();
        ctx.rect(200, 200, 200, 200);
        ctx.fill();
        ctx.restore();
      }

      // 让正方形不停旋转
      function update(t) {
        draw(t / 500);
        requestAnimationFrame(update);
      }
      update(0);

      const stream = canvas.captureStream();
      const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
      const data = [];
      recorder.ondataavailable = function (event) {
        if (event.data && event.data.size) {
          console.log('event.data', event.data);
          data.push(event.data);
        }
      };

      recorder.onstop = () => {
        const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
        document.querySelector('#videoContainer').style.display = 'block';
        document.querySelector('#myvideo').src = url;
        
        upload(data);
      };

      recorder.start();

      setTimeout(() => {
        recorder.stop();
      }, 2000);

      function upload(data) {
        var fd = new FormData();
        // data必须是个可迭代的对象，一般就是用数组
        var blob = new Blob(data, { type: 'video/webm' });
        var fileOfBlob = new File([blob], 'test.avi');
        fd.append('filedata', fileOfBlob);
        $.ajax({
          type: 'POST',
          url: '/',
          data: fd,
          processData: false,
          contentType: false,
        }).done(function (data) {
          console.log(data);
        });
      }
    </script>
  </body>
</html>

后端Node服务server.js：

/**
 * Node上传文件的参考文章：https://segmentfault.com/a/1190000020654277
 */

// 1. 导入http模块
const http = require('http');
const fs = require('fs');
const formidable = require('formidable')
const { v4: uuidv4 } = require('uuid');

// 2. 创建一个web服务器对象
const server = http.createServer();

// 3. 监听请求事件
server.on('request', (req, res) => {
  // console.log(req);
  console.log('req.url', req.url);
  // 通过响应头设置返回前台数据格式及编码。（解决中文乱码的问题）
  res.setHeader('Content-Type', 'text/html;charset=utf-8');
  if (req.url === '/record.html') {
    const html = fs.readFileSync('./record.html');
    res.write(html);
  } else if (req.url === '/favicon.ico') {
    res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF8' });
    res.end('上传成功！');
    return;
  } else {
    const form = new formidable.IncomingForm();
    // 指定解析规则
    form.encoding = 'utf-8'; // 设置编码
    form.uploadDir = './upload'; // 指定上传目录
    form.keepExtensions = true; // 保留文件后缀
    form.maxFieldsSize = 20 * 1024 * 1024; // 指定上传文件大小

    form.parse(req, (err, fields, files) => {
      if (err) throw err;
      const oldPath = files.filedata.path;
      const uniqueId = uuidv4();
      const newPath = `${form.uploadDir}/${uniqueId}.avi`;
      // 将上传的文件从临时位置写到目标位置进行存储；由于是测试，文件名就用uuid随机生成了
      fs.rename(oldPath, newPath, (err) => {
        if (err) throw err;
        res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF8' });
        res.end('上传成功！');
      })
    })
    return;
  }
  res.end();
})

// 4. 监听端口，为了避免端口冲突，这里给一个本机端口3000
server.listen(3000, () => {
  console.log('服务器启动成功');
})

运行在docker中的启动无头浏览器的脚本multiProcess.js：

/* eslint-disable no-await-in-loop */
/* eslint-disable no-continue */
const cluster = require('cluster');
const puppeteer = require('puppeteer');

// 最大子进程数
const maxChildProcessNumber = 4;

async function captureCanvas() {
  const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
    executablePath: '/opt/google/chrome/chrome',
  });
  const page = await browser.newPage();
  // 这个地址需要改为你本机的局域网IP和你server.js启动的服务端口号
  await page.goto('http://192.168.56.1:3000/record.html');
  await page.setViewport({
    width: 1920,
    height: 1080,
  });

  page.on('console', (msg) => console.log(msg.text()));

  setTimeout(async () => {
    await browser.close();
  }, 15000);
}

(async () => {
  if (cluster.isMaster) {
    for (let i = 0; i < maxChildProcessNumber; i += 1) {
      cluster.fork();
    }
    console.log(`主进程 ${process.pid} 正在运行`);

    cluster.on('exit', (worker, code, signal) => {
      console.log(`工作进程 ${worker.process.pid} 已退出, code=${code}, signal=${signal}`);
    });
  } else {
    console.log(`工作进程 ${process.pid} 已启动`);
    await captureCanvas();
  }
})();