ScreenCI icon

ScreenCI

ScreenCI 是一款專為開發者打造的工具,可用 Playwright 腳本建立產品影片,支援本機或 CI 錄製,幫團隊產出可隨 UI 變更重新執行的旁白教學與示範影片。

ScreenCI

Overview

ScreenCI 是一款專為開發者打造的產品影片工具,將教學影片視為程式碼。你可以在基於 Playwright 的 .screenci.ts 腳本中描述一段流程,ScreenCI 會驅動應用程式、錄製互動,並輸出帶有旁白、攝影機移動與疊加元素的精緻影片。

這套流程的設計目標是讓影片在 UI 變更後能重新生成。文件說明你可以在本機或 CI 中錄製,讓服務遠離你的原始碼與瀏覽器工作階段,並透過下載或 CDN 支援的靜態 URL 提供成品。

特色

以程式碼定義影片

在基於 Playwright 的 .screenci.ts 腳本中一次描述產品流程,接著讓 ScreenCI 驅動應用程式並根據這段程式碼輸出完成的影片。

本機與 CI 錄製

可在你的電腦上或 CI 中執行 CLI,錄製期間只有原始錄製資料與時間資訊會離開你的環境。

雲端渲染與發佈

ScreenCI 在雲端渲染旁白、縮放與動畫,並可將最新核准版本發佈到 CDN 支援的靜態 URL。

自動縮放攝影機移動

使用自動縮放追蹤畫面上的互動,不必為每次移動都手動設定縮放點。

時間軸素材與疊加層

可在時間軸上加入圖片、SVG 與 MP4 片段作為定時素材,並搭配程式化的 React 或 HTML 疊加層。

旁白與語言控制

可從 79 種支援語言中選擇旁白,並依方案支援多種語言、語音選項與由風格引導的旁白。

使用情境

  • 產品變更後維持教學內容最新

    將產品導覽寫成程式碼,之後當介面變更時重新執行同一個腳本,讓教學內容與目前的 UI 保持一致。

  • 在 CI 中自動產生影片

    在儲存庫工作流程中設定錄製,讓發佈或主分支推送時能產生更新後的影片,而不需要手動錄製。

  • 製作旁白示範與功能說明

    加入旁白、疊加層與定時媒體,為面向客戶的文件或行銷頁面製作精緻的產品示範。

  • 以代理協助的設定開始

    當你想要有引導式設定而不是手動逐一撰寫時,可與程式碼代理合作建立 ScreenCI 並產生第一支影片。

Pros and Cons

Pros

  • 原始碼仍保留在本機;服務在錄製期間只會接收原始錄製資料與時間資訊。
  • 同一個腳本在 UI 變更後可以重新執行,有助於讓影片與產品保持一致。
  • CLI 同時支援本機使用與 CI 工作流程,包括生成的 GitHub Actions 設定。
  • 產品在每個方案中都提供旁白、語言、素材與渲染選項的網頁編輯器。
  • 提供免註冊、免信用卡的免費試用,讓使用者可在付費前評估這套流程。

Cons

  • 文件未在已擷取文字中提供完整的端到端教學,因此這裡只能部分看到設定細節。
  • 部分功能受到方案限制,例如多種旁白語言、4K 輸出,以及 Business 方案上的某些語音選項。

FAQ

ScreenCI 如何運作?

ScreenCI 使用基於 Playwright 的腳本來描述產品流程,然後透過其服務錄製並渲染影片。文件說明你可以用程式碼代理設定,或自行撰寫腳本手動設定。

ScreenCI 可以在 CI 與本機執行嗎?

概覽說明 CLI 可以在你的電腦上或 CI 中執行。CI 設定頁解釋,產生的工作流程會使用 GitHub Actions 錄製,且設計上要與 Playwright CI 保持一致。

有免費試用或浮水印嗎?

定價頁指出免費試用最多可進行三次錄製,且會加上浮水印僅供評估。付費方案會移除試用限制,並可用於商業用途。

哪個方案適合團隊?

定價頁列出 Starter 供個人使用,Business 供團隊協作。頁面也說每個方案都包含旁白、語言、素材與渲染選項的網頁編輯器。

Quick Facts

分類
Developer Tool / Video Editing
主要工作流程
基於 Playwright 的腳本錄製產品流程並渲染影片
錄製模式
本機或 CI
輸出交付
下載或 CDN 支援的靜態 URL
支援的旁白語言數
79
網站
screenci.com