参考链接：
前言
网页录屏是一个常见的需求，但具体实现起来有许多需要考虑的地方。
比如说，如果以视频格式保存，无论是上传还是保存到 OSS，都需要耗费大量的流量和硬盘，所以出于成本考虑，往往需要降低视频时长和画质，效果就不是很好了。
那么，有没有一种体积小，但又能清晰的录制网页的软件呢？
有的！
那就是我接下来要讲的这个 npm 包——TimeCat！
安装
废话不多说，先按文档安装！
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
看这进度条和小窗播放，是不是和 TimeCat 有七分像？唯一的区别是 sentry 还帮忙打码了，只会记录用户的操作，而不会记录具体的内容。
实际上，如果仅用于记录日志，是需要和 sentry 一样对提交的内容进行去敏感处理的，这样有助于保护用户隐私。
当然了，如果是要具体录制某些内容，那自然还是 TimeCat 更好，毕竟全打码了还怎么看啊！
总结
TimeCat 是一个可以实现轻量级网页录屏和播放的 npm 包。它可以帮助我们在网页中录制视频，并以较小的体积保存。使用 TimeCat，我们可以降低视频时长和画质，从而减少流量和硬盘的消耗。安装 TimeCat 非常简单，只需执行npm i timecatjs命令即可。在使用 TimeCat 时，我们可以实例化 Recorder 对象来录制视频，也可以实例化 Player 对象来播放视频。在 Vue 项目中使用 TimeCat 也非常简单，只需在组件中引入 TimeCat 并实例化 Recorder 或 Player 对象即可。总的来说，TimeCat 是一个非常方便和实用的工具，可以帮助我们实现轻量级网页录屏和播放。
【总结由 Chat LangChain 生成】
本文作者：草梅友仁
本文地址：https://blog.cmyr.ltd/archives/6e855105.html
版权声明：转载请注明出处！
