dmnsgn / canvas-record

Record a video in the browser or directly on the File System from a canvas (2D/WebGL/WebGPU) as MP4, WebM, MKV, GIF, PNG/JPG Sequence using WebCodecs and Wasm when available.

Home Page:https://dmnsgn.github.io/canvas-record/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[HELP] Generated MP4 files does not work on Whatsapp Web

TiagoSilvaPereira opened this issue · comments

Hello, I hope you are well!

I'm using the AVC H264 Codec and I'm using WebCodecs to save it (I tried MP4Wasm but had no success compiling it with Vite). Whatsapp recommends using the same codec.

image

I'm still not sure what causes this problem, I've already tried several profile, level, latencyMode, etc. settings. The MP4 videos are generated correctly, and I can watch them through the video player or in the browser, but when I send them via Whatsapp Web, a preview is not generated, and the videos are only sent as attached files.

I will attach two examples of similar videos. The first one works on Whatsapp (it was converted from webm to mp4 on a remote server), and the second does not (it was generated directly in mp4 using canvas-record).

First video, converted from webm to mp4 using ffmpeg on a server (works on whatsapp web):
https://github.com/dmnsgn/canvas-record/assets/11933789/80b6745b-cce3-42fa-aa98-bd8670a95d50

Second video, converted using webcodecs on the browser using canvas-record (does not work on whatsapp web):
https://github.com/dmnsgn/canvas-record/assets/11933789/1531e1a7-59be-4418-b079-2e71477bea20

I managed to compile MP4 Wasm with Vite, it also generates MP4 files correctly, but still not working with Whatsapp Web

Some informations about both videos:

Video 1 - Ffmpeg

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '.\video1.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.29.100
  Duration: 00:00:06.56, start: 0.000000, bitrate: 6494 kb/s
  Stream #0:0[0x1](und): Video: h264 (High) (avc1 / 0x31637661), yuv420p(progressive), 898x584 [SAR 1:1 DAR 449:292], 6492 kb/s, 16 fps, 16 tbr, 16384 tbn (default)
    Metadata:
      handler_name    : VideoHandler
      vendor_id       : [0][0][0][0]

Video 2 - Webcodecs

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '.\video2.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 0
    compatible_brands: mp42isom
    creation_time   : 2023-10-11T18:34:44.000000Z
  Duration: 00:00:06.57, start: 0.000000, bitrate: 2158 kb/s
  Stream #0:0[0x1](und): Video: h264 (Baseline) (avc1 / 0x31637661), yuv420p(progressive), 954x604, 2155 kb/s, 60 fps, 60 tbr, 90k tbn (default)
    Metadata:
      creation_time   : 2023-10-11T18:34:44.000000Z
      vendor_id       : [0][0][0][0]
      encoder         : JVT/AVC Coding

@dmnsgn the problem was on mp4-muxer. The mp4-muxer creator already fixed the bug. Soon I'll make a PR updating canvas-record to the latest mp4-muxer version. Thanks

Vanilagy/mp4-muxer#18

Hi, I have pushed v5.0.0-beta.0 with the updated mp4-muxer. Let me know if that issue reappears.

@dmnsgn thank you very much, just confirming it is working well with Whatsapp now