Safari 下同页面创建的视频超过 16 个则无法播放

最近在做一些视频相关的东西。在 Safari 下发现这样一个问题:<video> 标签创建多了,会导致同一个页面内后续的视频都无法播放。不管是 iOS 的 Safari,还是 macOS 下的,都存在同样的问题。尤其是 iOS 下,超过 16 个的视频几乎必定无法播放;效果就是显示一个播放按钮并且有一条斜线。

无法播放的视频截图

通过 video.error来检查最后的错误,得到的是 MEDIA_ERR_DECODE;同时,video.play() 方法会 reject 一个 AbortError。在 Google 检索了很久也没有得到有用的信息。

为了演示这个 bug,一个简单的示例的源码被我放在了 gist 上。你可以通过在 Safari 上打开 RawGit 提供的链接 来测试这个 bug。你只需要点击“测试”,并在视频开始播放后再次点击“测试”,如此循环 16 次,便能得到和我上一张图片一样的结果。

示例的代码如此简单,以至于我认为这个 bug 是几乎不可能发生的;它仅仅是调整了一个 DOM 的 innerHTML 来创建一个 video 元素(事实上无论通过何种方法创建,都会有这个问题;playsinline 属性似乎是必要的),然后再删除它,循环 16 次而已。

hello.innerHTML = '';
var src = 'https://cdn.rawgit.com/mediaelement/mediaelement-files/4d21a042/big_buck_bunny.mp4';
hello.innerHTML = '<video id="video" webkit-playsinline playsinline controls src="' + src + '">';
setTimeout(function () {
    document.getElementById('video').play();
}, 500);

目前,我没有发现任何能够解决这个 bug 的方法。可能唯一的办法就是,播放 15 个视频之后,刷新一下整个页面吧。

为熊猫 TV 直播生成带弹幕的录播视频

最近在沉迷谜之声直播。由于有时候下班比较晚,赶不上开播,又偶尔对直播游戏感兴趣的,就会跑去找录播来看。这个主播十分好心,会在贴吧里上传自己的录播视频。然而由于主播自己的录播视频采用 obs 串流的同时录制,对弹幕肯定是无能为力的,于是就想着能不能通过什么办法把弹幕加上去。所幸,办法还是有的。

现在熊猫直播全站 https 后,弹幕数据都是走的 websocket 了,通过 Fiddler 之类的抓包工具可以轻松抓到。不过,知乎上有一篇详细的回答说明老版本弹幕格式,也有一些现成的项目用来解析弹幕,所以这里就不关注弹幕数据格式了。总而言之,我把这些东西封装成了一个 npm 库 pandan,可以通过 node.js 简单的获取一个房间的实时弹幕了。比如:

let room = new (require('pandan').Room)(426346)
room.on('room-danmaku', function ({data}) {
  console.log(`${data.from.nickName}: ${data.content}`)
})
room.join()

有了弹幕数据自然就好办多了。从抓到的数据包来看,有主播开播、下播事件,送礼、送竹子等事件,完全足够我生成弹幕了。通过一段小脚本,可以把弹幕格式转换成下面这个样子的 xml:

...
<d p="1830.6300048828,1,25,16777215,1415241251,0,Da8b0a0d,668464499">再见了我的青春</d>
<d p="1477.6800537109,1,25,52479,1415241254,0,35b92ad0,668464527">虐啊</d>
...

脚本比较丑,就不贴了,相关参数的解析可以看这篇文章。这里有个小问题,由于直播通常有几秒钟的 buffer,所以弹幕整个时效性会稍微延后一些。这个问题在你观看直播的时候不容易发现(因为大家都有延迟),但生成录播之后弹幕会很明显的延后。当然,解决起来也十分简单,将弹幕时间轴往前平移几秒钟就可以了。

然后祭出大杀器:danmaku2ass,一个能将弹幕转换成 ass 字幕的工具。执行类似这样的命令:

python3 danmaku2ass/danmaku2ass.py -o 2017-07-17-1942-09.ass -s 1152x648 -fn "Microsoft YaHei" -fs 30 -a 0.8 -dm 7 2017-07-17-1942-09.xml

就能生成 ass 字幕了。使用任何带字幕功能的播放器,都可以播放啦~看个例子:

example image

当然,并不是所有主播都会自己上传录播视频。如果你刚好也有这种需求,可以尝试在连接弹幕服务器之后,获取开播事件,并在开播之后通过 you-get 来获取直播录像。

User Mode Linux – 一个用户态的 Linux 内核

User Mode Linux 可以在用户态启动一个 Linux。这使我们能在类似 OpenVZ 虚拟化技术的系统上,使用最新的 Linux 内核;甚至可以在非 root 用户下启动。

