跳转至

在线录制gif文件

这个工具非常的好，打开网站，即可录屏生成gif文件,官方gifhub

可以录制整个屏幕，可以录制特定窗口(比如具体一个软件)，还可以录制特定的网页标签

非常适合做动态操作教程使用

官方介绍:

  • (简单) 无需安装，无需更新：在任何现代浏览器中都能正常工作，包括谷歌浏览器、火狐、Edge和Safari
  • (安全) 没有服务器端，所有内容都是100%客户端。所有数据都保存在您的机器中，整个应用程序由静态文件组成
  • (没有成功) PWA支持使您可以轻松地将gifcap添加到您的操作系统应用程序列表中；(https://sspai.com/post/43499)
  • (新技术)由WASM、libimagequant和gifsicle支持的快速GIF渲染；
  • (内部技术不懂)高度优化的GIF文件大小，得益于帧重复数据消除、边界增量检测和有损编码；
  • (功能选择)全屏幕录制，或选择单个窗口；
  • (没成功)直观的修剪用户界面
  • (没成功)通过视觉拖放轻松裁剪

自我理解这个功能只需要js就实现了gif的录制, 并且使用wasm对gif进行处理,但没有测试成功 编辑功能

使用教程

仅支持电脑上录屏,不支持手机端录屏

操作步骤

  • 打开网站gif.github5.com
  • 点击 开始录制 按钮
  • 不同浏览器显示略有不同，一般有三个选项:

整个屏幕: 会对电脑整个屏幕进行录制
窗口: 这个是对特定一个软件窗口进行录制(需要保证窗口没有最小化)
浏览器标签页: 对特定的一个网页进行录制

  • 按需进行选中, 点击 共享 按钮, 开始录制
  • 结束录制 可以点击界面上的 停止录制 或者 停止共享 按钮

安装

生成 main.js

看官方github文档，发现作者是个大佬，文档写的没有那么细，以为大家都懂，因此整理一下

安装需要使用如下的命令 

npm install 
npm run build

执行成功后 会在 dist 目录下生成main.js

本以为就完成了，但使用过程中 发现 还缺 encoder/encoder.js
源代码中却没有...

下载官方的encoder.js 又提示缺少 encoder/encoder.wasm
继续去官方下载 encoder.wasm 终于可以跑起来了

生成 encoder.js

wasm一直听说，但从没有搞过，因此想看看怎样自己编译wasm

先搜索一下相关介绍
简书介绍 WebAssembly
webAssembly官网
阮一峰早期教程
emcc emsdk github

Dockerfile

encoder文件夹下有个Dockerfile,猜想作者是希望我们用docker编译
Dockerfile是什么
因此执行 如下命令开始构建 

docker build -t encoder

但执行

docker run encoder

缺报错 

bash: line 0: cd: encoder: No such file or directory

#Dockerfile

FROM emscripten/emsdk
RUN apt update && apt install -y autoconf
ENTRYPOINT ["bash", "-c", "cd encoder && ./configure && make"]

应该是第三行报错了，说明编译的不行

没搞清楚这个要怎么搞???

configure

看到dockerfile ，其实就是运行 

./configure && make

常规编译

需要自己安装需要的命令

支持docker环境的 

docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) \
  emscripten/emsdk emcc helloworld.cpp -o helloworld.js

emscripten/emsdk镜像, 其实上一步已经安装过了 

cd encoder
docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) \
  emscripten/emsdk emcc encoder.c -o encoder.js

发现报错 

encoder.c:3:10: fatal error: 'libimagequant.h' file not found

这个是因为没有添加链接库 正确的应该是这样,下面会继续说 

docker run   --rm   -v $(pwd):/src   -u $(id -u):$(id -g)   emscripten/emsdk   emcc -O2  -s ALLOW_MEMORY_GROWTH=1  -s RESERVED_FUNCTION_POINTERS=20 -s ALLOW_TABLE_GROWTH=1 -s EXPORTED_FUNCTIONS=['_malloc','_free']  -Ivendor/libimagequant -Ivendor/gifsicle/src -Ivendor/gifsicle/include -o encode.wasm  encoder.c vendor/libimagequant/blur.o vendor/libimagequant/kmeans.o vendor/libimagequant/libimagequant.o vendor/libimagequant/mediancut.o vendor/libimagequant/mempool.o vendor/libimagequant/nearest.o vendor/libimagequant/pam.o  vendor/gifsicle/src/giffunc.o vendor/gifsicle/src/fmalloc.o vendor/gifsicle/src/support.o vendor/gifsicle/src/gifwrite.o vendor/gifsicle/src/gifread.o

