分类
分享

应用(直播)创意:弹幕收集器(BB酱)

BB酱 v0.1

2021-03-27 更新

经过近两周的开发,我已经用上了 BB酱 v0.1。目前支持以下功能:

  • 支持读取并上传弹幕
  • 按用户名搜索、筛选
  • 取特定时间段弹幕进行抽奖

在 B 站直播了一段时间,发现 B 站没有弹幕记录——其实斗鱼也没有。这里面的产品逻辑应该是:弹幕比评论更短、更情绪化、与视频内容关系更紧密,量也太大,独立的弹幕存在价值稀薄,单独做一个列表的性价比很低。

不过我觉得,对于主播来说,弹幕还是有一些价值的,尤其是我这种没什么人看的小主播,很多时候翻翻弹幕能找回很多继续播的动力。

所以我想做一个浏览器扩展,自动收集直播里的弹幕,然后保存起来。这样需要的时候我就能回看,或者搜索,野炊就经常用这个功能跟弹幕互怼。

另外,B 站的直播互动功能不强,连基础的弹幕投票和弹幕抽奖都不支持,也可以利用这个插件实现。

这个想法吸引我的还有几个点,我觉得很适合用来做直播:

  1. 足够简单,一次直播半个小时就能完成基本功能
  2. 涉及到的技术点也不少,比如 Chrome extension API、Vue 项目搭建、Mutation Observer、Serverless 等,展开讲能讲不少,不展开直接口播介绍一下也可以
  3. 做出来之后可以给其他主播用
分类
工具

视频粗剪工具

今年业余时间主攻视频和直播,有大量视频剪辑的需求。一个一个细细剪对我来说实在不现实,一直想找人帮忙——但是没钱,所以退而求其次,想找工具自动化处理。所以才有了上篇博客:使用 jumpcutter 粗剪视频,移除静音片段

可惜的是,这个工具不够强大,也不太合适我用。我不是 Vloger,我的视频大部分都是对着屏幕讲解代码和效果,所以我不太可能用👍👎拆分视频,也无法让👍👎帮我处理视频。我需要的是:

  1. 自动剪掉“嗯”、“啊”、“哦”、“这个”、“那个”
  2. 自动剪掉没有声音的空白帧
  3. 根据语音命令,自动生成补帧:
    1. 强调“XXXX”:自动在屏幕上打上“XXXX”几个大字
    2. 前面这段不要:提醒我要删掉一段内容
    3. 插图“XXXX”:插入一张图片,内容是“XXXX”搜索的结果
  4. 修改文字,等同修改视频
  5. 利用剩下的文字自动生成字幕
  6. 导出 Pr/FCP 等的项目工程文件,方便继续编辑
  7. 在线剪辑

大约是即整合这三个视频之所长:

Automatic on-the-fly video editing tool!
我開發了自動剪輯神器!讓Youtuber更快產片!剪輯師接更多案!【六指淵 Huber】
Introducing Descript

目前看来,除了在线剪辑、输出配置文件,其它功能都不太难:

  1. 从视频中提取音频(ffmpeg)
  2. 使用阿里云 STT 服务将音频转换成包含分词、包含时间节点的字幕文件
  3. 展示文案,允许编辑,跳到指定位置播放
  4. 输出 ffmpeg 命令,直至输出视频

似乎这些我都能做,好像可以试着动手了。但是这样一来,就没时间剪上周录的视频了……不知道究竟是工欲善其事必先利其器,还是给自己挖下一个新坑呢……

分类
工具

使用 jumpcutter 粗剪视频,移除静音片段

今年打算在直播和视频上做点努力,所以通过直播录了不少视频,周末想剪一剪,但是一方面我不擅长剪视频,另一方面也没有合适的工具,所以颇费了一些周折。

后来发现 jumpcutter,按照其作者的设计,它可以识别视频中的 👍 和 👎,只保留 👍 的片段,剪掉 👎 的片段;并且可以自动剪掉没有声音的部分,这样视频可以很快完成初剪。

前面的功能很炫酷,不过对于我来说不太实用,后面的功能比较有价值,于是我试用了一下,记录过程如下:

# clone 代码到本地
git clone git@github.com:carykh/jumpcutter.git

# 安装依赖,位于 requirements.txt
pip3 install Pillow audiotsm scipy numpy pytube

# 然后就可以使用了
python3.9 jumpcutter.py --input_file left.mp4 --output_file ./1.mp4 --silent_threshold 0.06 --silent_speed 99

