跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 用 electron 肝了个跨平台客户端:中英文台词找影片素材
未分類
27 9 月 2020

用 electron 肝了个跨平台客户端:中英文台词找影片素材

用 electron 肝了个跨平台客户端:中英文台词找影片素材

資深大佬 : yedaxia 2

距离上个帖子一个多月了:分享一个可以通过台词找影片素材的在线工具。

这个期间修复了很多问题,完善了功能,并肝了个 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 这样的代表级应用,但这些产品背后都是有阵容豪华的技术团队的。如果是在正式的商用产品上,慎用!你要问问自己的团队有没有能力去填框架的坑,有没有能力去造轮子~

最后介绍一下我做的这个东西:

产品主要功能:

  • 支持中英文台词搜索在影片出现的时间点;
  • 在线轻松制作字幕图;
  • 在线剪切视频片段等。

适用人群:

  • 视频创作者和自媒体,可以用来找创作素材;
  • 英语学习者或者英语老师,找影片级的例句和发音。

目前是邀请注册制,点击这里注册账号

用 electron 肝了个跨平台客户端:中英文台词找影片素材

大佬有話說 (25)

  • 資深大佬 : NOspy

    有点意思,加油

  • 資深大佬 : zhangsimon

    这个点子应该别人也想过
    但 lz 执行力很强
    点个赞

  • 資深大佬 : zhangsimon

    顺便给 lz 提个建议
    官网背景可以用视频介绍下
    介绍语写完了,就是用你的服务从电影里剪出来这段宣传语

    这样,访客就能秒懂你的服务了

  • 資深大佬 : whatisnew

    这个会不会有版权的麻烦

  • 主 資深大佬 : yedaxia

    @zhangsimon 谢谢建议

  • 主 資深大佬 : yedaxia

    @whatisnew 会有。不过做了一些技术上的规避,在线看片是不支持的,预览是模糊版本的,只能看一两分钟~

  • 資深大佬 : JellyDong

    有意思,已申请邀请码~

  • 資深大佬 : shianiiiu

    nice

  • 資深大佬 : lxilu

    也就是说,不能用已有的 ffmpeg……
    何不 Java 做服务器用户浏览器显示前端呢?这得小多少啊

  • 資深大佬 : incomparable9527

    厉害呀

  • 資深大佬 : lysS

    不愧是 electron, 这么大

  • 資深大佬 : ansonsiva

    应该去 b 站宣传,up 主用的多啊这功能

  • 主 資深大佬 : yedaxia

    @lxilu 有 web 端了

  • 主 資深大佬 : yedaxia

    @lysS 应该还有很多优化空间,先上线,问题再慢慢整~

  • 主 資深大佬 : yedaxia

    @ansonsiva 好建议~

  • 資深大佬 : huiyifyj

    windows 下 electron 的应用真的又大又卡
    即使 mac 下体验还算 OK,现在我都尽量不用 electron 的

  • 資深大佬 : feiandxs

    是 electron-vue,还是另外的方案?

  • 資深大佬 : way2explore2

    electron + pure html + js + redux 我的

    https://github.com/tim-hub/TrackersAway

  • 資深大佬 : THP301

    看到 electron 就不下载了,主的想法不错的

  • 資深大佬 : lxilu

    我是说 electron 用 Node.js ,不如自己用 Java 写本地服务器啦

  • 資深大佬 : zj9495

    产品做的不错 帮顶~

  • 主 資深大佬 : yedaxia

    @zj9495 谢谢支持

  • 資深大佬 : yuankui

    叶大侠厉害!

  • 資深大佬 : wscanf

    new!

  • 資深大佬 : DoctorCat

    厉害。曾经也有类似的想法,后来想想没觉得价值多大就放弃了。祝好。

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具