Bug 267121 – REGRESSION (iOS 16.3?): WebKit requires keyframes now for video decodes, which makes it less forgiving for IP cameras

• Status: NEW
• Component: Media

https://github.com/WebKit/WebKit/pull/16432/files introduces a change in requiring key frames for initial video decodes. This works fine for most movies but I was trying to figure out why https://chaney-field3.click2stream.com/ shows "Playback Error" across Safari, Chrome, Firefox, etc. on iPhone devices (particularly iOS 16.3.1 and above). I believe is triggered by IP cameras that are reliant on converting its RTSP packets into MPEG-TS video frames without doing any transcoding. Most other devices are forgiving and will find the first keyframe, but this PR seems to make things more stringent?

See original issue: https://developer.apple.com/forums/thread/743087 

It may also be related to this discussion too: https://ipcamtalk.com/threads/blue-iris-ui3.23528/page-194#post-754082

I realize now that Chrome on iPhones are still using WebKit underneath the hood, which explains why it also happens for Chrome on iPhones (https://www.lifewire.com/why-it-matters-that-google-is-developing-a-browser-not-based-on-webkit-7107099)

Actually this PR may be the culprit (the other one was for audio): 
https://github.com/WebKit/WebKit/pull/4858

[Radar WebKit Bug Importer]

<rdar://problem/120553459>

[Eric Carlson]

https://github.com/WebKit/WebKit/pull/4858 added WebCodecsVideoDecoder support, but https://chaney-field3.click2stream.com, but on iPhone uses a <video> element with an HLS stream:

<video data-html5-video="" src="https://e1-na7.angelcam.com/cameras/102610/streams/hls/playlist.m3u8?token=eyJjYW1lcmFfaWQiOiIxMDI2MTAiLCJkZXZpY2VfaWQiOiIxMDI2MTAiLCJ0aW1lIjoxNzA0NzQ3NzYyNjgxNTQ2LCJ0aW1lb3V0IjozNjAwfQ%3D%3D%2E815317f94165d5dbfedee01d29c1892e76e7a43a5ed0ca2e9f78bf0b96d7e209" muted="true" preload="auto" playsinline="playsinline" poster="data:image/svg+xml, <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;1&quot; height=&quot;1&quot; viewBox=&quot;0 0 1 1&quot;><rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;1&quot; height=&quot;1&quot; fill=&quot;#000000&quot; /></svg>"></video>

[Gabriel Wicke]

Related discussion about server side workarounds on the nginx rtmp module site: https://github.com/arut/nginx-rtmp-module/issues/1649#issuecomment-1965653223