其它参数如下:

--input_file目标视频
--urlYouTube 视频,国内用户用途不大
--output_file输出视频
--silent_threshold静音阈值,即多小的声音可以认为是有声音的(浮点数,0~1,默认 0.03)
--sounded_speed有声音的片段,以怎样的速率播放(浮点数,默认 1)
--silent_speed静音的片段,以怎样的速度播放(浮点数,默认5,即 5 倍速度)
--frame_margin在有声音的片段两边保留多少间隔(默认1)
--sample_rate声音取样率
--frame_rate帧数
--frame_quality质量
参数列表

比如前面我用的命令,就是认为小于 0.06 的声音为静音,静音播放速率 99(基本上直接跳过了)。

我处理了两段视频,感兴趣的同学可以试一试:

接下来我还想做两个功能,有了这两个功能视频处理后基本就能满足我的需求了:

  1. 找到“嗯”、“哦”、“那个”等无意义的语气助词,把它们干掉
  2. 识别“上一段不要”这样的语音命令,并且找到最合适的片段干掉
分类
工具

Windows 10 配置 WSL2 以及图形界面

前阵子把台式机的 WSL 升级到了 WSL2,顺便配置好图形界面,写篇博客记录一下。

0. 卸载 WSL,开启 CPU 虚拟化功能

如果之前安装过 WSL,需要先备份重要数据,然后卸载,再安装 WSL2。

重启,在 BIOS 设置里开启 CPU 虚拟化支持。

1. 简单安装:利用 Windows Insider

加入 Windows Insider 计划,升级到预览版本(>=20262),直接安装。好处是方便,而且可以安装最新版本,可以访问 Linux 分区。

坏处是不太稳定,预览版嘛。我觉得不太放心,决定还是在稳定版上安装。

2. 手动在 Windows 10 标准版上安装

2.1 检查 Windows 10 版本

需 >= 1903(18362)。我每周更新,没有问题。

2.2 启动虚拟化支持

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

2.3 下载 WSL2 升级包并安装

WSL2 Linux kernel update package for x64 machines

2.4 配置 WSL 默认版本为 2

# 设置 WSL 默认版本
wsl --set-default-version 2

# 列出所有 WSL 版本
wsl --list --verbose

# 将特定发行版设置为指定版本
wsl --set-version <distribution name> <versionNumber>  

2.5 在 Microsoft 商店里安装 Linux 发行版

我安装的是 Ubuntu 20.04。安装后需要进行一些配置工作,此处不再赘述。

至此,WSL2 配置完成,接下来配置图形界面。

3. 配置 WSL2 的图形界面

3.0 更新系统

按照惯例先把能更新的系统组件更新到最新:

sudo apt update
sudo apt upgrade

3.1 安装 GUI 组件

sudo apt install -y tasksel
sudo tasksel install xubuntu-desktop
sudo apt install gtk2-engines

WSL2 目前并不支持图形界面,所以这里计划让 Ubuntu 使用 Windows X-server 来绕过。安装的过程会比较久,因为要下载很多东西,请耐心等待。

3.2 配置显示器信息

接下来要配置显示器信息,方便 Linux 使用:

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0
export LIBGL_ALWAYS_INDIRECT=1
sudo /etc/init.d/dbus start &> /dev/null

把上面这段配置加入 ~/.bashrc,当我们登入 WSL 时,就会自动完成配置。不过这样一来,每次登入都要敲密码,也有点麻烦,所以可以自己取舍一下。或者把上面的配置单独存放一个脚本文件,需要使用 GUI 的时候再运行启动。

3.3 在 Windows 10 安装 X-server

参考文档中推荐了两个软件:VcXsrv(免费)和 x410(收费)。我本来想花钱点,可是后者不支持国区购买,所以只好选用 VcXsrv。

下载,安装,启动 VcXsrv。接下来 VcXsrv 会要求我们配置使用方式,依次选择“Multiple Windows”、“Start no client”,并且勾选“Disable access control”,然后保存配置文件到本地,完成启动。以后可以通过双击配置文件启动 VcXsrv。

此时,在系统托盘里可以看到 VcXsrv 服务。

3.4 启动 GUI 程序

接下来正常启动 GUI 程序即可,比如 Firefox:

sudo apt install firefox

# 安装完成后,启动 firefox
# 注意,这里必须用 sudo
sudo firefox 

总结&参考文档

至此,安装配置完成。安装配置中我参考了以下文章:

遗留问题

