LivCapture: Công cụ quay màn hình trình duyệt tích hợp AI, không cần cài đặt, không cần Backend

Việc tạo ra các bản demo sản phẩm chất lượng thường là một cơn ác mộng: quay màn hình thô, thiếu điểm nhấn con trỏ, không hiển thị phím tắt, và tốn hàng giờ để hậu kỳ thêm zoom hay phụ đề. Rıdvan Tülünay đã giải quyết vấn đề này bằng cách xây dựng LivCapture.

LivCapture là gì?

LivCapture là một ứng dụng quay màn hình chạy hoàn toàn trên trình duyệt. Nó không chỉ ghi lại hình ảnh mà còn tự động thêm các hiệu ứng trình bày ngay trong thời gian thực: hiệu ứng con trỏ, click chuột, hiển thị phím tắt, zoom, webcam overlay, chú thích và phụ đề dựa trên công nghệ Whisper của OpenAI.

Tại sao các công cụ quay màn hình truyền thống chưa đủ?

Hầu hết các công cụ hiện nay chỉ cung cấp một tệp WebM thô. Người xem sẽ gặp phải các vấn đề:

• Không thấy vị trí click chuột.
• Các phím tắt (như Ctrl+K) hoàn toàn vô hình.
• Không có khả năng zoom vào các chi tiết quan trọng.
• Phụ đề phải làm thủ công bằng công cụ khác.
• Webcam bị cố định và thiếu tính chuyên nghiệp.

Công nghệ đứng sau LivCapture

LivCapture hoạt động 100% phía client (client-side), đảm bảo quyền riêng tư vì không có video nào được gửi lên server. Stack kỹ thuật bao gồm:

• Trình duyệt (Chrome/Edge/Firefox): Môi trường thực thi chính.
• getDisplayMedia(): Truy xuất luồng màn hình.
• getUserMedia(): Truy xuất webcam và micro.
• MediaRecorder: Mã hóa video.
• Whisper (Local): Xử lý phụ đề ngay trên thiết bị.
• Canvas API: Vẽ các hiệu ứng đè lên video.
• FFmpeg.wasm: Xuất tệp MP4/GIF ngay trong trình duyệt.

Cơ chế hoạt động của hiệu ứng con trỏ và phím tắt

Thách thức lớn nhất là getDisplayMedia() không cung cấp metadata về tọa độ con trỏ. LivCapture giải quyết bằng LivCapture Helper (Chrome Extension) để thu thập tọa độ và sự kiện phím tắt ở cấp độ OS.

Đoạn mã xử lý hiệu ứng (Minh họa):

// Lắng nghe sự kiện từ extension
window.addEventListener("message", (e) => {
  if (e.data.type === "cursor") {
    cursorPos = { x: e.data.x, y: e.data.y };
  }
  if (e.data.type === "click") {
    clickEffects.push({ x: e.data.x, y: e.data.y, time: Date.now() });
  }
});

// Vòng lặp render để vẽ hiệu ứng lên Canvas
function renderFrame() {
  ctx.drawImage(videoElement, 0, 0);
  drawClickEffects(ctx, clickEffects);
  drawCursor(ctx, cursorPos);
  requestAnimationFrame(renderFrame);
}

Phát hiện phím tắt thông minh

LivCapture chỉ tập trung vào các phím tắt có phím bổ trợ (Ctrl, Cmd, Alt, Shift) để tránh ghi lại nội dung gõ phím cá nhân:

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) {
    const parts = [];
    if (e.ctrlKey) parts.push("Ctrl");
    // ... xử lý các phím khác
    shortcutBadges.push({ keys: parts.join("+"), timestamp: performance.now() });
  }
});

Quy trình xuất video (Export Pipeline)

Sau khi dừng ghi, người dùng có thể xuất video qua các định dạng:

• WebM: Trực tiếp từ MediaRecorder.
• MP4/GIF: Thông qua FFmpeg.wasm.

Tại sao nên dùng LivCapture Helper?

Mặc dù LivCapture có thể hoạt động độc lập, nhưng khi cài thêm Extension, bạn sẽ có:

• Tọa độ con trỏ chính xác.
• Hiệu ứng click chuột kèm âm thanh.
• Hiển thị phím tắt chuyên nghiệp.
• Tính năng zoom khi đang quay.

Đối tượng sử dụng

• Đội ngũ SaaS: Tạo demo sản phẩm và hướng dẫn tính năng.
• Đội ngũ hỗ trợ: Ghi lại lỗi (bug reports) và quy trình xử lý.
• Giáo dục: Tạo video đào tạo, onboarding.

Trải nghiệm ngay

Bạn có thể truy cập livcapture.com để bắt đầu quay ngay mà không cần đăng ký (giới hạn 5 phút). Đây là một sản phẩm của Liv Yazılım, đội ngũ đứng sau nền tảng phân tích dữ liệu AI LivChart.