但有些 OpenVZ VPS 的 TOS 可能不允许你这么做;另外,这样可能会有一定的性能损失。

准备 rootfs 镜像

我们找一台 Ubuntu Server 来准备 rootfs。这个时候需要有 root 权限,因为你需要 mount 一个 loop 文件系统,chroot 改点东西之类的。

# 下载镜像
wget http://uk.images.linuxcontainers.org/images/alpine/3.1/amd64/default/20170305_17:50/rootfs.tar.xz
# 安装解压软件
apt install xz-utils
# 创建镜像,32 M 对于 alpine 是够用的
dd if=/dev/zero of=rootfs.img bs=1M count=32
mkfs.ext4 rootfs.img
# 把镜像挂到 loop 上
mkdir rootfs
sudo mount -o loop rootfs.img rootfs
sudo tar xvf rootfs.tar.xz -C rootfs
# 给 root 设个密码
sudo chroot rootfs /bin/sh
  passwd
  exit
# 清理
sudo umount rootfs
rmdir rootfs

此时 rootfs.img 已经做好了。

编译内核

我们继续用 ubuntu server 来编译 UML 内核。

sudo apt install build-essential kernel-package fakeroot libncurses5-dev libssl-dev ccache
# 抓内核源码
wget https://cdn.kernel.org/pub/linux/kernel/v4.x/linux-4.10.1.tar.xz
tar xvf linux-4.10.1.tar.xz
cd linux-4.10.1
make defconfig ARCH=um
make menuconfig ARCH=um
# 这里会出来一个界面让你配置内核,有茫茫多的参数可以选
# 大概找一些 linux 内核编译的文章可以参考吧
# 主要是 User Mode Linux 有一些特殊选项可以注意下,比如强制静态编译什么的
# 然后就开始正式编译啦
make ARCH=um
strip linux # 移除调试符号

编译过程可能比较慢。有时候会有一些库找不到啥的,apt 装一下就好。

获取 slirp

slirp 是用来在没有 root 的情况下联网的。

apt source slirp

这里获取到的 slirp 放到目标机器上编译,不需要在 ubuntu server 上搞了。

cd slirp-1.0.17/src
./configure
make CFLAGS="-I. -DUSE_PPP -DUSE_MS_DNS -DFULL_BOLT -fno-strict-aliasing -Wno-unused -std=gnu89" clean all

启动 UML

现在万事俱备,只欠东风了。

# 在 UML Host 上
# 把一些二进制文件放好
slirp=/home/oott123/uml/slirp/slirp-1.0.17/bin/slirp
uml=/home/oott123/uml/kernel/linux-4.10.1/linux
rootfs=/home/oott123/uml/alpine/rootfs.img
cow=/home/oott123/uml/machine/demo/data.cow # 放 copy-on-write 数据的地方
export TMPDIR=/tmp
$uml rw ubda=$cow,$rootfs mem=128M eth0=slirp,,$slirp

配置网络

启动之后你可能会发现没有网络。不用担心,改改网络配置:

# 在 UML 里
vi /etc/network/interfaces
#####
auto eth0
iface eth0 inet static
address 10.0.2.15
gateway 10.0.2.2
netmask 255.255.255.0
dns-nameservers 10.0.2.3
hostname $(hostname)
#####
/etc/init.d/networking restart
echo 'nameserver 114.114.114.114' > /etc/resolv.conf
# 测试网络
wget -O- myip.ipip.net
# 安装软件
apk update
apk add curl
curl myip.ipip.net
# 关闭 UML
halt

与主机交互

或许你需要将 UML 内的端口转发到主机上。

# 在主机上
vi ~/.slirprc
redir 2222 22

或许你需要访问主机的文件系统。

# 在 UML 上,把 UML 内的 /mnt/home 映射到 /home
# 注意权限问题、注意两边不要同时读写
mkdir /mnt/home
mount none /mnt/home -t hostfs -o /home

2016: 我的浏览器 A – Z