涉及到硬盘操作的功能会非常慢,比如打开目录,到目录内容完全呈现出来,需要数分钟之久。我记得当年初用 WSL 的时候也遇到过这个问题,后来通过关闭安全扫描解决了,不知道这次是不是同样的问题。(这次没找到关闭安全扫描的位置……)

分类
分享

喜获思否 Top Writer

(其实年前就发给我了,现在才想起来拍照发……)

2020年,书没有写完,视频也没录完,不过花了很多时间在思否上答题。基本上从年初坚持到年尾,每天至少回答一个问题,能够占据着年度排行榜的一个位置。国庆后工作压力增大,没能坚持住,慢慢掉出排行榜。

幸运的是最终得到思否的认可,获评问答版 2020 Top Writer。感谢思否赋予我这项荣誉,也感谢思否赠送卫衣一件。

(去年坚持锻炼还是有效果的,开始我还担心 3XL 的卫衣会穿不上,没想到还挺合身。)

不过今年可能很难再接再厉了,答题很消耗能量,不是不会答,主要是没有好问题。更有不少鸡贼提问者,先提出问题,等待别人回答,自己验证通过,然后自己答一遍,再把自己选择为最佳答案,骗取声望。

今年打算多输出主观、成体系的内容,播客、视频、项目、书。短期计划先做直播,争取能收获一些稳定的观众群体,把小课堂群扩一扩,这样将来做什么都方便。跟同学们讨论了一下,从斗鱼迁到 了 B 站。作严肃内容的话,B 站的确比斗鱼更合适,对小主播也更友好。

总之吧,今年我厂有希望宏图大展,希望我自己也能在内容领域取得一些新的进展。

分类
招聘

代友招聘:每日优鲜 BI 高级前端

有个关系很好的朋友在每日优鲜负责 BI 系统,现在需要 一名 高级前端开发。

薪资范围:看能力,16个月,股票期权看级别

工作地点:北京望京南

岗位描述:

  1. 负责数据开发平台的前端架构和研发
  2. 参与智能分析平台的前端架构和研发
  3. 通过沉淀和抽象业务场景,打造低代码研发环境及工程落地

岗位要求:

  1. 本科以上学历,计算机相关专业
  2. 熟练掌握JavaScript,CSS,HTML等前端技术
  3. 至少深度用过一种主流前端框架( React \ Vue \ Angular等),并深入理解其设计原理
  4. 熟悉数据可视化经验优先,熟悉低代码技术者优先
  5. 主动、皮实、乐观、有担当,逻辑分析和解决问题能力强
  6. 良好的学习能力和团队合作意识,有技术追求,乐于分享

有意者请直接跟我联系,我初审后内推。

分类
分享

GitChat 的问题

目前来看,GitChat(gitbook.cn,简称 GC) 已经黄了。网站还在,但是已经基本没人运营。我认识的主创人员也都走了,所以把之前想吐没吐的槽吐一下吧。

0. 起高楼

我跟 GC 结缘较早。基本上,刚好在我投身知识付费领域的时候,GitChat 创办,然后我就加入做了一场:《第一场 GitChat 总结》。

坦率地说,当时我对 GitChat 的印象不错,主要有三个原因:

  1. 采用众筹模式,创作者在开始创作之前就已经对用户需求、用户反馈有一些准备,分享更加有的放矢。尤其对于我这种选题偏门的人来说,很有参考价值。
  2. 文字内容有利于检索。相对于其它网站的视频课程,文字内容可以被更多人找到(如果网站主允许的话,GC 实际上不允许,搜索只能搜到简介)。
  3. 每场 Chat 的最后一个环节,GC 会把订阅者和作者拉到一个群里进行交流。我非常喜欢这个环节,可以交流很多内容,还能获得一个关系群。(可惜的是,交流完之后他们就会把群解散。)

我觉得,GC 很好地填补了技术分享领域的一块空白:中篇收费文章,一次性说清楚一件事,不贪多:

  1. 比短文(例如我的博客)更系统、更完整、更有参考价值。很多时候你很难靠一篇博客完成一项任务,需要多看多试;而长文可以。拿来当参考书很好用。
  2. 比书本更聚焦,阅读压力更小,可以利用碎片时间,稳定的学会一项技能、了解一个知识点。
  3. 文字内容方便检索,可以覆盖更多人群,利用搜索引擎流量。

主创人员很有想法,很熟悉行业,也很有执行力。GC 产品有不少值得称道的创新点,假以时日,凭借合适的市场补位,应该可以有所成就。

