JS 專案拾粹 四: TimeCat 超高壓縮比的網頁無損錄屏

專案 github 地址
谷歌瀏覽器示例

專案介紹摘自 readme 中文

TimeCat 是一套網頁錄屏的解決方案，利用其獨特的演算法，提供超高效能，超高壓縮比的網頁無損錄製。可以廣泛運作於監控系統，行為分析，案例覆盤，遠端教育，低流量視訊協同等場景.

安裝

使用 NPM

$ npm i timecatjs -D

在瀏覽器中匯入

在瀏覽器中新增指令碼標籤並使用全域性變數 timecat

• jsDelivr
• UNPKG

用法

引入 SDK

// 從 module
import { record, replay } from 'timecatjs';

// 從 cdn
const { record, replay } = window.timecat

錄製

// record page
interface RecordOptions {
    audio?: boolean // if your want record audio
    emitter?: (data: RecordData, db: IndexedDBOperator) => void
}

// default use IndexedDB to save records
const ctrl = record(RecordOptions)

// if you wanna send the records to server
const ctrl = record({
    emitter: (data, db) => fetch(<Server URL>, {
            body: JSON.stringify(data),
            method: 'POST',
            ContentType: 'application/json'
        })
})

// 停止錄製
ctrl.unsubscribe()

• 錄製示例

重播

// replay record
interface ReplayOptions {
    socketUrl?: string // if live mode
    proxy?: string // if cross domain
    autoplay?: boolean // autoplay when data loaded
}

replay(ReplayOptions)

• 重播示例

本作品採用《CC 協議》，轉載必須註明作者和本文連結