Adding a screenshot and screen recording tool

[mio-moto]

Hi,

I've added a screenshot and screen recording tool by using MediaRecorder APIs and taking the existing canvas and capturing the MediaStream for the audio.

This makes it easy to capture demo videos without an external screen recorder tool (and all the frame blanking issues) and correct cropping of the resulting video

When toggling the record screen option, the recording starts and stops when toggling it to off. The filenames are yyyy-mm-dd HH.mm.ss m8-screenshot.png and yyyy-mm-dd HH.mm.ss m8-recording.mp4.

I've chosen video/webm as mime type, primarily because the support should be alright across all major browsers (Safari, Chrome, Firefox) and there are recording issues with mpeg-4 video streams

• when using mp4 and the same on-demand refresh logic, then audio is chopped and duplicated by the mismatched audio stream and frame insertion on chrome
• when using a capture framerate of 60 (or 30, 24, etc), screen tearing would occur on mismatching the canvas blanks
• webm (both vp8 and vp9) recordings seems to not show any issues.

recording.mp4

Resulting in this video and screenshot:

2025-10-09.14.26.00.m8-recording.webm