[react-native] White screen as livestream viewer (WebRTC) on Xiaomi Mi Mix 2S
fobos531 opened this issue · 21 comments
Which package/packages do you use?
-
@stream-io/video-react-sdk -
@stream-io/video-react-native-sdk -
@stream-io/video-client
Describe the bug
When I join a livestream as a viewer on my Xiaomi Mi Mix 2S, I cannot see the host's video track. There's only a white screen and nothing else. When the host turns off their video track, I can see their profile picture just fine, but when they turn on the track, the white screen is there.
To Reproduce
Steps to reproduce the behavior:
- Start a livestream
- Join a livestream (WebRTC)
- Observe that the screen is white
Expected behavior
I should be able to see the host's video track just fine.
Screenshots
If applicable, add screenshots to help explain your problem.
Version
- SDK version: 0.1.12
Env:
N/A
React / JS client
- N/A
React Native
- OS: Android
- Device: Xiaomi Mi Mix 2S - MIUI 12 based on Android 10
Additional context
I suspect this is the issue, see logcat:
2023-10-24 22:38:53.626 10710-11531 ExtendedACodec com.uxdotapp.hintchat.dev E Failed to getParameter for port 1
2023-10-24 22:38:53.626 10710-11531 ACodec com.uxdotapp.hintchat.dev E [OMX.qcom.video.decoder.vp8] Failed to get port format to send format change
It sounds like whatever is used to render the video for WebRTC stream, it fails on some decoding step or anything like that. I'm not sure if this is specific to the device I have or if its a widespread issue.
So far, I've observed this issue on
Xiaomi - Android 10
Samsung - Android 10, 11
I've tested on Samsung Android 12 and Pixel Android 10 and Android 14 and there it works fine, so, it seems to be a combination of specific device manufacturers on specific Android versions
@fobos531 thanks for reporting this. Could you please let us know from which device you broadcast the stream too
Hey @santhoshvai !
Thank you for getting back. I am broadcasting from a physical iPhone 14 Pro running iOS 17.1
Hey @fobos531 👋
Could you please attach more logs from your device? :)
- disable video on iPhone
- clear logs on Xiaomi
- enable logs on iPhone
- copy everything from Logcat
- share here with us
Does this happen during regular 1-on-1 calls?
Would it be possible for you to check the following scenario
- iPhone - RN client
- Xiaomi - native Android client
Hey @kanat
Attached find some of the logs:
- joining on Xiaomi RN client with iPhone streaming video: https://gist.github.com/fobos531/d1a67d5d6afb51a5b66a7ee1f7cb8a37
- joining on Xiaomi RN client with iPhone NOT streaming video:https://gist.github.com/fobos531/f2cb267ecc2075fdb6cf1d7a1ed65dc2 --> then, after I start the stream on iPhone, this is the log I have: https://gist.github.com/fobos531/f53d6cce265021877af1b081a1a528ae
Additionally,
this is when the log when I join a 1-on-1 call on native android client. Both participants are using android.
https://gist.github.com/fobos531/6de622ab76fbdabd2e6de16814ab4a85
The video stream of the other participant works fine in this case.
As far as I can see, on React Native ExoPlayer is being used to render the video track. I'm not sure if its a direct dependency that you have or a transitive one. But maybe the version of ExoPlayer should be upgraded? Or is it possible to use a different video format (it seems VP8 is used)?
For livestream, are you using React Native ExoPlayer to render the video track? you do not need to in that case.
Why are you using it may I ask please?
For livestream, are you using React Native ExoPlayer to render the video track? you do not need to in that case.
Why are you using it may I ask please?
Hey @santhoshvai
No, I'm not using it. I'm just making assumptions based on what I see in logcat logs. To clarify, I am using the VideoRenderer imported from @stream-io/video-react-native-sdk
@fobos531 could you also please send logs from your iPhone if possible
Hey @santhoshvai
Is there anything specific that I need to enable for iPhone logs to work? I tried inspecting them in Xcode but I don't see any logs from Stream
Hey @fobos531 ,
Thank you for sharing the logs 👍
Does the 1-on-1 call work between that Xiaomi device and iPhone?
Would you please send us logs for that particular case as well (Xiaomi - iPhone, p2p call)?
Thank you 🙏
I've analyzed the logs you've sent.
Here where you made a call between Xiaomi and another android device using native Android client
2023-10-26 12:01:53.362 12923-14842 Call:WebRTC io.getstream.video.android I (DecodingQueue - 14842:4790) [onLogMessage] label: AndroidVideoDecoder, message: ctor name: OMX.qcom.video.decoder.vp8 type: VP8 color format: 19 context: org.webrtc.EglBase14Impl$Context@52188ff
2023-10-26 12:01:53.370 12923-14851 OMXClient io.getstream.video.android I IOmx service obtained
2023-10-26 12:01:53.376 12923-14850 SurfaceUtils io.getstream.video.android D connecting to surface 0x7aa0032010, reason connectToSurface
2023-10-26 12:01:53.376 12923-14850 MediaCodec io.getstream.video.android I [OMX.qcom.video.decoder.vp8] setting surface generation to 13233164
2023-10-26 12:01:53.376 12923-14850 SurfaceUtils io.getstream.video.android D disconnecting from surface 0x7aa0032010, reason connectToSurface(reconnect)
2023-10-26 12:01:53.376 12923-14850 SurfaceUtils io.getstream.video.android D connecting to surface 0x7aa0032010, reason connectToSurface(reconnect)
2023-10-26 12:01:53.376 12923-14851 ExtendedACodec io.getstream.video.android I setupVideoDecoder()
2023-10-26 12:01:53.377 12923-14851 ExtendedACodec io.getstream.video.android I Decoder will be in frame by frame mode
2023-10-26 12:01:53.389 12923-14851 SurfaceUtils io.getstream.video.android D set up nativeWindow 0x7aa0032010 for 180x320, color 0x7fa30c06, rotation 0, usage 0x20002900
2023-10-26 12:01:53.391 12923-14842 Call:WebRTC io.getstream.video.android I (DecodingQueue - 14842:4790) [onLogMessage] label: AndroidVideoDecoder, message: initDecodeInternal done
2023-10-26 12:01:53.391 12923-14842 Call:WebRTC io.getstream.video.android I (DecodingQueue - 14842:4790) [onLogMessage] label: video_decoder_wrapper.cc, message: (line 78): initDecode: 0
2023-10-26 12:01:53.391 12923-14842 Call:WebRTC io.getstream.video.android I (DecodingQueue - 14842:4790) [onLogMessage] label: generic_decoder.cc, message: (line 256): Decoder implementation: DecoderInfo { prefers_late_decoding = implementation_name = 'OMX.qcom.video.decoder.vp8', is_hardware_accelerated = true }
2023-10-26 12:01:53.394 12923-13324 Call:WebRTC io.getstream.video.android I (worker_thread - 13324:2720) [onLogMessage] label: probe_controller.cc, message: (line 300): Measured bitrate: 304331 bps Minimum to probe further: 1260 kbps upper limit: +inf bps
I can see that your Xiaomi initialized the hardware VP8 decoder and used it with no issues.
Here VP8 format is expected since your the opponent is also an Android device which encodes video in VP8 format.
However, I don't understand why you receive VP8 format from iOS. iPhone is supposed to encode its' video stream using either H264 or H265. Or maybe iOS sends you H264 and Xiaomi for some reason initializes VP8.
If indeed Android tries to decode H264 with VP8 decoder it just won't work.
@fobos531, I assume that if you connect the same Android devices (which you used for testing the native Android client) using the RN client, it will also work. Is that correct?
@fobos531 sorry for bombarding with different requests 😄
Could you also share the exact Samsung models where this issue is reproducible?
@fobos531, I assume that if you connect the same Android devices (which you used for testing the native Android client) using the RN client, it will also work. Is that correct?
Hey @kanat
Here's my findings if i use the RN client on both android devices.
Pixel 8 Pro (in browserstack) - viewer
Xiaomi Mi Mix 2S - streamer
Everything great, works fine.
Pixel 8 Pro (in browstack) - streamer
Xiaomi Mi Mix 2S - viewer
not working, same error as before: https://gist.github.com/fobos531/70ceb43a1b8c5501ab6780ded57865ad
Galaxy A50 - streamer
Xiaomi Mi Mix 2S - viewer
not working, same error as before: https://gist.github.com/fobos531/31cfb4014d2fbbd95bf367b11f50b4ec
(below is all when iPhone 14 Pro is streamer)
Examples of phones that do not work as viewer:
Samsung Galaxy S20+ on Android 10
Samsung Galaxy S20 on Android 11
OnePlus 8 - Android 10
Examples of phones that work fine:
Pixel 8 Pro - Android 14
Pixel 7 Pro - Android 13
Hey @fobos531,
We don't have Xiaomi Mi Mix 2S, but we tested with Samsung Galaxy S20 on Android 11 (BrowserStack) and it worked just fine.
I've tested
- iPhone 12 Pro on iOS 17.0.3 (streamer) - real device
- Samsung Galaxy S20 on Android 11 (viewer) - BrowserStack
And
- Pixel 7 on Android 14 (streamer) - real device
- Samsung Galaxy S20 on Android 11 (viewer) - BrowserStack
Here is a screenshot with Pixel 7 and Galaxy S20 (BrowserStack):
Can you let me know which app (example) you ran exactly so I can try to reproduce it on my end?
EDIT: I just tested the stream's dogfood example app, and it works fine on Xiaomi Mi Mix 2S. I will look in detail into the implementation to identify the issue - will update you on the progress.
Hey,
I managed to fix it on my end. It was something completely unrelated - I was trying to use another library for blurring the tab bar in my app and somehow that messed up several others part of my app, including the livestreams on Android. It seems to work correctly now. If a similar issue pops up again, I will let you know. Closing this until then.
@fobos531 could you give us more details about this? I mean which library was it, and how it interfered with livestream. This could be a good thing for us to know for any future issues with others.
@fobos531 could you give us more details about this? I mean which library was it, and how it interfered with livestream. This could be a good thing for us to know for any future issues with others.
Hey @vishalnarkhede
It was expo-blur. I was using it to implement a custom TabBar with react-navigation which is blurred. Under the hood they use this implementation: https://github.com/Dimezis/BlurView but it seems to be not 100% stable.
I'm also using Reanimated's useAnimatedKeyboard hook which also in some ways affects the behavior of status/navigation bar. So, I'm not sure what exactly is the cause, but I think it is a combination of these factors. I have honestly no idea why and how it interefered with livestream's ability to display the video stream.
Hope this helps!