A: https://aoishi.[REMOVED] 自己服务器的管理面板
B: http://bbs.i-cassell-you.com/forum.php 还是卡院
C: http://civitas.soobb.com/ 多少年没上了……
D: https://www.dnspod.cn/ DNSPod 有几个域名在上面
E: http://easy-admin.[REMOVED] ???已经是我记不起来的东西了
F: http://fiddle.jshell.net/ 呃……其实我用得不是很多
G: https://gitlab.com/ Ainou 的代码托管在那,所以经常去
H: http://hicivitas.com/ 以前兼职公司的官网
I: http://www.ip138.com/ …………大概是经常看自己 ip
J: http://jd.com/ 已经不怎么上淘宝了,狗东比较舒服
K: http://kuler.adobe.com/ 一个配色工具,可能是因为在收藏夹吧,平时不怎么用
L: http://logcg.com/ 这是谁的博客啊……完全不记得访问过了
M: https://mp.weixin.qq.com/ 微信公众平台……嗯最近可能是上得比较多
N: http://notes.jetienne.com/ 这又是谁的博客了……不记得了
O: http://openshift.redhat.com/ 我感觉今年我应该没上过
P: http://piao-tech.blogspot.com/ 怎么越来越离谱了
Q: http://qzone.qq.com/ ……啥。。
R: http://redis.io/ 嗯……倒是经常去查文档
S: https://suiyu.xyz/ 偶尔会写日记
T: http://tower.im/ 好用的团队协作工具呢……不过现在也不怎么用了
U: http://upyun.com/ 偶尔会上去配一下 CDN
V: https://v2ex.com/ 毫无悬念
W: http://weibo.com/ 其实我最近比较少上了……
X: http://xiumima.com/ 呃……社工库么
Y: http://yeah.net/ 偶尔会上网易邮箱看看
Z: https://zhihu.com/ 知乎倒是常去看的

总之,通过浏览器,可以看出一个趋势:我使用浏览器浏览不同的 web 网站的时间越来越少了——大部分网站我根本想不起来。而更多的时间,可能花在了刷手机上。移动互联网近年来确实是势不可挡,我也不得不沦陷了。

唯一不变的,大概是 Web 的信仰——以及,今年我还在坚持使用 Firefox 浏览大部分网页。

清空 Mac QQ 的最近表情列表

更新 Mac QQ 之后,最近发送过的表情变成了一大片惊讶,如图:

惊讶的 Mac QQ

不管发什么表情这些顺序都不会变,简直坑爹。去 QQ 的存储目录找了一下,发现删掉以下文件后就会好:

HistoryFacesStack_V52.archive
HistoryFacesList_V52.archive

这些文件位于 ~/Library/Application Support/QQ/(QQ号)/CustomFaceConfig.db(非沙盒)或 ~/Library/Containers/com.tencent.qq/Data/Library/Application Support/QQ/(QQ号)/CustomFaceConfig.db(沙盒)下。

删了以后,重启两次 QQ,果断好了:

不再惊讶的 Mac QQ

