Introduction

Convert H5 animation to webm video, with the idea that Recording the screen, then cropping and transparentizing the video. This tackles the lags caused by plenty of background H5 animations on the mobile.

Precondition

Install FFmpeg, and set the command "ffmpeg" to system path.

Instructions

Include 3 commands：

• atv-convert：record and convert
• atv-record：record the video
• atv-crop：crop and tansparentize the video

add config below to package.json：

"atv": {
    "record": {
      "filename": "capture.mkv",
      "duration": 20000,
      "bgColor": "0xFFFFFF",
      "screenId": 2
    },
    "crop": {
      "filename": "bg-effect.webm",
      "distPath": "./src/assets/",
      "cropArea": [
        936,
        890,
        450,
        103
      ]
    }
  }

tips：

1. bgColor：H5 animation background color, like "green screen", it will be used for tansparentizing。
2. screenId：When having multiple screens，for mac, you can do the following command to query screen id：" ffmpeg -f avfoundation -list_devices true -i ". for windows, haven't got any similar commands, just keep one screen and do the work.