1. 宴宾客

接下来我在 GitChat 上创建了多次 Chat,还不断记录下一些 Chat idea,从我的博客可以看到:https://blog.meathill.com/?s=gitchat

GC 也不断拓展运营方向。首先增设专栏,即加长版 Chat,长度最长可以接近书本。接下来引入年卡,首充打折,¥512/年,可以看所有 Chat(能看多少专栏我不太记得了)。对了,还有严选,即品质比较好的文章,可以有区别于普通文章的标记,相当于平台为作品背书,可以卖得更好。

专栏的竞品不少,掘金也在做,而且投入的资源更多;传统图书虽然不挣钱,但是品级高,所以大家也都愿意做。年卡价格其实不贵,Chat 定价多半在 10~20之间,512 相当于能看 50 篇高质量的长文,即使暂时用不上,也可以先加到已购里,等需要的时候在看。

后来,GC 出了一篇爆款,好像叫《Java 200 道面试题全解析》,卖出了 1w+。我感觉,很多变形操作就是从这篇爆款面世后出现的……

2. 楼塌了

在爆款之前,GC 存在的最大问题就是内容稂莠不齐。跟其它平台比起来,GC 是行业新人,缺少积累,所以作者门槛设得比较低。有些作者甚至对自己写的内容都搞不清楚;有些作者文笔很差,前言不搭后语;有些作者会在用户群里发盗版资源,拉人头报名自己的 Chat……

GC 团队似乎没有什么特别好的办法,只好推出“严选”标签,帮好文章背书。但是 GC 是专业平台,编辑本身对技术不是很在行,所以严选标签的选择也一言难尽……

这个问题随着爆款出现变得更加严重。爆款有成瘾性,不仅对作者,对平台更是如此。从《200+ Java 面试题》之后,普通作者的生存环境更加严酷。一方面,混杂其中的低端垃圾文拉低了整个平台的质量,付费阅读很少,大部分都是年卡会员打卡,分成很少。另一方面,平台不断把有限的资源投入到推广爆款文章和“看起来像”爆款文章的文章里面,一时间,“面试题”与“面试技巧”齐飞,“进大厂”共“快拿 offer”一色。普通作者(就是我)的文章更难出头,甚至连想加“严选”都要跟编辑反复沟通。

而普通作者的微信群沟通更是直接被取消了。

于是,我的创作欲望越来越低;别的作者也是如此,微信群也越来越沉寂。终于有一天,有个作者问:“GitChat 是不是黄了?”没人回答,可能真的是黄了吧。

3. 总结

在我看来,GitChat 初期的产品定位有独到之处,产品形态也做得不错。但是运营时遇到两个问题:

  1. 作者能力良莠不齐,作品质量参差不齐。为了降低读者购买的决策成本,加设年卡;结果又降低了作者的收益,进而降低了创作热情。
  2. (可能)由于资金压力和流量成本,片面追求爆款。导致平台上一时间充斥着各种无营养的面试文,损害了真正知识获取者的体验。

当然,吐槽容易,解决问题很难。即使假设大家都现金购买,我一篇文章也不过几百块,完全覆盖不了我写文章的成本。所以,搭建一个作者愿意写,读者愿意花钱看的中篇平台,还有编辑负责内容审核和读者群搭建,这个商业模式是否真的成立,我也说不准。

不过,我真的希望有个这样的长文平台,希望将来会有。

分类
css

重发老视频:使用 CSS 制作工序流程图

整理之前录的视频,发现一个漏掉没有上传的:

这个视频里,我演示了如何使用纯 HTML + CSS 制作工序流程图。涉及到的技术包括:

  1. display:flex Flex 布局
  2. 使用 order: N 调整显示顺序,以实现响应式
  3. 使用 position:XX 调整定位

虽然项目不大,不过大部分布局相关的技术都有所涉及,很适合刚入门和初级同学学习。


今年想继续在直播、视频方面发力,希望大家支持。如果有什么想听的想看的想学的,也欢迎点菜。

分类
前端工具链

Tailwind.css + Postcss 笔记

0. 缘由

去年,一篇《Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business》在我的时间线上刷屏,作为 side project 和自由职业的翘楚,他的产品和商业项目十分令人羡慕。

所以,我一直想找个机会试用一下 Tailwind.css。这次春节,想着放松休闲一下,就开了个小项目,尝试一下新技术栈:

  1. Vue3 全家桶
  2. Tailwind.css + PostCSS
  3. Webpack 工具链

