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

参考链接：

官方文档：timecatjs.com/

前言

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

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

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

有的！

那就是我接下来要讲的这个 npm 包------TimeCat！

安装

废话不多说，先按文档安装！

sh 复制代码

npm i timecatjs

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

sh 复制代码

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

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

html 复制代码

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

使用

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

ts 复制代码

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

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

更具体的代码可参考官方给出的案例：github.com/oct16/timec...

Vue3 Demo

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

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

Record.vue

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

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 生成】

本文作者：草梅友仁

本文地址：blog.cmyr.ltd/archives/6e...