项目地址：996wuxian/template-electron at transcribe
如果对您有帮助，希望给个start
前言：
Trae的应用界面，不得不说，这个UI很合我胃口
在我之前搭的electron模板的基础上，加上Trae的帮助，使用了electron + vue3 + vite + recordrtc实现的一个录屏应用, 主要实现了窗口采集、直接录屏、框选录屏、录取声音、暂停/继续、文件保存、窗口刷新等功能，唯一不足的点是，框选录屏的视频没有进度条和总时长，直接录屏是没问题的，希望后续能优化。具体页面截图如下所示： electron模板：996wuxian/template-electron: 一个使用Electron + Vue3 + Ts + Vite + Pinia + UnoCss + Naive UI搭建的基础Electron模板，其下分支包含todo待办应用和transcribe录屏应用
应用窗口
框选录制
总时长和进度条问题
在使用recordrtc的过程中，还是遇到了一些问题，录屏后的视频是没有总时长和进度条的，如图：
在这一点上，Trae没有能给我正确的修复，于是我去看了github关于recordrtc的issue,终于被我找到了解决方案：
要将blob流再用getSeekableBlob获取一次，就可以了，同时还要用cdn引入ebml.js
进度条就会出现了：
但是框选录屏生成的视频还是无法显示进度条和总时长，框选是用的canvas来绘制，整体框选的录制流程：
即原始视频流 -> video元素播放 -> canvas绘制 -> canvas生成新的流 -> RecordRTC录制
简单理解：canvas将videoRef的video的视频画下来，然后RecordRTC来负责录
如果有大佬感兴趣，可以去我的github看看能不能整出来，小子口袋紧张，可以以一杯瑞子做酬劳哈哈，感激。
总结
这个过程中，对于一些问题，Trae处理起来也是有点够呛，也有可能是我表达问题不够准确导致。也偶尔会遇到应用代码的时候会重复一些代码片段插入，或者网络问题超时无法应用，也有无法识别到代码改动，其实是有改动的，但是无法应用等问题。
不过好在慢慢调整和结合百度后，大部分的问题都解决了。以前没做过关于视频的录制方面的内容，这几天在玩electron就突发奇想了。Trae的出现也帮我省了很多功夫，页面的绘制，视频的获取，整体流程的改进，都给我提供了很多帮助，提高了我的开发效率。我没怎么用过cursor，相比起来如何也无所知，但是Trae给我的体验总体还是好的。
另外，还有一个todo待办的应用也在其分支模板下，各位大佬感兴趣可以在releases下载体验~
