ffmpeg conversion from h264 for webserver

Question

I'm working on a system to record videos through RPi (picamera, h264 format), export (rsync) 10s segments of videos to a distant webserver, and trying to concatenate those segment into a single video file to read on the webserver.

Simplified code to record on RPi:

import os
import datetime as dt
import picamera

camera = picamera.PiCamera()
camera.resolution = (1920, 1080)
camera.framerate = 25
duration = 10 #sec

[...]

camera.start_recording(filename, format='h264')
while True:
    filename = get_timestamped_filename()
    camera.split_recording(filename)
    camera.wait_recording(duration)

camera.stop_recording()

For the conversion, I tried many options/searches without success. I can get the video (.ts, .mp4, .ogv, .webm) working on majority of web browser but never on ios/android (chrome/safari). As example of test & fail with ffmpeg: https://gist.github.com/jaydenseric/220c785d6289bcfd7366

When I don't try to concatenate but only convert those video:

ffmpeg -i input.h264 -profile:v baseline -level 3.0 output.mp4

I have the following output:

ffmpeg version 4.1.6-1~deb10u1 Copyright (c) 2000-2020 the FFmpeg developers
  built with gcc 8 (Debian 8.3.0-6)
  configuration: --prefix=/usr --extra-version='1~deb10u1' --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --arch=amd64 --enable-gpl --disable-stripping --enable-avresample --disable-filter=resample --enable-avisynth --enable-gnutls --enable-ladspa --enable-libaom --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libcodec2 --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libjack --enable-libmp3lame --enable-libmysofa --enable-libopenjpeg --enable-libopenmpt --enable-libopus --enable-libpulse --enable-librsvg --enable-librubberband --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxml2 --enable-libxvid --enable-libzmq --enable-libzvbi --enable-lv2 --enable-omx --enable-openal --enable-opengl --enable-sdl2 --enable-libdc1394 --enable-libdrm --enable-libiec61883 --enable-chromaprint --enable-frei0r --enable-libx264 --enable-shared
  libavutil      56. 22.100 / 56. 22.100
  libavcodec     58. 35.100 / 58. 35.100
  libavformat    58. 20.100 / 58. 20.100
  libavdevice    58.  5.100 / 58.  5.100
  libavfilter     7. 40.101 /  7. 40.101
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  3.100 /  5.  3.100
  libswresample   3.  3.100 /  3.  3.100
  libpostproc    55.  3.100 / 55.  3.100
Input #0, h264, from 'input.h264':
  Duration: N/A, bitrate: N/A
    Stream #0:0: Video: h264 (High), yuv420p(progressive), 720x480, 25 fps, 25 tbr, 1200k tbn, 50 tbc
File 'output.mp4' already exists. Overwrite ? [y/N] y
Stream mapping:
  Stream #0:0 -> #0:0 (h264 (native) -> h264 (libx264))
Press [q] to stop, [?] for help
[libx264 @ 0x556885757980] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX FMA3 BMI2 AVX2
[libx264 @ 0x556885757980] profile Constrained Baseline, level 3.0
[libx264 @ 0x556885757980] 264 - core 155 r2917 0a84d98 - H.264/MPEG-4 AVC codec - Copyleft 2003-2018 - http://www.videolan.org/x264.html - options: cabac=0 ref=3 deblock=1:0:0 analyse=0x1:0x111 me=hex subme=7 psy=1 psy_rd=1.00:0.00 mixed_ref=1 me_range=16 chroma_me=1 trellis=1 8x8dct=0 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp_offset=-2 threads=9 lookahead_threads=1 sliced_threads=0 nr=0 decimate=1 interlaced=0 bluray_compat=0 constrained_intra=0 bframes=0 weightp=0 keyint=250 keyint_min=25 scenecut=40 intra_refresh=0 rc_lookahead=40 rc=crf mbtree=1 crf=23.0 qcomp=0.60 qpmin=0 qpmax=69 qpstep=4 ip_ratio=1.40 aq=1:1.00
Output #0, mp4, to 'output.mp4':
  Metadata:
    encoder         : Lavf58.20.100
    Stream #0:0: Video: h264 (libx264) (avc1 / 0x31637661), yuv420p, 720x480, q=-1--1, 25 fps, 12800 tbn, 25 tbc
    Metadata:
      encoder         : Lavc58.35.100 libx264
    Side data:
      cpb: bitrate max/min/avg: 0/0/0 buffer size: 0 vbv_delay: -1