Unmanaged Exports 在中文系统下报错 syntax error at token ‘{‘ 问题

UnmanagedExports 是一个可以在 C# 下生成类 c api 的 dll 的工具。

不过这玩意儿在中文系统下编译,可能会产生如下报错:

C:\Users\Administrator\AppData\Local\Temp\tmp6C70\adddll.il(60) : error : syntax error at token '{' in:   { AddDll

解决方法很简单,换成英文系统即可。

至于啥原理,我也不知道。写下来避免后人踩坑……如果有哪位同仁知道怎么回事,也请告诉我~

记 VestaCP 的 Let’s Encrypt 自助签发配置

主要原料是 https://github.com/interbrite/letsencrypt-vesta 这个脚本。

然后写一个 python 脚本用来给用户自助签发

#!/bin/env python
import sys
import re
import os
import subprocess

args = ["/usr/local/bin/letsencrypt-vesta", "-u", os.environ['SUDO_USER']]
for i in sys.argv[1:]:
    if re.match('^[a-z0-9][a-z0-9.-]+$', i):
        args.append(i)
subprocess.call(args)

给用户 sudo 权限

%users ALL=NOPASSWD:/usr/local/bin/sign.py

然后让用户执行 sudo /usr/local/bin/sign.py 域名 即可。

重新分享我的 RSS 文章订阅

由于最近犯懒严重,所以这玩意儿也很久没更新了……

之前我曾在博客分享过我的 Star 文章订阅,坚持了一段时间之后,就开始用 kindle 读 RSS 了,所以就没法去 Tiny Tiny RSS 给喜欢的文章加 Star。不过最近我发现,用 kindle 读 RSS 的效率实在是比不上用手机 App 读,于是又切换回了 Tiny Tiny RSS。

这次把 Tiny Tiny RSS 重新配置了一遍,然后改用“Publish”功能取代之前用的“Star”功能,并且加了一些 Article Nots,这样订阅就会变得更加像“分享”一些。

RSS 地址:http://share.best33.com/feed/people/oott123.rss

我是如何搭建一个低成本的 Minecraft 小型服务器的

注目:本人不接受任何的免费的技术咨询指导,提问请先发红包!

自己有个小型的 Minecraft 服务器,为了节约成本以及管理方便,做了一整套自动化的管理方案。整套方案代码量近万行,同时很多东西都写死在了代码里,想开源但是很多东西目前还不完善,根本没法拿出手……所以写了个思路整理,若有需要的朋友可以参考着搭一个。

一、 服务端的选用

没啥好说的,由于需要 mod ,用的 KCauldron-1.7.10, mod 都是自己打的, Forge + LiteModLoader ,大概十几个 mod 。

插件用了一个非正版验证插件,配合宏与按键绑定(Marcos and key bind)进行自动登录。

二、 ISP 的选择

ISP 使用青云。由于服务器在线人数常年在 5 人以下,故选用青云可以随时开关实例,节约运行成本。

青云关机的话,公网 IP 和硬盘也收费,故使用 API 将 ip 释放,仅保留硬盘扣费。

三、 如何开启服务器

由于公网 IP 变动和服务器常年关闭,在另外一台服务器上搭建了一个 HTTP 服务,并自己写了个启动器。

当启动器启动的时候调用那个服务去开启服务器、下发公网 IP 并写入 servers.dat,避免动态域名解析被缓存的问题。

开启服务器后,利用 Telegram bot API ,在群里进行通知服务器的新 IP。

利用 mc 协议检查十分钟没人登录后,服务器自行关闭。

四、 如何管理 mc 服务

使用 supervisord 进行自启动。

需要控制台时,利用 supervisorctl fg minecraft 来调用控制台。

在 Windows 下使用 boot2docker 搭建 docker 开发环境

很久以前研究过一会儿 docker ,当时觉得只是一个轻量级的虚拟机包装而已,没觉得有多大用。

最近发现这玩意还蛮好玩的,但是又懒得翻以前的虚拟机了,于是发现一个叫 boot2docker国内下载(via DaoCloud) 的东西。官方宣称是“It runs completely from RAM, weighs ~27MB and boots in ~5s (YMMV).”。

下载回来的安装包有 100 多 MB,当时在想说好的 27MB 呢,结果发现包里有个 VirtualBox 和一个 msysgit ……简直坑。

如果你的机器上没有这俩玩意,那就放心大胆的直接安装吧。它会帮你把各种琐事配置好,官方的指导文档里也写的十分详细。

如果你的系统里有 VirtualBox 了,那也就直接安装,它会自动识别系统上的 vbox 的,不过你最好先测试一下你的 Host-only 网卡是否正常。

那么重点来了:如果你的系统里有 msysgit,并且还有其它的 GNU 工具链,比如我这种装了 Gow 的人,那么其实这个玩意是有坑的。

要说这个坑,首先要谈一谈 boot2docker 的工作原理。 boot2docker 由 VirualBox 里的一个叫 boot2docker 的虚拟机、一个用来管理 Virual Box 里的虚拟机的工具 boot2docker.exe 和 docker 本体 docker.exe 组成。

当你执行 sh start.sh 的时候,它首先调用 boot2docker init 来创建这个虚拟机(如果已经存在则跳过);其次将该虚拟机启动;最后使用 boot2docker ip 来获取虚拟机的 ip 地址并设置环境变量。

boot2docker ip 这个命令,是调用系统中的 ssh 来获取 ip 地址的。它在 init 的时候,将虚拟机的 22 端口转发到宿主机的 2022 端口,并运行 ssh -p 2022 docker@localhost ip addr show dev eth1 来获取 ip 地址(详细的命令可运行 boot2doker -v ip 来显示)。而 Gow 里的 ssh 指令,则是调用了 PuTTY 的 plink.exe

那么问题来了:plink.exe 根本不支持 -p 语法,也不支持它所使用的 -o 等参数。

所以,如果你装了 Gow,请一定把 msys git 的路径加到 PATH 的最前方……起码是在 Gow 的前面,这样就不会被坑了。

处理完这些乱七八糟的事情之后,运行 boot2docker status 即可看到你的虚拟机的当前状态。下次使用时,只需执行 sh start.sh 即可自动配置好环境变量并且开启 git bash。在这个 git bash 里,你就可以执行你的 docker 指令了~

如果不想用 git bash,那么执行 boot2docker shellinit ,也可以看到应设置的环境变量,如:

export DOCKER_HOST=tcp://192.168.111.222:2376
export DOCKER_CERT_PATH='C:\Users\oott123\.boot2docker\certs\boot2docker-vm'
export DOCKER_TLS_VERIFY=1

此时,用 set 将这些环境变量设置好,即可在 cmd 中使用 docker 来管理 docker 容器了,如:

set DOCKER_HOST=tcp://192.168.111.222:2376
set DOCKER_CERT_PATH=C:\Users\oott123\.boot2docker\certs\boot2docker-vm
set DOCKER_TLS_VERIFY=1

试试 docker info 能不能显示出虚拟机的信息来吧。