I've reproduced this issue in a simple sandbox: https://codesandbox.io/s/practical-driscoll-veyc2 (you'll have to open https://veyc2.csb.app/ in a new tab to have the screen recording functionality to work).
When using this sandbox to encode the mediastream to video/webm;codecs="h264"
, the resulting video plays fine on a Macbook Pro with an intel chipset. However, when transferring that same file to an m1 macbook with hardware acceleration enabled, the video fails to play. You can transfer it by right clicking the video player, show controls, then press download under controls.
When disabling hardware acceleration, or when creating a new recording and encoding it to h264 from that same m1 machine, the video plays fine.
Why does a h264 encoded video recorded with HTML MediaRecorder on an Intel macbook not play on an m1 macbook with hardware acceleration enabled?