[Bug]: android:hardwareAccelerated="false" only shows half a screen, while the other half is the phone's homescreen

[soemarko]

Version

v2.0.0

Which operating systems have you used?

• Android
• iOS

Environment that reproduces the issue

Android 13 (both samsung and asus ROG)

Is it reproducible in the example application?

Yes

RTMP Server

IVS

Reproduction steps

      <ApiVideoLiveStreamView
          style={styles.livestream}
          ref={livestreamRef}
          camera={isFrontCamera ? 'front' : 'back'}
          enablePinchedZoom={false}
          video={{
            fps: 30,
            resolution: '480p',
            bitrate: 1 * 1024 * 1024, // # 1 Mbps
          }}
          audio={{
            bitrate: 128000,
            sampleRate: 44100,
            isStereo: true,
          }}
          isMuted={false}
          onConnectionSuccess={() => {
            //do what you want
            console.log('on connection success');
            streamStarted();
            setIsStreaming(true);
            setIsStreamStarting(false);
          }}
          onConnectionFailed={() => {
            //do what you want
            console.log('on connection failed');
            setIsStreaming(false);
          }}
          onDisconnect={() => {
            //do what you want
            console.log('on disconnect');
            setIsStreaming(false);
          }}
        />

Expected result

Full camera screen

Actual result

Just half a screen, and squished up. The bottom half is the phone's homescreen, but all my other components still there. Like the chat text input.

Additional context

React Native 0.74.1

Relevant logs output

No response

[ThibaultBee]

Hi,

Have you tried running the code in https://github.com/apivideo/api.video-reactnative-live-stream/tree/main/example?
Have made any constraint to the view?
It is going to be a tricky issue.
Could you share the logcat? I am not sure to find anything relevant but it might help :)

[soemarko]

It's working fine on the example app. But when I copied across the <ApiVideoLiveStreamView /> (some values need adjustment),.. I'm getting even smaller view port

Could you share the logcat?

How do I get that? I've tried $ adb logcat *:S ReactNative:V ReactNativeJS:V, but just getting this as result.
zsh: no matches found: *:S

[ThibaultBee]

Just adb logcat and I will filter the logs.

[ThibaultBee]

Is there something in the style that would make this behavior?

[soemarko]

I doubt it, since the background is the phone's dashboard, not anything from RN. But here's my whole style

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  },
  livestream: {
    flex: 1,
    backgroundColor: 'black',
    alignSelf: 'stretch',
  },
  imageContainer: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 200,
    height: 200,
    flexDirection: 'row',
    backgroundColor: 'orange',
    opacity: 0.8
  },
  buttonContainer: {
    position: 'absolute',
    bottom: 80,
    alignSelf: 'center',
    flexDirection: 'row'
  }
});

Give me some time for the logcat, I'm currently on a different branch with nodemediaclient, I prefer if I could use this though, since I can get a snapshot of the preview screen, at least on iOS.

[soemarko]

Actually, here's the whole file: https://gist.github.com/soemarko/b3139d3dbf6d649ccfbbe9fab2774261

I don't think I'm doing anything crazy.

[ThibaultBee]

Could you try to modify the example or provide a minimal code so we can directly reproduce it in our environment?

[soemarko]

I've found the source problem, in my android/app/src/main/AndroidManifest.xml file I've added android:hardwareAccelerated="false". I honestly can't remember why. But that causes this problem.

Feel free to close this issue if you don't consider this a bug (although nodemediaclient is working fine). Now I need to investigate why I added that at some point in my project.

[ThibaultBee]

oh. As the View is a SurfaceView (which rely on androidx.camera:camera-viewfinder package), I don't really understand why hardwareAccelerated has an impact on it.
But you are not the only one: https://stackoverflow.com/questions/59850963/android-camerax-java-wrong-preview-orientation

[soemarko]

Now I need to investigate why I added that at some point in my project.

I've figured this part out, the app is quite "animated", and with hardware acceleration the app is crashy when user taps taps taps quickly. Disabling it just solves a lot of weird crashes that never happens on iOS.

Anyway, as mentioned, feel free to close this. I'll change the title to better reflect the issue.