Camera Preview Orientation Issue

Question

Issue:

• The camera preview becomes stuck in a specific orientation. For instance, if a video call starts in portrait mode, the preview displays correctly. However, upon rotating the device, the camera preview becomes stretched and does not preview properly.

Research & Findings:

• We have tried using both 2.13.0-beta.1 and 2.13.0 of the library, but the issue persists.
• We attempted to adjust the camera preview orientation dynamically, but it did not resolve the problem.
• We reviewed the official documentation to check for any available orientation-related properties but found none. Azure Communication Services - Manage Video (Android)
• A similar issue has been reported by multiple users on the official Azure SDK GitHub repository, but it remains unresolved. GitHub Issue #1153

Please try to resolve this issue asap because we got stuck in our high priority project.

Thanks in Advance

Answer 1

Hi @Bhavin Ramani ,

The problem arises because the camera preview does not automatically adjust its orientation when the device is rotated, leading to a stretched or improperly oriented preview. This behavior suggests that the VideoStreamRenderer in the specified SDK version does not handle orientation changes dynamically.

• Manually manage the camera preview’s orientation by detecting device orientation changes and applying the appropriate transformations to the rendererView.

Implement a SensorEventListener to monitor the device’s orientation. This allows you to respond to changes in real-time.

Code:

private SensorManager sensorManager;
private Sensor accelerometer;
private Sensor magnetometer;
private final float[] gravity = new float[3];
private final float[] geomagnetic = new float[3];
private final SensorEventListener sensorEventListener = new SensorEventListener() {

    public void onSensorChanged(SensorEvent event) {

        if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {

            System.arraycopy(event.values, 0, gravity, 0, event.values.length);

        } else if (event.sensor.getType() == Sensor.TYPE_MAGNETIC_FIELD) {

            System.arraycopy(event.values, 0, geomagnetic, 0, event.values.length);

        }

        if (gravity != null && geomagnetic != null) {

            float[] R = new float[9];

            float[] I = new float[9];

            if (SensorManager.getRotationMatrix(R, I, gravity, geomagnetic)) {

                float[] orientation = new float[3];

                SensorManager.getOrientation(R, orientation);

                float azimuth = orientation[0]; 

                float pitch = orientation[1];   

                float roll = orientation[2];    

                int newOrientation = determineOrientation(pitch, roll);

                if (newOrientation != currentOrientation) {

                    currentOrientation = newOrientation;

                    adjustRendererViewOrientation(currentOrientation);

                }

            }

        }

    }  
    
	public void onAccuracyChanged(Sensor sensor, int accuracy) {

    }

};

Create a method to interpret the sensor data and determine the device’s current orientation.

private static final int ORIENTATION_PORTRAIT = 0;
private static final int ORIENTATION_LANDSCAPE_REVERSE = 90;
private static final int ORIENTATION_LANDSCAPE = -90;
private static final int ORIENTATION_PORTRAIT_REVERSE = 180;
private int determineOrientation(float pitch, float roll) {

    if (Math.abs(pitch) < Math.PI / 4) {

        if (roll > Math.PI / 4) {

            return ORIENTATION_LANDSCAPE;

        } else if (roll < -Math.PI / 4) {

            return ORIENTATION_LANDSCAPE_REVERSE;

        } else {

            return ORIENTATION_PORTRAIT;

        }

    } else {

        return ORIENTATION_PORTRAIT_REVERSE;

    }

}

• Based on the detected orientation, apply the corresponding rotation to the rendererView.

private void adjustRendererViewOrientation(int orientation) {

    float rotation = 0;

    switch (orientation) {

        case ORIENTATION_PORTRAIT:

            rotation = 0;

            break;

        case ORIENTATION_LANDSCAPE:

            rotation = 90;

            break;

        case ORIENTATION_LANDSCAPE_REVERSE:

            rotation = -90;

            break;

        case ORIENTATION_PORTRAIT_REVERSE:

            rotation = 180;

            break;

    }

    rendererView.setRotation(rotation);

}

Verify that the rendererView maintains the correct aspect ratio to prevent stretching. try to adjust the layout parameters dynamically if necessary.

By implementing manual orientation detection and applying corresponding transformations to the rendererView, you can effectively manage the camera preview’s orientation in the application using the com.azure.android:azure-communication-calling:2.13.0-beta.1 library. This approach aligns with the project’s constraints and checks a consistent user experience across different device orientations.

Hope it helps!

---

Please do not forget to click "Accept the answer” and Yes wherever the information provided helps you, this can be beneficial to other community members.

If you have any other questions or still running into more issues, let me know in the "comments" and I would be happy to help you.