h5recorder

Overview

Headless page video recorder, you simply provide array of paths ,relative to the current working directory or a valid webpage URL and provide their starting and ending URI hash and get a video for each entry. Cropping, scaling, color-based overlaying values are optionals

watch sample output in portrait on mobile's fullscreen mode on youtube

Run via Docker/Compose

docker run \
    # Inject the JSON Config file (sample.json) into the container 
    -v $(pwd)/sample.json:/usr/app/sample.json \
    # Map the output directory into a local volume 
    -v $(pwd)/output:/usr/app/output \
    # Internet access might be required to load some webpages (HTTP/HTTPS urls) 
    --network host \
    # my docker image, obviously 
    yoga1290/h5recorder:0.0.48 \
    # a config file path to use, relative to the container's working directory (/usr/app/): 
    sample.json

• Docker Compose: See docker-compose.yml sample.

Install

• NodeJS & NPM installed
• npm i -g h5recorder for commandline tool, or npm i [-P|-D] h5recorder inside a node project

Run

• First, you'll need to provide a JSON configuration in the following format: [{page, startHash, endHash, size{w, h}}] [JSON Schema]
  • other supported configuration:

[{
  // a free port will be determined on runtime
    "page": "sub-directory/file.html",
    "startHash": "0",
    "endHash": "end",
    "size": {
        "w": 400,
        "h": 710
    },
    "overlay": [{ //optional
        "video": "overlay.mp4",
        "colorkey": "black", //default: green
        "similarity": 0.7, //optional
        "time": { //optional
            "start": 0,
            "end": 8
        },
        "crop": {
            "aspectRatio": 0.5625,
            "offset": { // optional
                "x": 0.3, // [0-1]
                "y": 0 // [0-1]
            }
        }
    }],
    "audio": [{ //optional; array
        "path": "PathToAudio/VideoFile",
        "start": 0, // time in sec
        "end": 10, // time in sec
        "volume": 0.5 // [0 - 1.0]
    }, { //optional; array
        "path": "PathToAudio/VideoFile2",
        "start": 10, // time in sec
        "end": 15, // time in sec
        "volume": 0.5 // [0 - 1.0]
    }]
}]

• you can pass the configuration as a $CONFIG_FILE file to the commandline tool, after installing the package with the global -g flag; h5recorder $CONFIG_FILE

• or, you can execute it inside another node module:

const h5recorder = require('h5recorder')
h5recorder([{
    "page": "sub-directory/file.html",
    "startHash": "0",
    "endHash": "end",
    "size": {
        "w": 400,
        "h": 710
}]).then((outputVideoFile) => {})

• that's all, you'll get a single file after merging all entries.

Flow:

Inspiration

• this was inspired by phanan's snippet, modified & wrapped to be more flexible; just meets my needs :P

🔔 Changelog

0.0.47

• Docker Image (& Docker Compose)

0.0.30 - 0.0.43

• AMerge, adjust volume, merge multiple audio streams and merge it with the final output file
• JSON Schema validation fixed
• 10 sec time limit for page recording step if no endHash redirect.
• Local express server will run only for relative local page.
• JSDoc & gitlab-ci

0.0.30

• fix ajv, validation schema & local phantom module path