这篇笔记用来记录心得和体会。


1. 基础

官方网站:https://tailwindcss.com/

2. 安装&配置

npm install tailwindcss@latest postcss@latest autoprefixer@latest
// postcss.config.js
module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   }
}

2.1 创建 tailwindcss 配置

npx tailwindcss init

生成的配置文件如下:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

2.2 创建 CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

这个 CSS 无法直接被浏览器使用,需要经过 PostCSS 调用 Tailwind 插件编译后才行。

2.3 配置 Webpack

只需要配置 CSS 和 Stylus 规则:

module.exports = {
  module: {
    rules: [
      {
         test: /.css$/,
         use: [
           isDevServer ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
           'postcss-loader'
         ]
       },
       {
         test: /.styl(us)?$/,
         use: [
           isDevServer ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
           'postcss-loader',
           'stylus-loader',
         ],
       },
    ]
  }
}

2.4 配置 .browserslistrc

PostCSS 同样需要用 browserslist 处理兼容性问题,所以一定要配置好,比如我近期喜欢用 bootstrap-icons 为图标,需要用到 svg-mask 系列属性,在 Chrome 里就需要补充前缀。那么,如果 browserslist 里没有 Chrome 就不会加前缀(我昨天就踩在这个坑里)。可以使用 npx browserslist 来检查。

2.5 修改 npm scripts

PostCSS 和 Tailwind.css 需要用 NODE_ENV 变量决定动作内容,所以必须加到 npm scripts 里。

{
  "scripts": {
    "serve": "NODE_ENV=development webpack serve --config build/webpack.config.js",
    "build": "NODE_ENV=production webpack --config build/webpack.config.prod.js --mode=production",
    "lint": "eslint --fix --ext=.vue,.js ./"
  }
}

2.6 完成

至此,基础 Tailwind.css + PostCSS + Webpack 配置完成,接下来就可以使用 CSS 实现界面了。

分类
职业

好书推荐《重构(第二版)》

前些天偶然看到,《重构》发了第二版,而且是以 JavaScript 作为范例语言编写的。于是我马上买了一本,翻了一遍,还是熟悉的好味道。在这里推荐给大家。

点击这里购买 。年前京东半价,现在稍微贵一些,大家可以等一等,或者自己凑凑单。

也可以扫码购买:

0. 我的编程启蒙

我的编程技能是自学的。最初就是看一些少儿科普图书,上面会教些计算机基础知识,和 Basic 编程。所以很长一段时间里,我都只会在 BASIC 开发环境下执行程序,而对如何让代码在任意环境下执行一无所知,这严重限制了我编程能力的覆盖范围。

幸运的是,等到我考上大学,正值第一波互联网泡沫破灭,Web 开发风生水起,Flash 蒸蒸日上,所以,只要会写代码,就有地方能跑,而且是一个大平台。有赖于此,我的编程能力可以稳步提升。

1. 《重构》(第一版)

但一直自学,缺少交流和指引,也大大限制了我的编程能力的发展。站在当时的角度,我并不觉得有什么问题;但是现在,我回顾自己的职业生涯,觉得那其实是很大的危机。如果就这么抹黑自学,毕业后以非科班的身份去社招,多半会陷入很多转行同学一样的尴尬境地。

幸运的是,我无意中买到《重构》这本书,并且看完了。这本书极大的开阔了我的视野,告诉我什么才是真正的编程、什么样的代码能事半功倍,以及除了完成业务之外,编程还有哪些工作。

于是,我不仅在日后的开发工作中取得重大突破(幼儿园全 Flash 官网),在未来的招聘面试里也能够脱颖而出,顺利入行。

以前的一篇博客里,我把《重构》列为对我职业生涯影响最大的书。

2. 《重构(第二版)》

相比于第一版,《重构(第二版)》又有两个比较大的改进:

  1. 产品类型升级,改成了大家更熟悉的电商订票网站
  2. 使用 JavaScript 重构代码,更适合现代前端程序员阅读

对于广大靠前端开发维生,或者想靠前端开发维生的同学来说,这本书能极大的提升你的工作能力,让你未来的工作事半功倍。对于那些跟我一样靠自学、半路出家的非科班程序员,这本书就更加重要了,它能告诉你什么样的代码才是好代码,怎样写出更好的代码,以及该怎么写合适的代码。


总之,推荐给大家。如果能使用我的 推广链接 就更好了。