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:
Debugging on the MediaStreamTrack
in console shows how resolution has changed:
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.
This issue was initially solved by setting
MediaConstraints
keygoogCpuOveruseDetection
tofalse
. 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.