2023-12-04 如何使用 TimeCat 实现轻量级网页录屏和播放
参考链接:
前言
网页录屏是一个常见的需求,但具体实现起来有许多需要考虑的地方。
比如说,如果以视频格式保存,无论是上传还是保存到 OSS,都需要耗费大量的流量和硬盘,所以出于成本考虑,往往需要降低视频时长和画质,效果就不是很好了。
那么,有没有一种体积小,但又能清晰的录制网页的软件呢?
有的!
那就是我接下来要讲的这个 npm 包——TimeCat!
安装
废话不多说,先按文档安装!
1 | npm i timecatjs |
如果你只想安装录制模块或播放模块,可以执行以下命令
1 | # 只安装录制模块 |
当然了,直接通过 CDN 引入也是可以的。
1 | <script src="https://cdn.jsdelivr.net/npm/timecatjs"></script> |
使用
在安装好依赖之后,就要在项目中使用了
1 | import { Recorder, Player } from 'timecatjs'; |
在这里要注意的是,当 Recorder 或 Player 实例化的时候,就会开始生效,即开始录屏和开始播放。
更具体的代码可参考官方给出的案例:https://github.com/oct16/timecat-demo/tree/record-and-replay
Vue3 Demo
官方给出了一个 React 版本的例子,那我这里就补充一下 Vue 的例子吧。
使用的 Vue 版本为 Vue 3.3,使用 setup 语法。
Record.vue
1 | <template> |
Player.vue
1 | <template> |
具体逻辑跟 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
版权声明:转载请注明出处!