0

I'm using HTML5 video tag to display incoming live video stream via WebRTC protocol. Basically when remote MediaStreamTrack is received by a client it is assigned to HTMLMediaElement.srcObject. The live stream appears in video and all is fine up to this point. But if at some point receiving/sending client experiences network connection degradation, then WebRTC degradation implementation kicks in by lowering resolution of the stream. What happens is the video becomes "corrupt", though you can still distinguish some of it between the noise. Here is a screen shot of how it looks like: enter image description here

Debugging on the MediaStreamTrack in console shows how resolution has changed: enter image description here

But here comes the interesting part. It seems that native HTML5 video player has problems only with certain resolutions. In this case it was working fine with 720x540px and 1440x1080px, but not with 1080x810xpx. I have browsed the web for native HTML5 video player specification but there is nothing on supported resolutions. I'm not sure how would I proceed solving this issue. I have the following on my mind:

  • perhaps try a different HTML5 video player, e.g. JW Player.
  • prevent specific resolution to occur on the stream, but I haven't seen any option for that in WebRTC implementation.
Jernej Jerin
  • 3,179
  • 9
  • 37
  • 53

2 Answers2

1

Yack! This is a bug somewhere at the browser level or lower, and there's nothing you can do about it short of filing a bug ticket.

In the mean time, I suspect this problem is due to your usage of oddball resolutions. Sticking to a normal aspect ratio like 16:9 or 4:3 (even if you crop via CSS) will net you better compatibility with webcams anyway.

You're probably also using hardware acceleration for the video codec. Try disabling it (or enabling it if it's already disabled) to see if that helps.

Brad
  • 159,648
  • 54
  • 349
  • 530
  • Hmmm, interesting point. It has also crossed my mind that this might be issue at the browser level. I guess using different implementation of html5 player might not work out. Regarding oddball resolution, the video stream is actually coming from a DJI Drone, not your typical webcam ;). Also about your comment on hardware acceleration, will take a look at this though not sure you can control this via JS? – Jernej Jerin Sep 07 '20 at 18:22
0

This issue was initially solved by setting MediaConstraints key googCpuOveruseDetection to false. Revisited this issue and it seems Google has fixed the issue that Chrome browser had for certain resolutions (e.g. 1080x810).

EDIT: Issue in Chromium describing in detail the bug and the fix.

Jernej Jerin
  • 3,179
  • 9
  • 37
  • 53
  • 1
    this was more likely fixed due to working around an issue with HW decoders and width/height not being divisible by 16. https://bugs.chromium.org/p/chromium/issues/detail?id=1237677 I think... – Philipp Hancke Mar 05 '22 at 14:16
  • Based on the described issue in the thread and posted screens of malformed feed, you are definitely right that this was the reason behind this issue. Thank you for providing link, it's nice to know what was the real issue behind this. – Jernej Jerin Mar 06 '22 at 09:58