frame=  195 fps=0.0 q=-1.0 Lsize=     229kB time=00:00:07.76 bitrate= 241.3kbits/s speed=20.4x    
video:227kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.687068%
[libx264 @ 0x556885757980] frame I:1     Avg QP:23.86  size: 24802
[libx264 @ 0x556885757980] frame P:194   Avg QP:22.46  size:  1067
[libx264 @ 0x556885757980] mb I  I16..4: 26.4%  0.0% 73.6%
[libx264 @ 0x556885757980] mb P  I16..4:  1.1%  0.0%  0.4%  P16..4: 20.3%  1.5%  0.6%  0.0%  0.0%    skip:76.1%
[libx264 @ 0x556885757980] coded y,uvDC,uvAC intra: 34.9% 54.4% 12.3% inter: 1.8% 12.4% 0.0%
[libx264 @ 0x556885757980] i16 v,h,dc,p: 45% 14% 17% 23%
[libx264 @ 0x556885757980] i4 v,h,dc,ddl,ddr,vr,hd,vl,hu: 35% 31% 11%  4%  4%  4%  4%  4%  4%
[libx264 @ 0x556885757980] i8c dc,h,v,p: 51% 17% 28%  4%
[libx264 @ 0x556885757980] ref P L0: 80.0% 10.6%  9.4%
[libx264 @ 0x556885757980] kb/s:237.75

But still, impossible to play on mobile web (iOS, Android)

Is there anything I'm doing wrong, either in the capturing process or conversion? Do you have any recommendations?

Answer 1

May this helps you:

https://video.stackexchange.com/a/16040
https://askubuntu.com/a/735536
https://developer.android.com/guide/topics/media/media-formats
This seems to be a relatable program: https://superuser.com/q/1412864
https://superuser.com/a/715751
https://www.reddit.com/r/ffmpeg/comments/hm2tj2/ffmpeg_videos_arent_playing_on_windows_media/?utm_source=share&utm_medium=web2x&context=3
https://gist.github.com/Vestride/278e13915894821e1d6f

Answer 2

OK, for example

Video: h264 (libx264) (avc1 / 0x31637661), yuv420p, 720x480, q=-1--1, 25 fps, 12800 tbn, 25 tbc

Will be work in all browser, but you can to reordenate all paramets and add a code for web browsers "movflags faststart", like it

(for only copy into a new mp4 container, you have to be very order in parameters)

ffmpeg -i input.h264  -c:v copy  -movflags -faststart  -preset veryfast -dn -an -sn -map_metadata -1 output.mp4

But if you want encoding in new mp4 container, you have to put new parameters, for example:

ffmpeg -i video.h264 -map 0:0 -vf crop=iw-150:ih-228,scale=ih*16/9:ih,scale=720:432,setsar=1 -c:v libx264 -crf 1 -movflags -faststart  -preset veryfast -dn -an -sn -map_metadata -1 -preset veryfast ./video_re.mp4

---

Parameters

1. -c:v libx264 - is codec free and universal to all browsers, x264
2. crop=iw-150:ih-228 if you want to crop video
3. scale 16/9 is ratio, and if you want scale=720:432 with resolution
4. -crf The range of the CRF scale is 0–51, where 0 is lossless, 23 is the default, and 51 is worst quality possible. A lower value generally leads to higher quality, and a subjectively sane range is 17–28. Consider 17 or 18 to be visually lossless
5. -movflags -faststart think it parameter like a divition of all video, where the first 2 or 3 mins is the first to load, so, using this way the video load in web browsers will charged very fast, because the first mins is the first for loadand showing. if the file size is 10 MB or 20 GB the first load when you play this video, are the first mins, if you dont use it, the charged of video to start have to be almost all, and the lovely people of apple demand the 100% for play file.
6. if you want to reduce file size you can use bitrate option when -b:v is a value numbers in K or M for bitrate total -minrate idem but for min rate and -maxrate for max rate -bufsize 4M example

---

ffmpeg -i video.h264 -map 0:0 -vf crop=iw-150:ih-228,scale=ih*16/9:ih,scale=720:432,setsar=1 -c:v libx264 -crf 1 -b:v 9000k -minrate  8000K -maxrate  10000K -bufsize 4M  -movflags -faststart  -preset veryfast -dn -an -sn -map_metadata -1 -preset veryfast ./video_re2.mp4

King Regards