Wind Recorder is a docker image for recording "self-playing web pages". You can try it out with a quick test.
First build a "self-playing web page":
- cd demo && yarn install && yarn start
Run the docker command:
- open demo.sh
- change
dd.ftqq.comto be the LAN IP - Run the command bash demo.sh
After running, you can view the recorded video in the root directory.Click here to view recorded video directly.
WindMark.pro is a free online tool for video production using the Tailwind CSS framework and Markdown.
The principle is to create autoplay web pages using web technology and record them as videos when accessed through a browser.
Wind Recorder] is the open source project used by WindMark.pro to record not only the web pages generated by WindMark.pro, but also any web pages that can be rendered normally in a browser.
With Wind Recorder you only need to run one line of Docker command to complete the video recording.
docker run --rm -p 5900:5900 -p 80:80 -v "$(pwd):/data" easychen/windrec:latest https://video.windmark.pro
Just replace https://video.windmark.pro in the above command with the URL of the autoplay page you want to record.
The recording result can be seen in this video → How to use WindMark.pro
The Wind Recorder installs a browser in the container and starts a web service. When /start is accessed, recording via ffmpeg starts; when /stop is accessed, recording stops.
In addition to the /start and /stop control from outside the container via http active access to the container, the recorded web pages inside the container can also be controlled by http://localhost/start and http://localhost/stop calls via JavaScript.
Despite the simple control interface, the container remains a black box for us when it comes to recording. Therefore Wind Recorder has a built-in VNC service. When the container is started, you can connect to port 5900 to see the internal browser screen via tools like VNC Viewer, which is very useful when doing compatibility debugging.
Please keep the network of the machine running docker commands good and the container has at least 4G memory, the more complex the page, the more memory is needed.
This kind of problem occurs when there is not enough memory, if you encounter it, please increase the memory of the container.
Also, since the recording is written to mp4 as an append, if you encounter slight out of sync, you can use tools like HandBrake to compress and optimize the video again to correct it.
The code for the recording part of this project is heavily referenced from highattendance-aws-meeting-recording and is distributed using the Apache2.0 protocol.