Allows client page to call function name to start capture. But the --…

README.md

@@ -170,6 +170,8 @@ Opens https://breathejs.org/examples/Drawing-US-Counties.html, sets the viewport
     * Suppresses console logging.
 * <a name="cli-options-output-stdout" href="#cli-options-output-stdout">#</a> Output stdout: `--output-stdout`
     * Outputs images to stdout. Useful for piping.
+* <a name="cli-options-start-function-name" href="#cli-options-start-function-name">#</a> Start Function Name: `--start-function-name` *function name*
+    * Creates a function with *function name* that the client web page can call to start capturing. For instance, `--start-function-name=startCapture` could be called in the client, via `startCapture()`. But the [`--start` option] will not work.
 * <a name="cli-options-stop-function-name" href="#cli-options-stop-function-name">#</a> Stop Function Name: `--stop-function-name` *function name*
     * Creates a function with *function name* that the client web page can call to stop capturing. For instance, `--stop-function-name=stopCapture` could be called in the client, via `stopCapture()`.
 * <a name="cli-options-version" href="#cli-options-version">#</a> Version: `-v`, `--version`
@@ -284,6 +286,8 @@ The Node API is structured similarly to the command line options, but there are
         * <a name="js-config-should-skip-frame-frame-count" href="#js-config-should-skip-frame-frame-count">#</a> `frameCount` &lt;[number][]&gt; The current frame count, starting at 1.
         * <a name="js-config-should-skip-frame-frames-to-capture" href="#js-config-should-skip-frame-frames-to-capture">#</a> `framesToCapture` &lt;[number][]&gt; The total number of frames to be captured.
         * <a name="js-config-should-skip-frame-page" href="#js-config-should-skip-frame-page">#</a> `page` &lt;[Page][]&gt; the puppeteer page.
+
+    * <a name="js-config-start-function-name" href="#js-config-start-function-name">#</a> `startFunctionName` &lt;[string][]&gt; *function name* that the client web page can call to start capturing. For instance, `'startCapture'` could be called in the client, via `startCapture()`. But the [`--start` option] will not work.
     * <a name="js-config-stop-function-name" href="#js-config-stop-function-name">#</a> `stopFunctionName` &lt;[string][]&gt; *function name* that the client web page can call to stop capturing. For instance, `'stopCapture'` could be called in the client, via `stopCapture()`.
     * <a name="js-config-frame-processor" href="#js-config-frame-processor">#</a> `frameProcessor` &lt;[function][]([Buffer][], [number][], [number][])&gt; A function that will be called after capturing each frame. If `config.outputDirectory` and `config.outputPattern` aren't specified, enabling this suppresses automatic file output. After capturing each frame, `config.frameProcessor` is called with three arguments, and if it returns a promise, capture will be paused until the promise resolves:
         * `screenshotData` &lt;[Buffer][]&gt; A buffer of the screenshot data.

cli.js

@@ -95,6 +95,7 @@ commander
     // TODO: make a more sophisticated parser for options that can handle quote marks
     return str.split(' ');
   })
+  .option('--start-function-name <function name>', 'Allows client page to call function name to start capture')
   .option('--stop-function-name <function name>', 'Allows client page to call function name to stop capture')
   .option('--no-headless', 'Chromium/Chrome runs in a window instead of headless mode')
   .option('--screenshot-type <type>', 'Output image format for screenshots, either png or jpeg')

index.js

@@ -46,8 +46,16 @@ module.exports = async function (config) {
   var unrandom = config.unrandomize;
   var fps = config.fps, frameDuration;
   var framesToCapture;
+  var requestStartCapture = true;
   var requestStopCapture = false;
   var outputPath = path.resolve(process.cwd(), (config.outputDirectory || './'));
+
+  /*
+    空跑张数
+    截图开始回调前将当前marker状态改为Only Animate，正常运行程序但是不截图，同时计算张数。
+    回调后在markers中追加对应张数的图片
+  */
+  var skipMarkerCount = 0; 
 
   if (!url.includes('://')) {
     // assume it is a file path
@@ -165,6 +173,46 @@ module.exports = async function (config) {
     }
     await overwriteRandom(page, unrandom, log);
     await timeHandler.overwriteTime(page);
+
+    if (config.startFunctionName) {
+      //不兼容start参数
+      delayMs = 0;
+      requestStartCapture = false;
+      await page.exposeFunction(config.startFunctionName, ()=>{startCapture()})
+    }
+    function startCapture(){
+      //截图前回调完毕，不需要追加截图张数
+      if(skipMarkerCount == 0){
+        requestStartCapture = true;
+        return;
+      }
+
+      //计算截图时间
+      let frameCount = markers[markers.length-1].data.frameCount;
+      //图片编号
+      let frameNum = 0;
+      if(skipMarkerCount < framesToCapture){
+        for(let i=skipMarkerCount; i<=framesToCapture; i++){
+          if(markers[i].data){
+            markers[i].data.frameCount -= skipMarkerCount;
+          }
+        }
+
+        //把开始截图的序号改为1
+        frameNum = framesToCapture - skipMarkerCount;
+      }
+      //追加截图
+      for(let i=1; i<=skipMarkerCount; i++){
+        addMarker({
+          time:frameNumToTime(frameCount+i),
+          type:'Capture',
+          data:{
+            frameCount:frameNum+i 
+          }
+        })
+      }
+      requestStartCapture = true;
+    }
     if (config.stopFunctionName) {
       await page.exposeFunction(config.stopFunctionName, () => requestStopCapture = true);
     }
@@ -246,9 +294,31 @@ module.exports = async function (config) {
 
     var startCaptureTime = new Date().getTime();
     var markerIndex = 0;
-    while (markerIndex < markers.length && ! requestStopCapture) {
+
+    var intervalTime = frameNumToTime(2);
+    while (markerIndex < markers.length && !requestStopCapture) {
       var marker = markers[markerIndex];
       markerIndex++;
+
+      //开始截图函数回调前 线程只运行动画不截图
+      if(!requestStartCapture){
+        //修改 markerIndex 和 marker.time 保证线程不会结束
+        if(markerIndex == markers.length){
+          markerIndex--;
+          marker.time += intervalTime;
+          marker.data.frameCount++;
+        }
+        //线程状态修改为只运行动画
+        if(marker.type !== "Run Function"){
+          //限制追加截图张数数量
+          if(skipMarkerCount < framesToCapture){
+            skipMarkerCount++;
+          }
+          marker.type = "Only Animate";
+          await new Promise(re=>{setTimeout(e=>{re()}, intervalTime)})
+        }
+      }
+
       if (marker.type === 'Capture') {
         await timeHandler.goToTimeAndAnimateForCapture(page, marker.time);
         var skipCurrentFrame;