Skip to content

Commit 51ff309

Browse files
authored
Fix: fix Android chrome mobile not rendering html <video> element (flutter-webrtc#1938)
There is an issue in chrome mobile where, if the video element tag is outside of the visible viewport, the video won't be rendered (will appear as black). That can happen if the added video tag just happens to go in the bottom of a body, and whatever relative elements exists before pushes it outside of the viewport boundary https://github.com/user-attachments/assets/a0ef4506-7642-4fbd-a68e-dfc0d3798d5c This fix forces the position html video element (that is already an absoltue element) to be on the top left so it stays on screen and thus is rendered by chrome mobile not depending of the contents of the html itself. --- I've tested this and it only happens specifically in Androrid-Chrome combo cc @kNoAPP that helped find where in the code the html element was created
1 parent f358f76 commit 51ff309

File tree

1 file changed

+2
-0
lines changed

1 file changed

+2
-0
lines changed

lib/src/web/rtc_video_renderer_impl.dart

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,8 @@ class RTCVideoRenderer extends ValueNotifier<RTCVideoValue>
347347
element.style.pointerEvents = "none";
348348
element.style.opacity = "0";
349349
element.style.position = "absolute";
350+
element.style.left = "0px";
351+
element.style.top = "0px";
350352
}
351353
}
352354

0 commit comments

Comments
 (0)