HTML5 video and MediaStreamTrack stream via WebRTC resolution change issue

559 views Asked by At

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.
2

There are 2 answers

2
Jernej Jerin On BEST ANSWER

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.

1
Brad On

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.