Table of Contents

• Table of Contents
• Intro
• Installation
  • Config file
    • Config options
  • Presets
    • Presets options
• Scripting
  • Script options
  • Script steps
  • iframes
• Troubleshooting

Intro

Flow Recorder is an automated video recorder for web applications.

Automated screen recording with flow-recorder provides many advantages:

• Video content is always up to date.
• The quality of the flows can be improved over time.
• It's scalable - you can maintain hundreds of video flows.
• Full control over actions speed of the entire flows and/or each step.
• Playback speed of certain flow parts.
• Exclude certain flow parts from capturing.
• The same flow can be captured in different formats and sizes for different platforms.
• Editing doesn't require any additional tools or skills.

Installation

To use flow-recorder in your project, run:

npm install flow-recorder

Config file

To get started, you need to create a config file.
In the config file, add an options array and pass it as an argument to the run() function:

const flowRecorder = require("flow-recorder");
let options = [
    {
        "name": "my-project",
        "presetsDir": "presets/",
        "scriptsDir": "scripts/",
        "outputDir": "assets/videos",

        "presets": [
            "blog",
            "you-tube",
            "whats-new"
        ],

        "scripts": [
            "find-a-product",
            "see-product-details",
            "buy-a-product"
        ]
    }
]
flowRecorder.run(options);

Config options

Presets

Presets define basic properties of the media format, script pace and video quality. They especially useful if you have different platforms for sharing like video, blogs, emails and so on.

{
    "width": 1440,
    "height": 900,
    "scaleFactor": 1,
    "captureFPS": 60,
    "playbackFPS": 60,
    "stepDelay": 0,
    "videoBPS": 800000000,
    "speedFactor": 1,
    "audio": true,
    "soundEffects": true,
    "speech": true
}

Presets options

Scripting

Scripts are plain JSON files:

{
    "url": "https://my-site.com",
    "stepDelay": 240,
    "speedFactor": 1,
    "steps": [{
            "startRecording": ""
        },
        {
            "click": "#b"
        },
        {
            "doubleClick": "#a"
        },
        {
            "tripleClick": "#b"
        },
        {
            "stopRecording": ""
        }
    ]
}

Scripts can be nested:

script-a.json

{
    "steps":[
        {
        "runScript": "./script-b.json"
        }
    ]
}

You can run multiple scripts in one project:

scripts:[
    "script_1",
    "script_2",
    "script_3"
]

Script options

Options should be provided in the script file itself:

{
    "url": "http://example.com",
    "speedFactor": 1000,
    "steps":[
        ...
    ]
}

Script steps

iframes

At this point, flow-recorder supports one level of iframes. Nesting is not supported.
To select an element inside an iframe include "iframe" string as the first chain of the target selector:

{
    "click": "iframe .my-target"
}

Troubleshooting

Video file is longer/shorter than the content
It is probably due to this bug.

Video content is too fast/slow
Check speedFactor value in the preset and/or in the script.