如何使用 TimeCat 实现轻量级网页录屏和播放

参考链接:

官方文档:https://timecatjs.com/

前言

网页录屏是一个常见的需求,但具体实现起来有许多需要考虑的地方。

比如说,如果以视频格式保存,无论是上传还是保存到 OSS,都需要耗费大量的流量和硬盘,所以出于成本考虑,往往需要降低视频时长和画质,效果就不是很好了。

那么,有没有一种体积小,但又能清晰的录制网页的软件呢?

有的!

那就是我接下来要讲的这个 npm 包——TimeCat!

image-20231204211410672

安装

废话不多说,先按文档安装!

npm i timecatjs

如果你只想安装录制模块或播放模块,可以执行以下命令

# 只安装录制模块
npm i @timecat/recorder
# 只安装播放模块
npm i @timecat/player

当然了,直接通过 CDN 引入也是可以的。

<script src="https://cdn.jsdelivr.net/npm/timecatjs"></script>
<script src="https://unpkg.com/timecatjs"></script>

使用

在安装好依赖之后,就要在项目中使用了

import { Recorder, Player } from 'timecatjs';
const recorder = new Recorder()
const player = new Player()

在这里要注意的是,当 Recorder 或 Player 实例化的时候,就会开始生效,即开始录屏和开始播放。

更具体的代码可参考官方给出的案例:https://github.com/oct16/timecat-demo/tree/record-and-replay

Vue3 Demo

官方给出了一个 React 版本的例子,那我这里就补充一下 Vue 的例子吧。

使用的 Vue 版本为 Vue 3.3,使用 setup 语法。

Record.vue

<template>
    <div>
        Recorder
    </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted } from 'vue'
import { Recorder } from 'timecatjs'

let recorder: Recorder

onMounted(() => {
    recorder = new Recorder() // 当组件挂载的时候,实例化 Recorder,开始录制视频
})

onBeforeUnmount(() => {
    recorder?.destroy() // 当组件销毁的时候,把 Recorder 销毁掉,停止录制视频
})

</script>

Player.vue

<template>
    <div
        className="timecat-replay"
    ></div>
</template>

<script lang="ts" setup>
import { Player } from 'timecatjs'
import { onBeforeUnmount, onMounted } from 'vue'

let player: Player

onMounted(() => { 
     // 当组件挂载的时候,实例化 Player,开始播放视频
    player = new Player({
        target: '.timecat-replay', 
    })
})

onBeforeUnmount(() => {
    player?.destroy()  // 当组件销毁的时候,把 Player 销毁掉,停止播放视频
})
</script>

<style lang="scss" scoped>
.timecat-replay {
    margin:0 auto;
    width: 600px;
    height: 400px
}
</style>

具体逻辑跟 React 版本一样,完整的项目就请读者自行补充了。

额外联想

如果你有使用过 sentry 的话,可以发现里面有一个跟 TimeCat 很像的功能:Replays

image-20231204213508541

看这进度条和小窗播放,是不是和 TimeCat 有七分像?唯一的区别是 sentry 还帮忙打码了,只会记录用户的操作,而不会记录具体的内容。

实际上,如果仅用于记录日志,是需要和 sentry 一样对提交的内容进行去敏感处理的,这样有助于保护用户隐私。

当然了,如果是要具体录制某些内容,那自然还是 TimeCat 更好,毕竟全打码了还怎么看啊!

总结

TimeCat 是一个可以实现轻量级网页录屏和播放的 npm 包。它可以帮助我们在网页中录制视频,并以较小的体积保存。使用 TimeCat,我们可以降低视频时长和画质,从而减少流量和硬盘的消耗。安装 TimeCat 非常简单,只需执行npm i timecatjs命令即可。在使用 TimeCat 时,我们可以实例化 Recorder 对象来录制视频,也可以实例化 Player 对象来播放视频。在 Vue 项目中使用 TimeCat 也非常简单,只需在组件中引入 TimeCat 并实例化 Recorder 或 Player 对象即可。总的来说,TimeCat 是一个非常方便和实用的工具,可以帮助我们实现轻量级网页录屏和播放。

【总结由 Chat LangChain 生成】