用 electron 肝了个跨平台客户端：中英文台词找影片素材
yedaxia · YeDaxia · 2020-09-24 17:40:48 +08:00 · 4135 次点击这是一个创建于 1553 天前的主题，其中的信息可能已经有所发展或是发生改变。
距离上个帖子一个多月了：分享一个可以通过台词找影片素材的在线工具。
这个期间修复了很多问题，完善了功能，并肝了个 PC 客户端，解决了视频转码的问题。
由于个人精力有限，在选择技术方案的时候，跨平台就成了必要条件~
个人最熟悉的是 Java，JavaFX 是个很好的选择。不过 web 端已经已经用了 vue 来写，大部分页面可以直接移植到 electron 中，这个诱惑实在太大，所以决定选择 electron 。
说说 electron 的开发体验。
这个客户端主要是通过 vue + electron + ffmpeg 来完成的。
页面开发
页面开发部分和 vue 一致，热重载刷新页面，客户端开发中，页面代码编写是大头，这个开发体验深得我心，页面开发效率蹭蹭提升。相信做过移动客户端开发的同学对此深有体会，改动一点页面就要重新编译一次是得多麻烦，用过 Flutter 的同学，相信都不想再回去 Android 原生开发了。
原生部分
由于我对 nodejs 不是特别熟悉，基本就是一边用一边查文档的状态。因为 electron 有两个环境（ electron 实际就是基于 Chromium 的一个 cs 架构应用），所以集成 ffmpeg 和处理耗时任务的过程遇到不少坑。
打包和更新
基于 electron 的实现原理，打出来的包都超级大。为了减少了体积，我只好把 ffmpeg 的执行文件放到服务端，然后按照不同平台进行下载，这无疑增加了复杂度~
开发环境中正常的包，打包好之后可能就不能用了；同样的代码，从 mac 切换到 windows 可能就不能正常工作了，这些坑都得填~
不过抚慰人心的是：electron 支持热更新 ! 这个特性对于客户端来说太重要了~ 让人们下载安装一个应用是如此困难重重，而卸载只是一瞬间的事情~
数据统计
我没有找到直接支持 electron 的数据统计第三方平台，后来看了一个帖子，最后是集成了 google analyse，算是曲线救国了。
差不多就这样吧，总的来说，electron 像是个极客工具，还有不少亟待解决的问题，生态还远没有起来，虽然有 vscode 、atom 这样的代表级应用，但这些产品背后都是有阵容豪华的技术团队的。如果是在正式的商用产品上，慎用！你要问问自己的团队有没有能力去填框架的坑，有没有能力去造轮子~
最后介绍一下我做的这个东西：
产品主要功能：
- 支持中英文台词搜索在影片出现的时间点；
- 在线轻松制作字幕图；
- 在线剪切视频片段等。
适用人群：
- 视频创作者和自媒体，可以用来找创作素材；
- 英语学习者或者英语老师，找影片级的例句和发音。
目前是邀请注册制，点击这里注册账号
 |
1
NOspy 2020-09-24 17:44:57 +08:00  1
有点意思，加油
|
 |
2
zhangsimon 2020-09-24 18:16:51 +08:00
这个点子应该别人也想过
但 lz 执行力很强 点个赞👍 |
|
3
zhangsimon 2020-09-24 18:24:55 +08:00 1
顺便给 lz 提个建议
官网背景可以用视频介绍下 介绍语写完了，就是用你的服务从电影里剪出来这段宣传语 这样，访客就能秒懂你的服务了 |
 |
4
whatisnew 2020-09-24 18:27:05 +08:00
这个会不会有版权的麻烦
|
 |
5
yedaxia OP @zhangsimon 谢谢建议
|
 |
7
JellyDong 2020-09-24 19:21:10 +08:00
有意思，已申请邀请码~
|
 |
8
shianiiiu 2020-09-24 20:09:44 +08:00
nice
|
 |
9
lxilu 2020-09-24 22:34:21 +08:00 via iPhone
也就是说，不能用已有的 ffmpeg……
何不 Java 做服务器用户浏览器显示前端呢？这得小多少啊 |
 |
10
incomparable9527 2020-09-24 22:35:08 +08:00 via Android
厉害呀
|
 |
11
lysS 2020-09-24 23:00:10 +08:00 1
不愧是 electron， 这么大
|
 |
12
ansonsiva 2020-09-24 23:06:43 +08:00
应该去 b 站宣传，up 主用的多啊这功能
|
 |
16
huiyifyj 2020-09-25 00:20:30 +08:00
windows 下 electron 的应用真的又大又卡
即使 mac 下体验还算 OK，现在我都尽量不用 electron 的 |
 |
17
feiandxs 2020-09-25 01:08:05 +08:00
是 electron-vue，还是另外的方案？
|
 |
18
way2explore2 2020-09-25 07:13:47 +08:00
|
 |
19
THP301 2020-09-25 07:32:25 +08:00 1
看到 electron 就不下载了，楼主的想法不错的
|
|
20
lxilu 2020-09-25 08:43:38 +08:00 via iPhone
我是说 electron 用 Node.js ，不如自己用 Java 写本地服务器啦
|
 |
21
zj9495 2020-09-25 09:33:04 +08:00 1
产品做的不错 帮顶～
|
 |
23
yuankui 2020-09-25 11:43:32 +08:00 1
叶大侠厉害！
|
 |
24
wscanf 2020-09-25 19:18:00 +08:00
new!
|
 |
25
DoctorCat 2020-09-25 20:19:16 +08:00 1
厉害。曾经也有类似的想法，后来想想没觉得价值多大就放弃了。祝好。
|
 |
26
ilolita 2020-09-28 02:02:33 +08:00 via iPhone
看到是用 electron 搞的就没兴趣了
|
 |
27
LeemengG 2020-09-28 10:45:22 +08:00
很好奇，这个字幕和视频内容是如何匹配上的，这么大的工作量嘛？
|
 |
29
no13bus 2023-01-02 09:42:41 +08:00
@yedaxia 好奇视频是怎么拿到的？每一句台词都用 ffmg 截出上下文那段视频生成出来吗？那岂不是要存储好多视频片段？
|
Select Language