Công cụ ghi video trình duyệt tự động từ kịch bản

TL;DR

Tool này cho phép mình viết kịch bản (click, gõ phím, scroll…) bằng JSON, rồi nó tự động record trình duyệt thành video MP4. Tiện lắm cho việc tạo demo, tài liệu hướng dẫn tự động.

Nói đơn giản: Viết script bằng JSON, chạy một câu lệnh là có video demo sản phẩm.

Bài này dành cho ai?

1. Người muốn tạo video demo sản phẩm tự động

Vấn đề: Quay video demo thủ công tốn time, mỗi lần update giao diện phải quay lại Khi nào cần: Cần tạo video hướng dẫn, demo tính năng mới, hoặc screenshot tự động Được gì: Viết script JSON một lần, chạy lệnh là có video mới

2. Người muốn generate tài liệu + video cùng lúc

Vấn đề: Phải vừa viết docs vừa chụp ảnh màn hình thủ công Khi nào cần: Tạo marketing assets, documentation với hình ảnh + video Được gì: Vừa record video vừa chụp screenshot tại các điểm mong muốn

Các điểm chính

1. Script = JSON, không cần viết code Mình define các bước (click, gõ phím, đợi, scroll…) trong file JSON config. Không cần biết code. → Làm gì: Dùng npx webreel init để tạo file config mẫu, rồi sửa theo nhu cầu.

2. Hỗ trợ đủ thao tác trình duyệt Click, gõ text, scroll, drag-drop, chờ element xuất hiện, giữ phím modifier (Ctrl, Shift…), chuyển trang. → Làm gì: Xem bảng Actions trong docs để chọn action phù hợp với flow cần record.

3. Tự động thêm cursor + keystroke overlay Video ra có hiển thị con trỏ chuột và phím bấm, giống như đang thao tác thật. → Làm gì: Không cần làm gì thêm, mặc định đã có. Có thể tùy chỉnh theme nếu muốn.

4. Output đa dạng MP4 mặc định, nhưng cũng hỗ trợ GIF và WebM. → Làm gì: Đổi đuôi file trong config thành .gif hoặc .webm.

5. Tự động cài Chrome + ffmpeg Lần chạy đầu nó tự tải về, không cần cài thủ công. → Làm gì: Chạy npx webreel record lần đầu, đợi nó tải xong là xong.

6. Preview không record Chạy thử script trong browser hiển thị để kiểm tra trước khi record thật. → Làm gì: Dùng webreel preview thay vì record để test nhanh.

Quick Start

1. Cài đặt:

npm install webreel

2. Tạo project:

npx webreel init --name my-video --url https://example.com

3. Sửa file webreel.config.json thêm các bước cần record, ví dụ:

`{
  "videos": {
    "my-video": {
      "url": "https://example.com",
      "steps": [
        { "action": "click", "text": "Get Started" }`,
        `{ "action": "type", "text": "hello@example.com", "target": "input[name=email]" }`
      ]
    }
  }
}

4. Chạy record:

npx webreel record