Ashish Virani
Ashish Virani

Reputation: 192

cant't show local surface in front of view on WebRTC video call

I'm developing WebRTC video call android application but, the local surface show in box but if call connected, that time the local view move in back side of the remote view.

Show My main.xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorBlack"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <FrameLayout
                android:id="@+id/rootView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/remoteVideoLl"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical" />

                <org.webrtc.SurfaceViewRenderer
                    android:id="@+id/localVideo"
                    android:layout_gravity="right"
                    android:translationZ="@dimen/_10sdp"
                    android:layout_marginTop="@dimen/_10sdp"
                    android:layout_marginRight="@dimen/_10sdp"
                    android:layout_width="@dimen/_100sdp"
                    android:layout_height="@dimen/_130sdp" />
            </FrameLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:padding="@dimen/_10sdp">

                <ImageView
                    android:id="@+id/exit"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_call_cut" />

                <ImageView
                    android:id="@+id/muteAudio"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/_10sdp"
                    android:src="@drawable/ic_microphone_on" />

                <ImageView
                    android:id="@+id/switchCamera"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/_10sdp"
                    android:src="@drawable/ic_camera_rotation" />

                <ImageView
                    android:id="@+id/spickerCall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/_10sdp"
                    android:layout_marginRight="@dimen/_10sdp"
                    android:src="@drawable/ic_speaker_on" />
                
            </LinearLayout>


        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

Start Camera method

localSurfaceViewRenderer.init(rootEglBase.getEglBaseContext(), null);
localSurfaceViewRenderer.setScalingType(RendererCommon.ScalingType.SCALE_ASPECT_FIT);
localSurfaceViewRenderer.setZOrderMediaOverlay(true);
localSurfaceViewRenderer.setEnableHardwareScaler(false);
localSurfaceViewRenderer.setMirror(true);
localSurfaceViewRenderer.setBackground(null);
webRtcClient.startCamera(localSurfaceViewRenderer,WebRtcClient.FONT_FACTING);
isCameraOpen = true;
webRtcClient.createAndJoinRoom(roomName);

Call Connect event

 @Override
public void onAddRemoteStream(String peerId, VideoTrack videoTrack) {
    this.runOnUiThread(new Runnable() {
        @Override
        public void run() {
            SurfaceViewRenderer remoteView = new SurfaceViewRenderer(CallActivity.this);
            remoteView.init(rootEglBase.getEglBaseContext(), null);
            remoteView.setScalingType(RendererCommon.ScalingType.SCALE_ASPECT_FIT);
            remoteView.setZOrderMediaOverlay(true);
            remoteView.setEnableHardwareScaler(false);
            remoteView.setMirror(true);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(500,500);
            layoutParams.topMargin = 20;
            remoteVideoLl.addView(remoteView,layoutParams);
            remoteViews.put(peerId,remoteView);
            videoTrack.addSink(remoteView);
        }
    });
}

i refer same solution but can't work this

local SurfaceViewRenderer.setZOrderMediaOverlay(true);

Upvotes: 0

Views: 844

Answers (1)

Ayyappan
Ayyappan

Reputation: 1265

Place frame layout below the Linear Layout, Try this,

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorBlack"
            android:gravity="center_horizontal"
            android:orientation="vertical">

           
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:padding="@dimen/_10sdp">

                <ImageView
                    android:id="@+id/exit"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_call_cut" />

                <ImageView
                    android:id="@+id/muteAudio"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/_10sdp"
                    android:src="@drawable/ic_microphone_on" />

                <ImageView
                    android:id="@+id/switchCamera"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/_10sdp"
                    android:src="@drawable/ic_camera_rotation" />

                <ImageView
                    android:id="@+id/spickerCall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/_10sdp"
                    android:layout_marginRight="@dimen/_10sdp"
                    android:src="@drawable/ic_speaker_on" />
                
            </LinearLayout>

            <FrameLayout
                android:id="@+id/rootView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/remoteVideoLl"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical" />

                <org.webrtc.SurfaceViewRenderer
                    android:id="@+id/localVideo"
                    android:layout_gravity="right"
                    android:translationZ="@dimen/_10sdp"
                    android:layout_marginTop="@dimen/_10sdp"
                    android:layout_marginRight="@dimen/_10sdp"
                    android:layout_width="@dimen/_100sdp"
                    android:layout_height="@dimen/_130sdp" />
            </FrameLayout>

        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

Upvotes: 0

Related Questions