Skip to main content

mp4转m3u8

· One min read

方案一(简单效率低)

ffmpeg -i test.mp4 -c:v libx264 -hls_time 15 -hls_list_size 0 -c:a aac -strict -2 -f hls test.m3u8

方案二(效率高)

ffmpeg -y -i test.mp4  -vcodec copy -acodec copy -vbsf h264_mp4toannexb test.ts
ffmpeg -i test.ts -c copy -map 0 -f segment -segment_list test.m3u8 -segment_time 15 15s_%3d.ts

微信h5(单页应用)不缓存html,缓存js,css等资源

· 2 min read

需求场景

在单页应用中,只有一个html页面,网站的大部分css,js等资源引用都写在这个html中,当更新css,js的随机数然后发布时,由于客户端缓存了html,并不能及时更新。

解决方案

    location / {
try_files $uri $uri/ /index.html;
if ($uri ~* .*\.(?:htm|html)$) {
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
if ($uri ~* .*\.(?:js|css|jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$) {
expires 7d;
}
}

微信环境解决方案

微信环境中html的缓存也是一直遭人诟病的。在普通浏览器中,只需要将html后面也加一个随机数,就可以不缓存html,或者在meta标签中添加标识,又或者如上的nginx配置。而在微信浏览器中这些方法都是无效的。

 if ($uri ~* .*\.(?:htm|html)$) {
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
add_header Last-Modified $date_gmt;
}

Linux下Tab补全忽略大小写

· One min read

需求场景

在mac中使用tab补全时会自动忽略大小写,而在ubuntu系统默认不会忽略大小写的。

解决方案

/etc/inputrc文件中增加配置

# auto complete ignoring case 
set show-all-if-ambiguous on
set completion-ignore-case on

Ubuntu删除仓库及其 GPG 密钥

· One min read

删除仓库

通过公钥安装的非官方仓库会被保存在/etc/apt/sources.list.d目录下,找到相关文件删除即可

删除GPG密钥

sudo apt-key list
sudo apt-key del 73C62A1B #只需要输入密钥后8位即可

树莓派4b实现家庭监控mjpg-streamer

· 2 min read

打开树莓派配置的camera开关

可以通过gui界面或者sudo raspi-config打开,详细方式不再赘述

编译环境

sudo apt-get install cmake libjpeg8-dev
sudo apt-get install gcc g++

编译安装

git clone https://github.com/jacksonliam/mjpg-streamer
cd mjpg-streamer/mjpg-streamer-experimental
make
sudo make install

CSI摄像头启动

cd mjpg-streamer-experimental
./mjpg_streamer -i "input_raspicam.so" -o "output_http.so -w ./www"
#指定端口需要密码访问
#./mjpg_streamer -i "input_raspicam.so" -o "output_http.so -w ./www -p 8282 -c usename:password"

usb摄像头启动

cd mjpg-streamer-experimental
./mjpg_streamer -i "input_uvc.so" -o "output_http.so -w ./www"

根据摄像头实际情况启动,之后就可以在localhost:8080端口看到实时画面了

参数说明

./mjpg_streamer  -i "input_uvc.so --help"
./mjpg_streamer -o "output_http.so --help"

参考文档

mjpg-streamer

后续探索

目前已经可以看到实时画面了,不过作为监控功能还是不太够,比如需要保存视频。在mjpg-streamer的github上可以看到output_file插件可以满足部分需求,详细参数可以通过./mjpg_streamer -o "output_file.so --help查看,有时候不需要一直保存视频,只是希望出现人的时候再保存视频,在github的pull-requests中有相关的motion_detect插件,不过维护者并没有合并到主分支,有兴趣的大佬可以试试。

开机启动

参考systemctl设置开机启动,管理service

ios safari无法播放部分mp4视频

· 2 min read

需求场景

最近编辑发现部分上传的mp4视频无法在ios下播放,在chrome上是正常的。通过搜索一般都是说chrome和safari中request header的"range"字段不同,给出的解决方案都是基于后端语言的,而我们的视频都是直接放在nginx上的,并没有经过后段语言处理。实际情况是部分mp4能正常播放,部分mp4不行,更大的可能性在于mp4本身的问题。

解决方案

通过ffmpeg查看能播放的mp4和不能播放的mp4的视频信息ffprobe test.mp4,两者相比较,可以发现两者有个参数不同,一个是yuv420p,一个是yuv444p,能播放的是yuv420p,不能播放的是yuv444p,通过格式工厂等工具将mp4重新转格式之后,确实可以播放了。

后续探索

可是为什么yuv420p是可以的yuv444p是不行的,safari是不兼容yuv444p么?后来通过搜索,终于发现国外的一位的老哥,也遇到同样的问题,并给出了ffmpeg下yuv444p转yuv420p的方案。ffmpeg -i a.mp4 -vcodec libx264 -acodec copy -vprofile main -pix_fmt yuv420p a-new.mp4详见video not playing on Android (chrome) and iOS (safari)

yuv444p转yuv420p

ffmpeg -i [input file] -c:v libx264 -pix_fmt yuv420p [output file]
详见FFMPEG Convert YUV444p to YUV420p

基于ffmpeg的批量转mp4命令行工具

browser-mp4

基于ffmpeg的GUI工具

ffmpegGUI, 作者没有提供打包的文件,需要自行编译打包,并且暂不支持批量转换

浏览器兼容最好的mp4要求

h264 yuv420p

微信h5安卓手机video实现不全屏播放

· 2 min read

需求场景

最近在做移动端项目中,出现video作为背景的场景。然后就开始了踩坑之旅。首先移动端和桌面端都是禁止视频音频的自动播放的,浏览器都不希望骚扰用户。可是需求都是怎么骚扰用户怎么开心,只能通过hack的方式实现。ios在微信h5中可以通过jssdk实现video的自动播放,android就gg了,没法实现,有位老哥的实现思路比较清奇,通过用户业务上的点击动作模拟视频自动播放,参见
微信浏览器中,安卓手机上,video无法自动播放,是为什么呢?,既然android已经无法实现自动播放,只能退而求其次点击播放了。

解决方案

点击播放android又有坑了,ios端只要添加playsinline webkit-playsinline属性即可不全屏播放,android依旧不行,后来还是参考老哥的代码才发现,在安卓微信h5环境中需要添加x5-video-player-type="h5-page"才能不全屏播放,好冷门的属性啊!!!

360浏览器rem不生效

· One min read

需求场景

最近有个需求,需要做pc端大屏页面,一般pc端都采用定宽的设计方式,这样兼容各个屏幕比较容易,直接用px即可。因为项目需要投大屏,所以采用了流式布局,考虑到需要适配各个分辨率的屏幕,故采用了rem单位。可奇怪的是,在360和qq浏览器中rem并不生效

出现原因

因为我在定义rem的大小时,为了方便计算。将1rem=10px,而360浏览器中字体最小单位为12px,所以1rem至少等于12px才会生效。

解决方案

定义1rem=20px