这个镜像确实是好用的，可以使用官方的例子进行测试 

docker run --rm -v $(pwd):/src -u $(id -u):$(id -g)   emscripten/emsdk emcc hello.cpp -o helloworld.html

下载emcc源代码进行安装 执行如下命令即可 

git clone https://github.com/emscripten-core/emsdk.git 
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
  • 依赖库安装

当执行.configure 时会报错，这个时候才发现，缺失相关的链接库
encoder\vendor 文件夹下有两个 空文件，要把内容加上
libimagequant and gifsicle
官方文档已经说了，但此时才明白说的意思

执行过程可能报错

/lib64/libc.so.6: version `GLIBC_2.18‘ not found

还需要升级gcc 

ldd --version 
curl -O http://ftp.gnu.org/gnu/glibc/glibc-2.18.tar.gz
tar zxf  glibc-2.18.tar.gz
cd glibc-2.18
mkdir build
cd build
../configure --prefix=/usr
make j2
sudo make install

make

这时执行 configure 没有问题，但是make时 却会报错 

emcc -O2 -s ALLOW_MEMORY_GROWTH=1 -s RESERVED_FUNCTION_POINTERS=20 -s ALLOW_TABLE_GROWTH=1 -s EXPORTED_FUNCTIONS=['_malloc','_free'] -Ivendor/l
ibimagequant -Ivendor/gifsicle/src -Ivendor/gifsicle/include -o encoder.js encoder.c vendor/libimagequant/blur.o vendor/libimagequant/kmeans.o 
vendor/libimagequant/libimagequant.o vendor/libimagequant/mediancut.o vendor/libimagequant/mempool.o vendor/libimagequant/nearest.o vendor/libi
magequant/pam.o vendor/gifsicle/src/giffunc.o vendor/gifsicle/src/fmalloc.o vendor/gifsicle/src/support.o vendor/gifsicle/src/gifwrite.o vendor
/gifsicle/src/gifread.o   
encoder.c:96:24: error: implicit declaration of function 'Gif_NewMemoryWriter' is invalid in C99 [-Werror,-Wimplicit-function-declaration]
  Gif_Writer *writer = Gif_NewMemoryWriter(&gif_write_info);
                       ^
encoder.c:96:15: warning: incompatible integer to pointer conversion initializing 'Gif_Writer *' (aka 'struct Gif_Writer *') with an expression
 of type 'int' [-Wint-conversion]
  Gif_Writer *writer = Gif_NewMemoryWriter(&gif_write_info);
              ^        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
encoder.c:97:3: error: implicit declaration of function 'Gif_WriteGif' is invalid in C99 [-Werror,-Wimplicit-function-declaration]
  Gif_WriteGif(writer, encoder);
  ^
encoder.c:97:3: note: did you mean 'Gif_WriteFile'?
vendor/gifsicle/include/lcdfgif/gif.h:268:17: note: 'Gif_WriteFile' declared here
int             Gif_WriteFile(Gif_Stream *gfs, FILE *f);
                ^
encoder.c:99:12: error: incomplete definition of type 'struct Gif_Writer'
  cb(writer->v, writer->pos);
     ~~~~~~^
vendor/gifsicle/include/lcdfgif/gif.h:277:16: note: forward declaration of 'struct Gif_Writer'
typedef struct Gif_Writer Gif_Writer;
               ^

暂时没有搞懂这个要怎么改...
希望好心人能够给予帮助,github issues

可能问题

浏览器崩溃

录制太大的gif可能会导致浏览器崩溃，不知道是不是个人chrome的问题，用edge就会好一些

但很明显，录制会占用非常多的内存

部署的坑

下载官方部署版本 替换掉修改过的 index.html 和dist/main.js

本地测试都已经没有问题，结果将代码部署到服务器 http访问 却发现报错了 

TypeError: navigator.mediaDevices is undefined

使用官方和自己的版本，反复测试，一直无法解决...

最后百度到 MediaDevices.getUserMedia问题 大意是说 MediaDevices.getUserMedia 只能在localhost file 和开启https的域访问...

TODO

  • 编辑功能使用教程
  • 支持pwa