отображать потоки видеокамеры и общего экрана в одном теге видео без зеркального эффекта - PullRequest
Новая
       106

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

1 голос
/ 31 марта 2020

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

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

video-chat.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>

video-chat.component.s css

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 -> handleremotestreamadded 

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

*/
}

video-chat.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 градусов (текст отображается в обратном направлении) на удаленной стороне, общий доступ к экрану также поворачивается, поскольку это также видеопоток (и они отображаются в одном и том же элементе видео), и я не могу выделить на удаленной стороне.

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

Спасибо заранее !!

...