отображать потоки видеокамеры и совместного использования экрана в одном теге видео без зеркального эффекта

Моя функциональность заключается в том, что я должен иметь возможность делать видеозвонки с удаленным пользователем, а также делиться экраном во время видеозвонка, когда пользователь захочет. Я успешно реализовал видеосвязь и совместное использование экрана с помощью webrtc. По умолчанию поток видеокамеры был зеркальным, поэтому я повернул видео, отображая его на удаленной стороне, используя css3. Но из-за этого совместное использование экрана также поворачивается. Вот почему совместное использование экрана становится зеркальным экраном.

Моя цель - правильно отображать оба потока без зеркального эффекта. Я могу сделать это, если каким-либо образом webrtc дает какую-либо идентификацию для потока совместного использования экрана или видеопотока или же в webrtc, если у них есть какие-либо настройки по умолчанию для поворота потока. Пожалуйста, дайте мне знать, если что-то подобное предоставляет webrtc. Ниже приведен мой код для справки.

видео-чат.component.html

    <div class="video-chat-wrapper">
        <video class="localVideo" playsinline autoplay muted></video>
        <div class="remoteVideos"></div>
        <div class="btn-sec">
            <span><button (click)="onHangUp()" class="hangup"><span class="img-icon"><img src="../../../assets/image/hang-up.svg" alt="hangup icon"></span>Hang up</button>
            </span>
            <span><button (click)="startScreenShare()" class="hangup"><span class="img-icon"><img src="../../../assets/image/share-screen.svg" alt="screen share icon"></span>screen share</button>
            </span>
            <span><button (click)="AddMember('New Member','chat')" class="hangup"><span class="img-icon"><img src="../../../assets/image/add-icon.png" alt="add member icon"></span></button>
            </span>
            <span><button *ngIf="!muteAudioToggle"  class="hangup" (click)="muteAudio()"><span class="img-icon"><img src="../../../assets/image/microphone.svg" alt="mute icon"></span>Mute</button>
            </span>
            <span><button *ngIf="muteAudioToggle" class="hangup" (click)="unMuteAudio()"><span class="img-icon"><img src="../../../assets/image/mute.svg" alt="Unmute icon"></span>Unmute</button>
            </span>

        </div>
    </div>

видеочат.component.scss

video {
 width: 100vw;
 height: auto;
 transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg); /* Safari and Chrome */
 -moz-transform: rotateY(180deg);
}
//here I have reversed the video but the screen sharing will also render in the same video element and it will also be reversed which I do not want.

video-chat.component.ts -> handleremotestreamдобавлено

handleRemoteStreamAdded(stream, id) {
console.log("stream", stream);
console.log("id", id);
/*
stream
MediaStream  {
    id: "FlwObFovZfg4vTKAYBfR8ORB24RbGh2ygkGV",
    active: true,
    onaddtrack: null,
    onremovetrack: null,
    onactive: null,
     …
}
id: "FlwObFovZfg4vTKAYBfR8ORB24RbGh2ygkGV"
active: trueonaddtrack: nullonremovetrack: nullonactive: nulloninactive: null__proto__: MediaStream
main.js: 31332 id tZopoowBHfwWaG4zAAAP

*/
const currentId=id;
document .querySelector("#" + currentId.replace(/[^a-zA-Z]+/g, "").toLowerCase()) .remove();
const remoteVideo=document.createElement("video");
remoteVideo.srcObject=stream;
remoteVideo.setAttribute( "id", id.replace(/[^a-zA-Z]+/g, "").toLowerCase());
remoteVideo.setAttribute("playsinline", "true");
remoteVideo.setAttribute("autoplay", "true");
remoteVideo.volume=0.6;
this.remoteVideos.appendChild(remoteVideo);
if (this.remoteVideos.querySelectorAll("video").length===1) {
    this.remoteVideos.setAttribute("class", "one remoteVideos");
}
else {
    this.remoteVideos.setAttribute("class", "remoteVideos");
}
const tracks=this.localStream.getTracks();
tracks.forEach(track=> {
    console.log("track ", track);
}
);
/*

track  
MediaStreamTrack {kind: "audio", id: "62ee15c5-7186-4a39-b945-d855f8ad712e", label: "Default - Microphone (Realtek High Definition Audio)", enabled: true, muted: false, …}
kind: "audio"
id: "62ee15c5-7186-4a39-b945-d855f8ad712e"
label: "Default - Microphone (Realtek High Definition Audio)"
enabled: false
muted: false
onmute: null
onunmute: null
readyState: "live"
onended: null
contentHint: ""
__proto__: 

MediaStreamTrack
main.js:31376 

track  
MediaStreamTrack {kind: "video", id: "25937d7c-466c-4b21-a1e9-f6fc1ed12ebb", label: "USB2.0 HD UVC WebCam (13d3:5666)", enabled: true, muted: false, …}
kind: "video"
id: "25937d7c-466c-4b21-a1e9-f6fc1ed12ebb"
label: "USB2.0 HD UVC WebCam (13d3:5666)"
enabled: true
muted: false
onmute: null
onunmute: null
readyState: "live"
onended: null
contentHint: ""
__proto__: MediaStreamTrack

*/
}

видеочат.component.ts -> startScreenSharing()

startScreenShare() {
navigator.mediaDevices["getDisplayMedia"](this.screenContraints)
    .then(stream => {
        this.isScreenShare = true;
        console.log("media device steam", stream);
        this.screenShareStream = stream;
        /*  onGettingSteam(stream); */
        if (stream) {
            this.getUserMediaSuccess(stream); //this function simply displays stream to a video element.
            stream.oninactive = () => {
                // console.log("SCREEN SHARE HAS BEEN STOPPED NOW!!!!!!!!!!!!!")

                this.isScreenShare = false;

                if (!this.hangedUpWhileSSActive) {
                    // checks if the user wants to hang up or wants to continue with the video streaming
                    navigator.mediaDevices
                        .getUserMedia(this.constraints)
                        .then(
                            this.getUserMediaSuccess.bind(this),
                            this.getUserMediaError.bind(this)
                        );
                }
            };
        }
    }, this.getUserMediaError.bind(this))
    .catch(this.getUserMediaError.bind(this));
  }

Я снова кратко излагаю свою цель: я хочу, чтобы пользователи могли делиться экраном в любое время, когда они хотят, во время видеозвонка, поэтому, когда пользователи нажимают кнопку общего доступа к экрану вместо потока захвата камеры, я отправляю поток совместного использования экрана по экрану Общий API. но поскольку видео необходимо повернуть на 180 градусов (текст отображается в обратном порядке) на удаленной стороне, совместное использование экрана также поворачивается, поскольку это также видеопоток (и они отображаются в одном видеоэлементе), и я не могу различать на удаленной стороне.

Логичные ответы также приветствуются. Любая помощь приветствуется.

Заранее спасибо!!